Ninachow的博客园

动画帧@keyframes

要创建CSS3动画，你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。 指定至少这两个CSS3的动画属性绑定向一个选择器： 1，规定动画的名称， 2，规定动画的时长

@keyframes的绑定，及使用

                
/*  把 "mymove" 动画捆绑到 div 元素，时长：5 秒： */        
div
{
    animation: mymove 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
/*  使一个div元素逐渐移动200像素：  */
@keyframes mymove
{
from {top:0px;}   
to {top:200px;}
}

/* 指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。*/
/*  为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。*/

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}              
50% {top:100px;}
100% {top:200px;}
}                            
                
            

CSS3的动画属性

1，animation-name：规定 @keyframes 动画的名称。

                
/* 动画名称必须写，名称会绑定动画帧，才能完成动画 */
div
{
    animation-name: mymove;
    -webkit-animation-name:mymove; /* Safari 和 Chrome */
}
                
            

2，animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。

                
/* 动画一次完成的时间，默认值为0时，动画立马执行完成。 */
/* 设置动画在两秒内完成: */
div
{
    animation-duration:2s;
    -webkit-animation-duration:2s; /* Safari 和 Chrome */
}
                
            

3，animation-timing-function：规定动画的速度曲线。默认是 "ease"。

                 
/*  从开始到结束以相同的速度播放动画: */
div 
{
    animation-timing-function:linear;
    -webkit-animation-timing-function:linear; /* Safari and Chrome */
}     
/*  其他参数设置  */
div
{
    animation-timing-function: ease;    /* 默认值- 动画以低速开始，然后加快，在结束前变慢。*/
    animation-timing-function: linear;  /* 	动画从头到尾的速度是相同的。 */
    animation-timing-function: ease-in;  /* 动画以低速开始。 */
    animation-timing-function: ease-out;  /* 动画以低速结束。 */
    animation-timing-function: ease-in-out;  /* 动画以低速开始和结束。 */
    animation-timing-function: cubic-bezier(n,n,n,n);  /* 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 */
}
                 
             

4，animation-delay 规定动画何时开始。默认是 0。

                 
/*  animation-delay 值单位可以是秒（s）或毫秒（ms）, 指定秒或毫秒数之前要等待切换效果开始.*/
/*  提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。 */
div
{
    animation-delay:2s;       /*  等待两秒，然后开始动画  */
    -webkit-animation-delay:2s; /* Safari 和 Chrome */
    animation-delay: 0;      /* 默认值 0 - 不需要等待，直接执行 */
}
                 
             

5，animation-iteration-count：规定动画被播放的次数。默认是 1。

                
/*  播放三次动画： */
div
{
    animation-iteration-count:3;
    -webkit-animation-iteration-count:3; /*Safari and Chrome*/
}     
/*  默认值 - 1，无限循环 - infinite   */ 
div
{
    animation-iteration-count: infinite ;  /* 	指定动画应该播放无限次（永远） */
    animation-iteration-count: 1;         /* 默认值 1  */
}         
                
            

6，animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。

                
/* 先执行一遍动画，然后再反向执行一遍动画： */
div
{
    animation-direction:alternate;
    -webkit-animation-direction:alternate; /* Safari 和 Chrome */
}   
/*  其他属性值*/ 
div
{
    animation-direction: normal;               /*  默认值。动画按正常播放。  */
    animation-direction: reverse;              /*  动画反向播放。 */
    animation-direction: alternate;            /*  动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。  */
    animation-direction: alternate-reverse;    /*  动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 */
    animation-direction: initial;              /*  设置该属性为它的默认值。 */
    animation-direction: inherit;              /*  从父元素继承该属性  */

}  
                
            

7，animation-play-state： 规定动画是否正在运行或暂停。默认是 "running"。

                 
/*animation--play-state属性指定动画是否正在运行或已暂停。
注意：在JavaScript中使用此属性在一个周期中暂停动画。*/
div
{
    animation-play-state:running;         /*  指定正在运行的动画  */
    animation-play-state:paused;          /*  指定暂停动画       */
    -webkit-animation-play-state:paused;  /* Safari 和 Chrome */
}
                 
             

8，animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

                 
div
{
    -webkit-animation-fill-mode:forwards;  /*   Safari 和 Chrome */

    animation-fill-mode: none;             /*   默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 */   

    animation-fill-mode: forwards;         /* 	在动画结束后停在动画帧100%的位置
                                                在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。*/ 

    animation-fill-mode: backwards;        /*   忽略原始状态，直接进入动画0%
                                                动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关 键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当    animation-direction 为 "reverse" 或 "alternate-reverse" 时）。*/ 

    animation-fill-mode: both;             /*   忽略原始状态，直接进入动画0%，在动画结束后停在动画帧100%的位置
                                                动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。*/ 

    animation-fill-mode: initial;          /*   设置该属性为它的默认值。 */ 

    animation-fill-mode: inherit;          /*   从父元素继承该属性。    */      
}
                 
             

9，animation ：所有动画属性的简写属性，除了 animation-play-state 属性。

                 
div
{
    animation-name: mymove;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count: infinite;
    animation-direction: alternate; 
    animation-fill-mode: forwards;

    animation: mymove 5s linear 2s infinite alternate;
}