css动画

画： 可以使元素从一种样式变为另一种样式，使用前必须给动画指定一些关键帧。关键帧包含元素在特定时间内所拥有的样式。

 

使用解析：

        

 

 

 

 @keyframes规则：    -- @keyframes 名称 { from {}   to {} }            -- from： 起始状态   -- to： 终止状态

animation-duration:   定义需要多长时间才能完成动画  （必填项，否则动画不会发生，因为默认值就是0s）

animation-delay: 规定动画的延时时间 （可为负值，表示动画已经播放过的时间）

animation-iteration-count: 指定动画应该运行的次数（重复执行几次）（若值为infinite，则永远持续下去）

animation-direction: 指定是向前播放、向后播放还是交替播放动画

• normal : 动画正常播放（向前），默认值
• reverse： 动画反向播放（向后）
• alternate： 动画先向前播放，然后向后
• alternative-reverse： 动画先向后播放，然后向前

animation-timing-function: 规定动画的速度曲线

  可接受的值： 

• ease ： 指定从慢速开始，然后加快，最后缓慢结束的动画（默认） -- 运动先慢后快
• linear ： 开始到结束速度相同  -- 运动匀速
• ease-in ： 慢速开始的动画
• ease-out ： 慢速结束的动画
• ease-in-out ： 开始和结束较慢的动画
• cubic-bezier(n,n,n,n) ： 运行在三次贝塞尔函数中定义的值

animation-fill-mode : 指定动画的填充模式（在css动画开始执行之前和执行完成之后对元素样式进行调整）

  可接受的值 ：

• none ： 默认值。动画在执行之前和之后不会对元素应用任何样式
• forwards ： 元素将保留由最后一个关键帧设置的样式值（依赖animation-direction（播放类型：向前/向后/交替）和animation-iteration-count（执行次数））
• backwords ： 元素将获取由第一个关键帧设置的样式值，并在动画延迟期间保留该值（取决于animation-direction（向前/向后/交替播放））
• both ： 动画同事会遵循向前和向后的规则，从而在两个方向上扩展动画属性。

简写：

animation: 动画名称 动画执行时间 动画速度曲线 动画延时时间 动画播放次数 动画向前/向后/交替执行

标签：动画,--,样式,animation,播放,向前,css
来源： https://www.cnblogs.com/workJiang/p/14718258.html