刚开始W3C CSS Workgroup拒绝将CSS3
transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现。所以请大家明白,特别是Web前端开发员,用CSS3做一些过渡效果和动画,并不比运用JS脚本实现要好(个人认为:用CSS只不过让不懂JS的人员(设计人员)也能做动画,而且使用浏览器封装好的方法,但使用JS脚本可以更灵活,在性能上也能去优化)。

css3动画兼容性(@keyframes):
        IE10+,Firefox,Opera    支持@keyframes 规则
        Chrome Safari           需要前缀 -webkit-@keyframes

1.Transition

        注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe
规则或 animation 属性。

Transition是一种直观上的效果,让DOM元素的某个属性在固定时间内从一旧值到一新值。目前Firefox、Opera、Safari和Chrome都支持transition
,IE还不支持。

         创建动画
         1 @keytframes 动画选择器 (定义动画的过程
                        1 from{}tp{} 表示:0%{}100%{}
                        2 指定变化过程  0%{}20%{}40%{}80%{}100%{}
                    )

语法:transition: property duration timing-function delay;

         2 动画选择器 (
                必选项:
                 规定动画的名称
                 规定动画的时长 默认时长是0 不设置的话 不会有动画

说明:

         )

Value

Description

transition-property

指定要改变CSS属性的名称

transition-duration

指定过渡效果要花多少时间(s/ms)

transition-timing-function

指定过渡效果的速度

transition-delay

定义过渡效果的延迟时间.

        css3 所有动画属性
        @keyframes     规定动画。     3
        animation     所有动画属性的简写属性,除了 animation-play-state
属性。     3
        animation-name     规定 @keyframes 动画的名称。     3
        animation-duration   
 规定动画完成一个周期所花费的秒或毫秒。默认是 0。     3
        animation-timing-function     规定动画的速度曲线。默认是
