animation动画复合属性

知更鸟 2021年10月24日10:08:28Web前端1 107阅读模式

css3中的animation动画复合属性:name(绑定的动画名称) duration(完成时间) timing-function(如何完成一个周期) delay(启动前间隔) iteration-count(播放次数) direction(是否反向) fill-mode(不播放时的样式) play-state(运行或暂停)文章源自知更鸟-https://zmingcx.com/animation-composite-property.html

比如:文章源自知更鸟-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

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
CSS3 水平垂直居中 Web前端

CSS3 水平垂直居中

当使用top: 50%和left: 50% 是以左上角为原点,故不处于中心位置,可以用translate()实现水平垂直居中。 CSS3 水平垂直居中 translate()是css3的新特性,在不知...
网页特效live2d看板娘 WordPress

网页特效live2d看板娘

如果喜欢给自己的网站加些花花草草,live2d看板娘就是一个不错的特效,人物会跟随你的鼠标动,超级可爱! 看板娘   将下面代码添加到网页适当位置即可。 <script src="ht...
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chro...
匿名

发表评论

匿名网友

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

确定

评论:1   其中:访客  1   博主  0
    • 兔宝宝游戏网
      兔宝宝游戏网 1

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