animation动画复合属性

知更鸟 Web前端1 307阅读模式

css3中的animation动画复合属性:name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-count(播放次数) direction(是否反向) fill-mode(不播放时的样式) play-state(运行或暂停)

比如:文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

-webkit-animation-name:'ripple';/*动画属性名,也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率,和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料,infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/

可以写成:文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

-webkit-animation: ripple 2s ease 0s infinite alternate;

timing-function:
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

iteration-count:
n 一个数字,定义应该播放多少次动画
infinite 指定动画应该播放无限次(永远)文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

play-state:文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

paused 指定暂停动画
running 指定正在运行的动画文章源自知更鸟-https://zmingcx.com/animation-composite-property.html 文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
评论  1  访客  1
    • 兔宝宝游戏网
      兔宝宝游戏网 1

      不错的动画交互的代码了,mack一下。

    匿名

    发表评论

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定