CSS总结

标签：

自定义动画

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 } ] [,*]
}

例1：@keyframes FromLeftToRight{ 

from {left: 0; }

to {left: 800px; } 

}

例2：

HTML:<div class="box"></div>

CSS:

.box {
width: 100px;
height: 100px;
background: #5CBE3E;
margin: 5px;
animation-name: fromLeftToRight;
animation-duration: 3s;
animation-iteration-count: infinite;
}

.box:hover {
animation-play-state: paused;
}

 @keyframes fromLeftToRight {
     from {
     margin-left: 0;
             }
       to {
     margin-left: 300px;
           }
}

3、animation-duration(动画时间)

设置对象动画的持续时间

语法：

animation-duration：<time>

例：

div{

      -webkit-animation-duration:1s;

                  animation-duration:1s

}

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

语法：

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;

}

CSS总结

标签：

原文地址：http://www.cnblogs.com/moyingliang/p/5775912.html