CSS3 总结（二）

过渡（Transtion）

• 语法：transition: property duration timing-function delay;
• property：需要过渡的属性名（all选择全部属性）
• duration：完成过渡效果需要的时间（单位 s / ms）
• timing-function：过渡速度
• linear：匀速
• ease：慢-快-慢
• ease-in：慢速开始过渡效果
• ease-out：慢速结束过渡效果
• ease-in-out：慢速开始，慢速结束，中间速度平稳
• delay：延迟过渡执行时间（单位 s / ms）

动画（Animation）

1. animation-name（动画名称）

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

div{    100px;
   　　 height:100px;
    　　background:red;
   　　 position:relative;
   　　 animation-name:mymove;
   　　 animation-duration:5s;    
　　}

　　@keyframes mymove
　　{
　　from {left:0px;}
　　to {left:200px;}
　　}

2. keyframes(关键帧)

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

div{   100px;
   　　 height:100px;
    　　background:red;
   　　 position:relative;
   　　 animation-name:mymove;
   　　 animation-duration:5s;    
　　}

@keyframes FromLeftToRight{
   　　 0%{left: 0; }
     100%{ left: 800px; }
}

3. animation-duration(动画时间)

div{
      -webkit-animation-duration:1s;
                  animation-duration:1s/*所需的动画时间1秒*/

}

4. animation-timing-function（动画的过渡速度）

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

div{
      -webkit-animation-timing-function : ease-in;
                    animation-timing-function : ease-in;/*动画的过渡速度是由慢到快*/
}

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

div{
      animation-delay:2s;/*延迟2秒*/  
}

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

infinite：表示无限次数

div
{
    animation-iteration-count:3;/*动画执行的次数是3次*/
}

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

属性值：

normal：正常方向，默认值。

reverse：反方向运行

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

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

div{
         　animation-direction : normal; /*正常方向，默认值*/
            animation-direction : reverse; /*反方向运行*/
            animation-direction : alternate; /*动画先正常运行再反方向运行，并持续交替运行*/
            animation-direction :alternate-reverse; /*动画先反向运行再正常运行，并持续交替运行*/
}    

8. animation-play-state(动画的状态)

属性值：

running：运动

paused：暂停

div:hover{       
    animation-play-state:paused; /*暂停*/
}

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

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

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

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

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

div {   
              animation-fill-mode :forwards; /*设置对象状态为动画结束时的状态*/
}

10. animation(动画复合属性)

语法：

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

可以将以上属性缩写。例如以下代码：

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

 

 

查看全文