CSS动画详解

CSS动画

功能：
    css3中动画分为Animations功能和transitions功能
    这两个功能都可以通过改变css中的属性值来产生动画效果
    
 1.Animations功能支持通过关键帧，指定来产生更复杂的页面动画效果
 2.transitions功能支持一个属性值平滑的国度到另一个属性值
   

transitions功能

语法：
    tranisitions:property   duration timing-function  delay;
    property:表示要对那个属性进行操作
    duration：表示在多久的时间内完成属性值的平滑过渡
    timing-function：用何种方式来平滑过渡
    delay：表示延迟多长的时间开始特效
    
    定义过渡的属性：
       tranisition-property:属性用来定义转换动画属性的css属性名称
         如：   background-color属性，
         
       语法：
         tranisition-property：none|all|[IDENT][','<IDENT>]*;
          tranisition-property:
             属性的初始值为all；适用于所有的元素以及before和after伪元素
             
             none:表示没有元素
             all:表示针对所有的元素
             ident:指定css属性列表
     定义过渡的时间：
        transition-duration:
           该属性用来定义转换动画的时间长度
           即，设置旧属性换到新属性所花费的时间，单位为秒
           
      语法：
         transition-property:<time>[,<time>]*;
         transition-duration:的初始化值为0，适用于所有的元素以及before和after伪元素
         默认的动画过渡时间为0秒
         所以在指定元素动画时，看不到过程，直接看到结果
         
         
    定义过渡延迟的时间
           语法和定义过渡时间一致
      注意：
          设置时间可以为正整数、负整数、0，
          非零时，必须设置时间单位为s或者ms
          负数时：过渡的动作会从该时间点开始显示，之前的动作被截断
           整数数：过渡的动作会延迟触发<time>[,<time>]*;
           
      定义过渡的效果：
          transition-timing-function属性:用来定义过渡动画的效果
         起始值为ease,使用与所有元素
          说明：取值的特性
            ease:缓解效果
            linear：线型效果
            ease-in:渐显效果
            ease-out：渐隐效果
            ease-in-out:渐显渐隐效果
            cubic-bezier:特殊的立方贝塞尔曲线效果
         
         注意：
            浏览器的支持
               ff4.0  opera10,safari3.1   chrome8   IE11以上版本
     

Animations功能及使用用法

1.概述：
   我们在使用transitions实现动画的时候只能指定要改变的属性的开始值和结束值，在两个值之间进行平滑的过渡的方式来实现动画的效果，因此不能实现较为复杂的动画
   
   而animations功能通过定义多个关键帧以及定义每一个关键帧中的元素的属性值来实现更为复杂的动画效果
   
   创建关键帧集合的方式：
     1.@keyframe   关键帧的集合名（创建关键帧的代码）
       如：
          40%{
          本关键帧的样式代码
          }
注意：
   浏览器的支持：
      ff20以上，opera18以上，Safari4以上，Chrome2，IE11以上都可以
      
定义动画的名称：
    语法：
       animation-name:none|IDENT[,none|IDENT]*;
       
    animation-name属性的初始值：none，使用与所有的块状元素和内联元素
      animation-name属性定义了一个使用的动画列表，每一个名字都可以用来选择动画关键帧，提供动画属性值
      注意：
        这个名字不符合任何一个定义的关键帧，那么该动画不执行
        此外，如果动画的名称为none，那么同样没有动画，该属性可以用于覆盖任何动画
        
