CSS动画效果

标签：

animation-name 动画名称 none | <identifier>

例：div{      -webkit-animation-name : FromLeftToRight;     animation-name : FromLeftToRight;}

keyframes 关键帧 @keyframes <identifier> { [ from | to | <percentage> ]{ sRules } ] [,*]}

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

例：@-webkit-keyframes FromLeftToRight{ 0%{left: 0; } 100%{ left: 800px; }}  

animation-duration 动画时间 <time>

说明：设置对象动画的持续时间

例：div{      -webkit-animation-duration:1s;                  animation-duration:1s}

animation-timing-function 动画的过渡速度 ease | linear | ease-in | ease-out | ease-in-out

说明：设置对象动画的过渡速度类型

例：div{      -webkit-animation-timing-function : ease-in;                    animation-timing-function : ease-in;}

animation-delay 动画延迟时间 <time>

说明：设置对象动画的延迟时间

例：div{      -webkit-animation-delay : 1s;     animation-delay : ease-in;}

animation-iteration-count 动画执行次数 infinite | <number>

说明：设置对象动画的延迟时间

infinite表示无限次数

例：div{      -webkit-animation-iteration-count : 2;     animation-iteration-count : 2;}

animation-direction 动画的顺序 normal | reverse | alternate | alternate-reverse

说明：设置对象动画在循环中是否按照相反顺序执行

normal：正常方向

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

例：div{      -webkit-animation-direction : normal;     animation-direction : normal;}

animation-play-state 动画的状态 running | paused

说明：设置对象动画的状态

running：运动

paused：暂停

例：div:hover{     -webkit-animation-play-state:paused;     animation-play-state:paused;}

animation-fill-mode 动画时间之外的状态 none | forwards | backwards | both

说明：设置对象动画时间之外的状态

none：默认值。不设置对象动画之外的状态

forwards：设置对象状态为动画结束时的状态

backwards：设置对象状态为动画开始时的状态

both：设置对象状态为动画结束或开始的状态

例：div {     -webkit-animation-fill-mode : both;                  animation-fill-mode : both;}

animation 动画复合属性 [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]

说明：通过 animation ，我们能够创建自定义动画，这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript。

例：div{    -webkit-animation: FromLeftToRight  2s ease-out forwards;                 animation: FromLeftToRight  2s ease-out forwards; }

CSS动画效果

标签：

原文地址：http://www.cnblogs.com/adda/p/5774847.html