猫叔:Fighting!!!

CSS3-animation,动画

动画 Animaion只应用于页面中已存在的DOM元素上。

      
      IE10及主流浏览器支持,Safari和Chrome加前缀。

  ①animation:可为一个元素添加多个animation。

      

      animation-name:给@keyframes定义一个名称。默认none无效果。
      animation-duration:定义动画一个周期的时间。默认0。单位s。
      animation-timing-function:定义动画的速度曲线。【同transition】
      animation-delay:定义过渡效果何时开始。默认0。单位s。
      animation-iteration-count:定义循环次数。默认1。infinite无限。
      animation-direction:定义播放动画的方式。
        normal:先前播放。alternate:偶数次向前播放,基数次反向播放。
      animation-play-state:规定动画播放状态。
        running、paused。
        可用JavaScript通过此属性控制动画。

    Animation的属性变化图:

      

  ②关键帧:
     @keyframes规则:规定动画效果【CSS样式】。
      1)至少规定动画名和时长。
      2)keyframes的单位必须是百分比值。
      关键字from和to等同于0%和100%。为了得到最佳兼容,应该始终定义0%和100%选择器。

      div1{
        animation: myfirst1 5s;
      }
      keyframes myfirst1{
        from {background:red;}
        to {background:yellow;}
      }


      可设置不同时间段的动画:
      div2{
        animation: myfirst2 5s;
      }
      @keyframes myfirst2{
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
      }

 

posted @ 2013-06-19 15:16 庄丶大虾 阅读(...) 评论(...) 编辑 收藏