定义动画的时间：
   语法：
      animation-duration:<time>[,<time>]*;
       animation-duration属性值初始化值为0；使用与所有的块状元素和内联元素
       该属性可以定义动画循环的时间，在默认的情况下为0，意味着没有动画，如果为负值同样没有动画
       
  定义动画的播放方式：
      语法：
          animation-timing-function:none|IDENT[,none|IDENT]*;
           animation-timing-function属性的取值：
               可以参考transition-timing-function的取值
   定义动画的延时时间：
      语法：
         animation-delay：<time>[,<time>]*;
          animation-delay:属性的初始化值为0，
          该属性可以定义动画的开始时间，允许一个动画开始执行一段时间后才被应用，当动画的延时时间为0时，意味着动画立即执行，否则一定要指定动画的延时执行时间
          
     定义动画的播放次数：
       语法：
        manimation-iteration-count:infinite|<number>[,infinte|<number>]*;
        manimation-iteration-count属性的起始值为1，适用于所有的块状元素和内联元素
        该属性可以定义动画的执行次数，默认为1，
        如果取值为非整数，将导致动画结束一个周期的一部分
        如果取值为负数：将导致在交替周期内反向播放动画
        
    定义动画播放的方向：
       语法：
       animation-direction:normal:reverse|alternate[,normal|alternate]* alternate-reverse;
        animation-direction属性值默认为normal，适用于所有的块状元素和内联元素
        该属性定义动画播放的方向，取值包括两个：
           1.默认为normal ：动画的每一次循环都向前播放
           2.alternate：表示第偶数次向前播放，第数次向反向播放动画
           
     设置动画结束后的状态：
       animation-fill-mode:
       none:默认值，不设置动画之外的状态，DOM未进行动画前的状态
       forwards:设置动画状态为动画结束时的状态，100%或to时，当设置animation-direcdtion属性值为reverse时，动画结束后显示为keyframe第一帧
       backwards:设置对象状态为开始状态的动画，测试显示DOM未进行动画前的一个状态
       both:设置对象状态为动画结束或开始的状态，结束时状态优先播放。
       
       
    设置动画播放的状态、：
      animation-play-stats:running|paused
       
       
  结合书写的方式：
     animation:keyframe的名称  动画执行的时长  动画实现的方法  延时多少秒后执行动画  设置动画执行的次数  动画执行的方向
        
          
       实现动画的方法animation-timing-function的值：
          linear:在动画开始时与结束时以同样的速度进行改变
          ease-in:动画开始时速度慢，速度沿曲线值进行加速
          ease-out：动画开始时速度快，速度沿曲线值进行放慢
          
  transform：
css3  2D transform获得个主流浏览器的支持
transform实现了一些可用SVG实现的变形功能
也可以用于块级严肃和内联元素，该属性可以旋转、缩放、移动元素，
transform可以控制文字的变形，
  如：transform：rotate(30deg)  scale(2);
          
​

旋转动画

1.浏览器支持：
   safari  3.1   chrome 8   ff4.0  opera 10以上版本支持
rotate（）能够旋转指定的对象，主要在二维空间进行操作，接受一个角度的参数值，用来指定旋转的幅度
    元素对象可以是块级元素也可以是内联元素
   

缩放动画

语法：
   transform：scale(缩放的倍率)；或者transform：scale（水平缩放倍率，垂直缩放倍率）；
   参数可以是正数、负数、小数
   正数：基于宽高放大元素
   负数：不会直接缩小元素，而是翻转元素（如文字被翻转），然后在缩放元素
   小数：如：0.5可以缩小元素，第二个参数可选，若省略就和第一个参数相同
   
   scale（）目前只支持ff,safari  .chorme  opera  10.5   IE不支持
  

倾斜动画

skew():主要让元素倾斜显示，有两个参数值，参数为角度值，第二个可选，若省略，默认为0deg
skew()和旋转是不同
   rotate（）只能旋转，不会改变元素的形状
   skew()会改变严肃的形状
   
   语法：
     transform：skew(水平方向上的倾斜角度)，或者  transform：skew(水平方向上的倾斜角度，垂直方向上的倾斜角度)       

移动动画

语法：
  transform：translate(水平方向上的移动距离)或transform：translate(水平方向上的移动距离，垂直方向上的移动距离)
  参数表示坐标值，第二个参数可选，若省略为0px,
  
  目前只支持ff,safari  .chorme  opera  10.5   IE不支持
 

transform功能分类

1.指定变形的基准点：
     在使用transform方法进行文字或者图像变形时，是以元素为中心为基准点进行变形，使用transform-origin属性：可以改变变形的基准点
     
     语法：
        transform-origin：基准点在水平方向上的位置，在垂直方向上的位置
      perspective：
          该属性相对与观众产生一个3D场景，看到3d物体
          ，眼睛可以看到画布的距离
              perspective-origin为视点的位置。
                perspective：none|number
     

3D变形实现元素在x轴、Y轴、Z轴方向上的旋转、缩放、倾斜、移动变形处理

1.旋转
   语法：
      transform：rotateX(45deg);
       transform：rotateY(45deg);
        transform：rotateZ(45deg);
或者：
  transform：rotateX(45deg) rotateY(45deg) rotateZ(45deg)；
2.缩放
   语法：
     transform：scaleX（0.5） scaleY(1) scaleZ(2);
     
3.倾斜：
   语法：
      transform：skewX(45deg) skewY(45deg);和2D效果相似
      
4.移动：
    语法：
       transform：translateX(50px) translateY(50px) translateZ(50px) ;
       
       
  总结：
     1.transform：css3中的变形处理，实现文字、图像的旋转、缩放、移动等
     2.transition：通过一个属性值平滑的过渡到另一个属性值，实现动画
     3.animation:通过在样式中创建对个关键帧，实现复杂的动画