首先是animation动画的书写
先定义@keyframes
@keyframes roll {
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(360deg);
}
}
然后引用到animation中
.double-coin{
color: #ff5369;
display: inline-block;
animation: roll 1s 4 1s backwards alternate ease-in-out; /*这里的alternate是反向动画的意思,动画次数必须大于1。*/
}
注: 这个.double-coin元素是行内元素,必须转成行内块级元素。