css3动画animation属性大全

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

例：animation: myanimation 2s linear 1s infinite forwards;

animation 属性是一个简写属性，用于设置动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

animation-name 动画名称

animation-duration 动画指定需要多少秒或毫秒完成
值：time 默认值为 0，意味着没有动画效果

animation-timing-function   设置动画如何完成一个周期
值：linear  匀速
       ease   先慢后快，结束前变慢     默认
       ease-in    低速开始
       ease-out  低速结束
       ease-in-out   低速开始和结束
       cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation-delay 动画在启动前的延迟间隔
值：time 默认值为 0

animation-iteration-count    动画的播放次数
值：n   一个数字，定义播放多少次动画     默认值1
       infinite    动画无限次播放

animation-direction    是否轮流反向播放动画
值：normal         正常
       reverse        反向播放
       alternate      在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
       alternate-reverse   在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放

animation-fill-mode    当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要处于什么状态
值：none   默认，播放完动画后，画面停在起始位置
      forwards     播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
       backwards   如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值
       both   设置动画状态为动画结束或开始的状态（例如设置奇数播放为forwards状态，偶数播放为backwards状态）

animation-play-state    动画是否正在运行或已暂停
值：paused   指定暂停动画
       running   指定正在运行的动画，默认

initial 设置属性为其默认值

inherit 从父元素继承属性

---------------------
作者：做来胜手
来源：CSDN
原文：https://blog.csdn.net/caiyongshengCSDN/article/details/79398573
版权声明：本文为博主原创文章，转载请附上博文链接！

css3动画animation属性大全相关推荐

CSS3 动画 animation属性
@keyframes只是用来声明一个动画,而动画本身并不执行任何操作.因此,如果希望为某个元素应用动画,还需要把动画与该元素关联起来. 如果一个动画没有与任何元素关联,它就不会被调用,也就不会产生动画 ...
css动画定义,css3的动画(animation)属性的详解（附代码）
本篇文章给大家带来的内容是关于css3的动画(animation)属性的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. css3动画(animation)具有以下属性: ...
CSS3 动画实现方法大全
常用效果总结(需要引用animate.css) <!doctype html> <html lang="en"><head><meta c ...
css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
CSS3动画 animation
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果, 可以改变任意多的样式任意多的次数.请用百分比来规定变化发生的时间,或用关键词 "from" 和 ...
安卓动画全解：补间动画（视图动画）、布局动画、属性动画、逐帧动画。动画Animation属性、Alpha属性、Scale属性、Translate属性、Rotate属性，动画集AnimationSet
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解安卓动画全解:补间动画(视图动画).布局动画.属性动画.逐帧动画. 主要内容包含:动画Animation属性.Alpha属性.Scale属性.Tran ...
CSS3单词及属性大全
CSS3属性大全 0~9text:文本; /**/decoration:装饰,修饰; /**/none:没有,无,没有东西地; /**/list:列表; /**/style:样式; /**/persp ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
Css3动画(animation)
在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题.CSS3 的出现,让动画变得更加容易,性能也更加好. ...
css3动画 --- Animation
Animation CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置. 动画包括两个部分:描述动画的样式规则:用于指定动画开始.结束以及中间点样式的关键帧. 相较 ...

css3动画animation属性大全

css3动画animation属性大全相关推荐

最新文章

热门文章