CSS3中的变形与动画（下）

[viki-119]

Keyframes: Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头， 后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分 比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的 是from，100%对应的是to。

Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。 @keyframes wobble { 0% {margin-left: 100px;background:green;} 40% {margin-left:150px;background:orange;} 60% {margin-left: 75px;background: blue;} 100% {margin-left: 100px;background: red;} } div { width: 100px;height: 100px;background:red;color: #fff;} div:hover{animation: wobble 5s ease .1s;}

[viki-119]

@keyframes around{ 0% { transform: translateX(0);} 25%{ transform: translateX(180px);} 50%{ transform: translate(180px, 180px); } 75%{transform:translate(0,180px);} 100%{transform: translateY(0);} } div { width: 200px;height: 200px;border: 1px solid red;margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: orange; border-radius: 100%; animation-name:around; animation-duration: 10s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count:infinite; }

[viki-119]

1.animation-name:around; 2.animation-duration: 主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

3.animation-timing-function: 属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。

4.animation-iteration-count属性主要用来定义动画的播放次数。 用法： animation-iteration-count:5; animation-iteration-count: infinite;//无限次

5.animation-direction:alternate;设置动画播放方向 normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

6.animation-play-state属性主要用来控制元素动画的播放状态。 其主要有两个值：running和paused。 animation-play-state:paused;

7.animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。 主要具有四个属性值：none、forwards、backwords和both。 none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards:表示动画在结束后继续应用最后的关键帧的位置 backwards:会在向元素应用动画样式时迅速应用动画的初始帧 both:元素动画同时具有forwards和backwards效果

div { width: 500px; height: 200px; border: 1px solid red; margin: 20px auto; //position:relative; } div span { display: inline-block;//position:absolute; width: 20px; height: 20px; background: red; border-radius: 100%; animation-name:move; animation-duration: 10s; animation-timing-function:ease; animation-delay:.1s; animation-iteration-count:infinite; }