“ease”。     3
        属性说明:
        animation-timing-function 使用名为三次贝塞尔(Cubic
Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:

实例:

        linear     动画从头到尾的速度是相同的。
        ease   
 默认。动画以低速开始,然后加快,在结束前变慢。(缓冲运动)
        ease-in     动画以低速开始。
        ease-out     动画以低速结束。
        ease-in-out     动画以低速开始和结束。
        cubic-bezier(n,n,n,n)     在 cubic-bezier
函数中自己的值。可能的值是从 0 到 1 的数值。

<style type="text/css">   div  {  width:100px;  height:100px;  background:red;  transition:width 2s;  -moz-transition:width 2s; /* Firefox 4 */  -webkit-transition:width 2s; /* Safari and Chrome */  -o-transition:width 2s; /* Opera */  }    div:hover  {  width:300px;  }  </style>  <div></div>

        animation-delay     规定动画何时开始。默认是 0。     3
        animation-iteration-count     规定动画被播放的次数。默认是 1。
    3
        animation-direction     规定动画是否在下一周期逆向地播放。默认是
“normal”。     3
        animation-play-state     规定动画是否正在运行或暂停。默认是
“running”。     3
        animation-fill-mode     规定对象动画时间之外的状态。

  1. Animation

        ==================================
       
根据以上的介绍css3依然无法完成令人满意的效果,css3的动画还包括一些高级特性
        变形   IE 10+     Firefox 3.5+     Opera 11.50+     Safari 10+
    Chrome 2.0+
        1  transform(基本的变形 需要指定过渡方式)
           transform: none |
<transform-function>[<transform-function>]*
           取值:
           none:表示不进行变换;
          
<transform-function>:表示一个或多个变换函数,以空格分开,因此可以同时对一个元素进行transform的多种属性操作。

CSS动画(Animations)简单说就是在一段固定的动画时间内暗中在某一频率内改变其CSS某个或某些值,从而达到视觉上的转换动画效果。Animations的很多方面都是可以控制的,包括动画运行时间,开始值和结束值,还有动画的暂停和延迟其开始时间等。

            1.rotate(<angle>):旋转元素
            2.scale(<number>[, <number>]):缩放元素
            3.translate(<translation-value>[,
<translation-value>]):移动元素
            4.skew(<angle> [,<angle>]):倾斜元素
           
5.matrix(<number>,<number>,<number>,<number>,<number>,<number>):矩阵变形
            6.perspective(length):透视

目前支持Animation的浏览器有:Firefox、 Safari 和
Chrome,IE和Opera还不支持。下面看下一个简单的实例:

      2 过渡  transition
        Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition
属性。
        Safari 支持替代的 -webkit-transition 属性。
必发88官网,        transition: property duration timing-function delay;
         -webkit-transition:property duration timing-function delay;
        property:规定设置过渡效果的 CSS 属性的名称。
        duration:规定完成过渡效果需要多少秒或毫秒
        timing-function:规定速度效果的速度曲线。
        delay:定义过渡效果何时开始。

<style type="text/css">   div  {  width:100px;  height:100px;  background:red;  position:relative;  animation:mymove 5s infinite;  -moz-animation:mymove 5s infinite; /*Firefox*/  -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/  }  @keyframes mymove  {  from {left:0px;}  to {left:200px;}  }  @-moz-keyframes mymove /*Firefox*/  {  from {left:0px;}  to {left:200px;}  }

@-webkit-keyframes mymove /*Safari and Chrome*/  {  from {left:0px;}  to {left:200px;}  }  </style>  <div></div>

    上面说了那么多,那么问题来了。transition 和 animation
之间是什么关系?
    感觉两个重合了,
    transition属性是一个简单的动画属性,非常简单非常容易用。
   
可以说它是animation的简化版本,是给普通做简单网页特效用的。animation可以做更加精细的动画:

语法:animation: name duration timing-function delay iteration-count
direction
;

   给元素加上动画样式
他会执行动画,但不会监听样式属性,也就是某一个样式属性改变时不会触发动画

说明:

   给元素加上transtion样式时  
会监听指定的样式属性,当属性改变的时候会触发过度效果

Value

Description

animation-name

指定动画帧的名称

animation-duration

指定动画运行的时间:秒(s)和毫秒(ms)

animation-timing-function

指定动画运行的速度

animation-delay

指定动画的延迟时间

animation-iteration-count

指定动画的重复数

animation-direction

指定动画是否以相反的方向运行动画

 
transform只是静态的变化,不涉及动画。只有添加了变形的过渡属性监听,才会有动画

接下来和大家分享一个webkit.org上面的一个DEMO,此DEMO利用Transform和Animation,加少量Javascript做成的3D动画效果,有兴趣的同学可去参考以下网址:

<!DOCTYPE html> <html> <head> <meta http-equiv="CONTENT-TYPE" content="text/html;charset=utf-8"> <title>css3动画效果</title> <script src="../config/js/jquery.js"></script> <style>      @keyframes myfirst     {         from {background: red;}         to {background: yellow;}     }      @-moz-keyframes myfirst /* Firefox */     {         from {background: red;}         to {background: yellow;}     }      @-webkit-keyframes myfirst /* Safari 和 Chrome */     {         from {background: red;}         to {background: yellow;}     }      @-o-keyframes myfirst /* Opera */     {         from {background: red;}         to {background: yellow;}     }      /*基本的动画*/     #div1     {          /*定义动画的名称*/         animation-name: myfirst;         -webkit-animation-name: myfirst;         -moz-animation-name: myfirst;         -ms-animation-name: myfirst;         /*动画时长*/         animation-duration: 5s;         -webkit-animation-duration: 5s;         -moz-animation-duration: 5s;         -ms-animation-duration: 5ms;         /*速度曲线函数:速度曲线用于使变化更为平滑*/         animation-timing-function:linear;         -webkit-animation-timing-function:linear;          /*动画延时*/         animation-delay:2s;         -webkit-animation-delay:2s; /* Safari 和 Chrome */          /*动画的循环次数*/         animation-iteration-count:infinite;         -webkit-animation-iteration-count:infinite; /* Safari 和 Chrome */      }     .demo_rotate{         -webkit-transition:1s ease all;         -moz-transition:1s ease all;         padding:10px;         margin:90px auto;         background: #f00;     }     .demo_rotate:hover{         -webkit-transform:rotate(360deg) scale(1.2,1.2);         -moz-transform:rotate(360deg) scale(1.2,1.2);         background:#ff9900;     }     /*         测试移动动画     */         /*          transition          */     .a-auto-3{         transition:all 0.8s ease-in-out;         -moz-transition:all 0.8s ease-in-out;         -ms-transition:all 0.8s ease-in-out;         -webkit-transition:all 0.8s ease-in-out;     }     .a-element-13{left:1998px; top:0px; opacity:0; z-index:1;}     .a-element-13-a{left:350px; top:0px; opacity:1; }     .a-element{ position:absolute; display:block;}    </style> </head>  <body>        <div id="div1" style="width: 100px;height: 100px;"></div>      <!--      <div class="demo_rotate" style="width: 100px;height: 100px;"></div>      -->     <img src="img-15.jpg" class="a-element a-element-13 a-auto-3 " > <script>     $(function(){         $(".a-element").addClass("a-element-13-a");      })  </script>  </body>  </html> 

版权声明:本文为博主原创文章,未经博主允许不得转载。


相关文章