首页 > 代码库 > 7月25号=》271页-275页

7月25号=》271页-275页

12.3  CSS3提供的Animation动画

    CSS3提供了强大的Tween动画支持:Animation动画,这种动画允许开发者定义多个关键帧,浏览器

    将会负责计算、插入关键帧之间的虚拟动画帧。

    CSS3为Animation动画提供了如下几个属性。

      animation-name:指定动画的名称。该属性指定一个已有的关键帧定义。

      animation-duration:指定动画的持续时间。

      animation-timing-function:指定动画的变化速度。

      animation-delay:指定动画延迟多长时间才开始执行。

      animation-iteration-count:指定动画的循环执行次数。

      animation:这是一个复合属性。该属性的格式为:animation-name animation-duration animation-timing-function

            animation-delay animation-iteration-count,使用该属性可以同时指定 animation-name animation-duration

            animation-timing-function animation-delay animation-iteration-count等属性。

      上面属性中animation-name 的属性值应该是一个关键帧定义,这个关键帧定义满足如下格式:

        keyframes 关键帧名称{

            from | to |百分比{

                属性1:属性值1;

                属性2:属性值2;

                属性3:属性值3;

            }

        }

      上面语法格式中,from | to |百分比用于定义关键帧的位置,其中from代表开始处;to代表动画结束帧;百分比则指定关键帧的出现

      位置。例如,10%代表关键帧出现在动画进行了1/10时间处。一个关键帧定义可以包含多个关键帧。

      代码示范:

        //定义一个关键帧

        keyframes ‘fkjava‘ {

          //定义动画开始处的关键帧

          0%{

            left:100px;

          }

          //定义动画进行40%时的关键帧

          40%{

            left:150px;

          }

          //定义动画进行60%时的关键帧

          60%{

            left:75px;

          }

          //定义动画进行100%时的关键帧

          100%{

            left:100px

          }

        }

 

        //为div元素定义CSS样式

        div{

          width:100px;

          height:100px;

          border:1px solid;

          position:absolute;

        }

 

        //为鼠标悬停的div元素定义CSS样式

        div:hover{

          //指定执行fkjava动画

          animation-name:‘fkjava‘;

          //指定动画的执行时间

          animation-duration:5s;

          //指定动画的循环次数为1

          animation-iteration-count:1;

        }

    

7月25号=》271页-275页