黑马程序员技术交流社区

标题: 【成都校区】-- css3动画属性 [打印本页]

---

作者: 小刀葛小伦    时间: 2019-11-21 18:42
标题: 【成都校区】-- css3动画属性

[CSS] 纯文本查看 复制代码

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

[CSS] 纯文本查看 复制代码

例：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    动画名称
  

   2.animation-duration   动画指定需要多少秒或毫秒完成

•    值：time      默认值为 0，意味着没有动画效果
  

  3.animation-timing-function   设置动画如何完成一个周期

•    值：linear  匀速
•        ease   先慢后快，结束前变慢     默认
•        ease-in    低速开始
•        ease-out  低速结束
•        ease-in-out   低速开始和结束
•        cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
  

4.animation-delay   动画在启动前的延迟间隔

• 值：time   默认值为 0
  

5.animation-iteration-count    动画的播放次数

• 值：n   一个数字，定义播放多少次动画     默认值1
•        infinite    动画无限次播放
  

6.animation-direction    是否轮流反向播放动画

• 值：normal         正常
•        reverse        反向播放
•        alternate      在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
•        alternate-reverse   在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
  

7.animation-fill-mode    当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要处于什么状态

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

8.animation-play-state    动画是否正在运行或已暂停

• 值：paused   指定暂停动画
•        running   指定正在运行的动画，默认
  

9.initial    设置属性为其默认值

10.inherit   从父元素继承属性

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2