css - @keyframes 能接受参数吗？
本文介绍了css - @keyframes 能接受参数吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
@keyframes around {
from {
margin-left: 100%;
}
to {
margin-left: -5em;
}
}那个-5em应该是参数传进去的？可以解决吗？
解决方案
设置自定义CSS属性结合var函数实现，自定义属性以--符号开头
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@keyframes around {
from {
margin-left: 100%;
}
to {
margin-left: var(--margin-left);
}
}
.main{
position: absolute;
left:0p;
top:0px;
width: 200px;
height: 200px;
background-color: #7C2845;
color:#ffffff;
--margin-left:-5em;
}
.main.active{
animation-name: around;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="main active">
TEST
</div>
</body>
</html>这篇关于css - @keyframes 能接受参数吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
