css动画
动画 transition:all .5s ease-in .2s;
过渡属性 transition-property
通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}
1.Keyframes介绍
Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，
后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
@keyframes changecolor{
from{
background: red;
}
to{
background: green;
}
}
浏览器的支持情况:Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。
2.调用动画 animation-name
animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的
动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。
语法：animation-name: none | IDENT[,none|DENT]*;
3.设置动画播放时间 animation-duration
animation-duration主要用来设置CSS3动画播放时间.
语法规则 animation-duration: <time>[,<time>]
4.设置动画播放方式 animation-timing-function
animation-timing-function属性主要用来设置动画播放方式。
语法规则：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out |
cubic-bezier(<number>,<number>, <number>, <number>) [, ease | linear | ease-in | ease-out |
ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
和transition中的transition-timing-function一样，具有以下几种变换方式：ease,ease-in,
ease-in-out,ease-out,linear和cubic-bezier。
5.设置动画开始播放的时间 animation-delay
animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点，和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。
语法规则： animation-delay:<time>[,<time>]*
6.设置动画播放次数 animation-iteration-count
语法规则： animation-iteration-count: infinite | <number> [, infinite | <number>]*
1、其值通常为整数，默认值为1，意味着动画只播放一次。
2、如果取值为infinite，动画将会无限次的播放。
7.animation-direction属性主要用来设置动画播放方向
语法规则：animation-direction:normal | alternate [, normal | alternate]*
其主要有两个值：normal、alternate
1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
注意：Chrome或Safari浏览器，需要加入-webkit-前缀！
8.animation-play-state属性主要用来控制元素动画的播放状态
参数： 其主要有两个值：running和paused。
其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。
9.animation-fill-mode 设置动画时间外属性
animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：
none、forwards、backwords和both。：
属性值 效果
none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards 表示动画在结束后继续应用最后的关键帧的位置
backwards 会在向元素应用动画样式时迅速应用动画的初始帧
both 元素动画同时具有forwards和backwards效果
在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的
默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧
上而不回到动画的第一帧上。或者同时具有这两个效果。
以上是 css动画 的全部内容， 来源链接： utcz.com/z/509000.html
