8.15 CSS知识点6

自定义动画

1.animation-name（动画名称）

元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。

语法：

animation-name ：none | <identifier>

例：

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

2.keyframes（关键帧）

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

语法：

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

例：

@-webkit-keyframes FromLeftToRight{ 
    from {left: 0; }
    to {left: 800px; } 

3.animation-duration（动画时间）

设置对象动画的持续时间

语法：

animation-duration：<time>

例：

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

4. animation-timing-function(动画的过渡速度)

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

语法：

animation-timing-function： ease | linear | ease-in | ease-out | ease-in-out

例：

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

5. animation-delay(动画延迟时间)

设置对象动画的延迟时间

语法：

animation-delay：<time>

例：

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

6. animation-iteration-count(动画执行次数)：

设置对象动画的延迟时间

语法：

animation-iteration-count：infinite | <number>

infinite表示无限次数

例：

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

7. animation-direction(动画的顺序)

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

语法：

animation-direction：normal | reverse | alternate | alternate-reverse

说明：

normal：正常方向

reverse：反方向运行

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

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

例：

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

8.animation-play-state（动画的状态）

设置对象动画的状态

语法：

animation-play-state：running | paused

说明：

running：运动

paused：暂停

例：

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

9. animation-fill-mode(动画时间之外的状态)

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

语法：

animation-fill-mode ： none | forwards | backwards | both

说明：

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

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

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

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

例：

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

10. animation(动画复合属性)

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

语法：

animation：[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]

例：

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