CSS的动画特效（animation）
今天来讲⼀下css中很实⽤的⼀个效果-动画（animation）。
动画就是使元素从⼀种样式逐渐变化为另⼀种样式的效果。我们可以改变任意多的样式任意多的次数（很官⽅的回答）。
为了⽅便⼤家和我⾃⼰理解这个概念，我们可以想像⼀下准备拍电影的时候，我们需要⼀个电影名吧，需要设置电影的时间吧。⽽且拍电影就是⼀帧⼀帧，叫做关键帧。所以我们设置动画的时候要讲清楚电影名（animation-name），电影时长（animation-duration），电影啥时候开始（animation-delay），播放或者暂停（animation-play-state）。关键帧（@keyframes）就是拍好了供我们调⽤，所以电影名就是要使⽤到关键帧。接下来细细讲解每个部分的具体内容：
@keyframes
通过 @keyframes 规则，我们可以创建动画。
创建动画的原理是，将⼀套 CSS 样式逐渐变化为另⼀套样式。在动画过程中我们能够多次改变这套 CSS 样式。以百分⽐来规定改变发⽣的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器⽀持，我们应该始终定义 0% 和 100% 选择器。这⾥⾯0%就是⼀帧，50%是⼀帧，100%也是⼀帧。
最后，请使⽤动画属性来控制动画的外观，同时将动画与选择器绑定
animationname 必需。定义动画的名称
keyframes-selector 必需。动画时长的百分⽐
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles 必需。⼀个或多个合法的 CSS 样式属性
举个栗⼦：
@keyframes name
css特效文字{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
animation
animation 属性是⼀个简写属性，⽤于设置六个动画属性：
1. animation-name      规定需要绑定到选择器的 keyframe 名称
2. animation-duration      规定完成动画所花费的时间，以秒或毫秒计
3. animation-timing-function  规定动画的速度曲线
4. animation-delay        规定在动画开始之前的延迟
5. animation-iteration-count    规定动画应该播放的次数
6. animation-direction      规定是否应该轮流反向播放动画
1.animation-name 就是需要绑定的@keyframe的名称了。
2.animation-timing-function就是规定动画的速度曲线。默认是 “ease”。
linear  动画从头到尾的速度是相同的
ease  默认。动画以低速开始，然后加快，在结束前变慢
ease-in  动画以低速开始
ease-out  动画以低速结束
ease-in-out  动画以低速开始和结束
cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中⾃⼰的值
3.animation-iteration-count 默认为1次，可以填写数字，nfinite 规定动画应该⽆限次播放。
4. animation-direction 属性定义是否应该轮流反向播放动画。如果 animation-direction 值是 “alternate”，则动画会在奇数次数
（1、3、5 等等）正常播放，⽽在偶数次数（2、4、6 等等）向后播放。如果把动画设置为只播放⼀次，则该属性没有效果。
5.animation-duration和animation-delay分别是动画的持续时间和延时播放
animation-play-state和animation-fill-mode
1.animation-play-state属性规定动画正在运⾏还是暂停。只有两个属性可以设置：
paused 规定动画已暂停
running 规定动画正在播放
2.animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。其属性值是由逗号分隔的⼀个或多个填充模式关键词。
none 不改变默认⾏为
forwards 当动画完成后，保持最后⼀个属性值（在最后⼀个关键帧中定义）
backwards 在 animation-delay 所指定的⼀段时间内，在动画显⽰之前，应⽤开始属性值（在第⼀个关键帧中定义）
both 向前和向后填充模式都被应⽤
不好理解对不对，往下看就好理解了！
动画分为 初始状态 等待期 动画执⾏期 完成期 四个阶段：
初始状态，就是没有触发动画效果时，你元素原本应该有的状态
等待期，就是 animation-delay 设置的延迟期间
动画执⾏期，指的是 delay 结束瞬间开始执⾏动画，⼀直持续到最后⼀帧
完成状态，执⾏完最后⼀帧时，元素处于的状态
none 表⽰等待期和完成期，元素样式都为初始状态样式，不受动画定义（@keyframes）的影响both 表⽰等待期样式为第⼀帧样式，完成期保持最后⼀帧样式
backwards 表⽰等待期为第⼀帧样式，完成期跳转为初始样式
forwards 表⽰等待期保持初始样式，完成期间保持最后⼀帧样式
通俗的讲就是动画结束之后保持什么状态：
none 表⽰不设置结束之后的状态，默认情况下回到跟初始状态⼀样。
forwards 表⽰将动画元素设置为整个动画结束时的状态。
backwards 明确设置动画结束之后回到初始状态。
both 表⽰设置为结束或者开始时候的状态。⼀般都是回到默认状态。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。