CSS旋转动画和动画的拼接

旋转动画

第一个样式:

第二个样式:

HTML代码

linear是匀速运动,还可以设置为:

ease 默认。动画以低速开始,然后加快,在结束前变慢。

ease-in 动画以低速开始。 测试

ease-out 动画以低速结束。 测试

ease-in-out 动画以低速开始和结束。 测试

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

infinite是无限次播放的意思,这里也可以写个数字,来控制播放几次;

动画的拼接

keyframes样式

元素样式

animation-name可以设置两个(或多个)keyframes名;

后面的样式属性都是按照两个(或多个)keyframes来配置的;

只要把animation-delay配置好,就可以完美实现动画拼接了;

打开APP阅读更多精彩内容