CSS3 中的动画属性

一、动画属性和描述

属性	描述
@keyframes	定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。
animation	复合属性。检索或设置对象所应用的动画特效。
animation-name	检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
animation-duration	检索或设置对象动画的持续时间
animation-timing-function	检索或设置对象动画的过渡类型
animation-delay	检索或设置对象动画的延迟时间
animation-iteration-count	检索或设置对象动画的循环次数
animation-direction	检索或设置对象动画在循环中是否反向运动
animation-play-state	检索或设置对象动画的状态

 

二、属性详解

1. @keyframes :用来创建动画，在动画过程中，可以随意修改动画的样式。要想有动画效果必须在动画发生时使用 ％，或关键字 "from" 和 "to"（和0％到100％相同），其中 0％ 是开头动画，100％ 是完成动画，这里推荐使用 0% 和 100%：

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

查看效果

 

2. animation : 复合属性

//语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 

3. animation-timing-function：指定动画将如何完成一个周期

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。

查看效果

 

4. animation-delay 定义动画开始前等待的时间。

 

5. animation-iteration-count 规定动画的循环次数

值	描述
n	一个数字，定义应该播放多少次动画
infinite	指定动画应该播放无限次（永远）

查看效果

 

6. animation-direction 定义是否循环交替反向播放动画

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

查看效果

 

7. animation-play-state 指定动画运行或暂停

值	描述
paused	指定暂停动画
running	指定正在运行的动画

查看效果

 

 

笔记源于 RUNOOB