动画练习-360度旋转-animation

最新推荐文章于 2022-11-27 22:26:58 发布

weixin_30781433

最新推荐文章于 2022-11-27 22:26:58 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/beimingbingpo/p/11457842.html

版权

animation
也是css3属性的一员

animation: name duration timing-function delay iteration-count direction;
包括：
动画名，
完成一次动画所需要的时间，
动画速度函数(linear,ease等)，
动画开始之前的延时，
动画执行的次数（默认是1，常用inifite）
规定是否应该轮流反向播放动画。（默认是normal，alternate代表完成动画一次需要返回去一次）

//必须要的两个属性，即动画名和完成动画所需要的时间
animation: name duration;

360度旋转小案例

html
<img src="T001.jpg" />

css
img {
border-radius: 50%;
animation: rotateArround 3.5s linear 3s infinite alternate;
-webkit-animation: rotateArround 3.5s linear 3s infinite alternate;
-moz-animation: rotateArround 3.5s linear 3s infinite;
-ms-animation: rotateArround 3.5s linear 3s infinite;
-o-animation: rotateArround 3.5s linear 3s infinite;
}

@keyframes rotateArround {
from {transform: rotateZ(0deg);}
to {transform: rotateZ(360deg);}
}

@-webkit-keyframes rotateArround {
from {-webkit-transform: rotate(0deg);
}
to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotateArround {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}

@-ms-keyframes rotateArround {
from {-ms-transform: rotate(0deg);}
to {-ms-transform: rotate(360deg);}
}

@-o-keyframes rotateArround {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}

————————————————
版权声明：本文为CSDN博主「Baby_加油_」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34664239/article/details/83000748

转载于:https://www.cnblogs.com/beimingbingpo/p/11457842.html