CSS3动画与过渡

CSS动画部分

动画定义：

使元素从一种形式逐渐转化为另一种样式的效果，可任意改变多的样式任意的次数，需要用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%，0%是动画的开始，100%是动画的完成，为达到最佳的浏览器支持，应当始终定义0%和100%选择器。

在创建CSS3动画之前，需要了解到@keyframes规则，@keyframes规则就是创建动画，其规则内指定了一个CSS样式和动画将逐步从目前的样式更改为新的样式；当在@keyframes创建动画时，需要绑定要到一个选择器，否则将不会出现任何效果，既：1规定动画的名称  2规定动画的时长。

实例1：

该动画的样式即为将红色转变为黄色(注：该实例未添加时间与时长)

实例2

 该动画设置了改变其动画过程的时间点所变换的背景颜色及具体位置

CSS3的动画属性

1 @keyframes：

规定动画

2 animation：所有动画的简写属性

3 animation-name：规定@keyframes动画的名称

4 animation-duration：规定动画完成一个周期所花费的时间，默认为0(时间单位可为秒和毫秒)

5 animation-timing-function：规定动画的速度曲线，默认是ease

linear 动画从头到尾的运动速度相同；ease 动画以低速开始，后加快，在结束前变慢；

ease-in 动画低速开始；eae-out 动画低速结束； ease-in-out 动画以低速开始和结束；

6 animation-fill-mode：规定动画不播放(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式；

7 animation-delay：规定动画何时开始；(默认为0)；

8  animation-iteration-count：规定动画播放的次数；(默认为1)；

9  animation-direction：规定动画是否在下一周期逆向的播放，默认为normal；

10 animation-play-state：规定动画是否正在运行或暂停，默认为”running“。

实例3

 设置一个动画的所有属性

CSS3过渡部分

定义：为添加某种效果可以从一种样式转变到另一个的时候，无需使用到flash或者javascript。但需要实现动画的过渡，则必须两项内容：

1、指定添加效果的CSS属性；2、指定效果持续的时间；

注：如果未指定期限，transition将不会有任何效果，因为默认值为0；如果要添加多个样式的变换效果，添加的属性需要由逗号隔开：

实例4

 添加了宽度，高度和转换效果

过渡属性：

transition：简写属性，用于在一个属性中设置的四个过渡属性；

transition-property：规定应用过渡的CSS属性的名称；

transition-duration：定义过渡所需要花费的时间，默认值为0；

transition-timing-function：规定动画过渡效果的时间曲线，默认为”ease“；

transition-delay：规定动画过渡效果何时开始。

实例5

 在一个实例中使用上所有的属性。