每一次间隔0.5s问题？
来源：2-29 编程练习
9玖月
2017-02-09 13:47:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
div {
font-family: Arial;
font-size: 72px;
font-weight: bold;
position: fixed;
right: 0;
left: 0;
/*bottom:0;*/
width: 30px;
height: 30px;
margin: auto;
transform: rotate(90deg);
animation: logo 1s ease-out .5s infinite alternate;
}
@keyframes logo{
0%{ transform: translate(0,0) rotate(90deg);}
100%{ transform: translate(0,20px) rotate(90deg);}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
助教导师，这段代码的@keyframes logo 这么设置之后为什么好像还是没有 每一次延迟0.5s效果，而且还需要加上 rotate(90deg) ,没有加上反向还会改
变? 这么解决 每一次延迟0.5s问题？
1回答
-
小于飞飞
2017-02-09
注意 animation 中的延迟不算在动画内，所以开有延迟，动作执行后不会有延迟。 transform: translate(0,0) 和transform: rotate(90deg); 分别写时，相应属性会失效，要连写，可以试一试，所以，如果不这样写transform: translate(0,0) rotate(90deg);只写transform: translate(0,0)，旋转就没有了。希望对你有帮助，祝学习愉快，欢迎采纳。
1
相似问题