CSS3動畫

移動端的開發也有這種hack，來解決可能的卡頓問題：

css-webkit-transform: translate3d(0, 0, 0);

css3動畫大體分三類：

1.變形

• transform[變形基礎]
• rotate()[旋轉]
• scale()[縮放]
• translate()[位移]
• skew()[傾斜]
• matrix()[矩陣變形]
• perspective[透視] 

說明

transform屬性能對元素對象進行變形操做，主要包括如下幾種：旋轉rotate、縮放scale、移動translate、傾斜skew以及矩陣變形matrix。

取值

none:表示不進行變換；

<transform-function>:表示一個或多個變換函數，以空格分開，所以能夠同時對一個元素進行transform的多種屬性操做。

• 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):透視

示例：transform:rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);

實例代碼:

css

1. .demo_rotate{
   
2.     -webkit-transition:1s ease all;
   
3.     -moz-transition:1s ease all;
   
4.     padding:10px;
   
5.     margin:90px auto;
   
6. }
   
7. .demo_rotate:hover{
   
8.     -webkit-transform:rotate(360deg) scale(1.2,1.2);
   
9.     -moz-transform:rotate(360deg) scale(1.2,1.2);
   
10.     background:#ff9900;
    
11. }

  HTML

  
  
  
  

   
   
   
   
<div class="demo_box demo_rotate">鼠標通過變大1.2倍、旋轉360度並改變背景色。</div>           
  
  
  
  

效果預覽： http://runjs.cn/code/tom5me9d

2.過渡

• transition-property[過渡的CSS屬性]
• transition-duration[過渡時間]
• transition-delay[延遲時間]
• transition-timing-function[過渡效果]

transform呈現的是一種變形結果，而Transation呈現的是一種過渡，通俗點說就是一種動畫轉換過程，如漸顯、漸弱、動畫快慢等。transition和transform是兩種不一樣的動畫模型。http://www.w3.org/TR/css3-transitions/

transition能夠和Transform同時使用。

transition是一個複合屬性，能夠同時定義transition-property、transition-duration、transition-timing-function、transition-delay子屬性值。

實例代碼

CSS

      
      
      
      

       
       
       
       
.transition_property_1{

       
       
       
       
    -webkit-transition:0.5s ease;

       
       
       
       
    -moz-transition:0.5s ease;

       
       
       
       
    -webkit-transition-property:all;

       
       
       
       
    -moz-transition-property:all;

       
       
       
       
    position:absolute;

       
       
       
       
    left:10px;

       
       
       
       
    top:50px;

       
       
       
       
}

       
       
       
       
.transition_property_2{

       
       
       
       
    -webkit-transition:0.5s ease;

       
       
       
       
    -moz-transition:0.5s ease;

       
       
       
       
    -webkit-transition-property:none;

       
       
       
       
    -moz-transition-property:none;

       
       
       
       
    position:absolute;

       
       
       
       
    left:250px;

       
       
       
       
    top:50px;

       
       
       
       
}

       
       
       
       
.transition_property_3{

       
       
       
       
    -webkit-transition:0.5s ease;

       
       
       
       
    -moz-transition:0.5s ease;

       
       
       
       
    -webkit-transition-property:width;

       
       
       
       
    -moz-transition-property:width;

       
       
       
       
    position:absolute;

       
       
       
       
    left:480px;

       
       
       
       
    top:50px;

       
       
       
       
}

       
       
       
       


       
       
       
       
.transition_property_1:hover,

       
       
       
       
.transition_property_2:hover,

       
       
       
       
.transition_property_3:hover{

       
       
       
       
    width:500px;

       
       
       
       
    height:300px;

       
       
       
       
}
      
      
      
      

     
     
     
     

      
      
      
      

      
      
      
      

      
      
      
      

     
     
     
     
<div class="demo_box transition_property_1">變換全部的屬性</div><div class="demo_box transition_property_2">不變換任何屬性</div><div class="demo_box transition_property_3">只變換寬度屬性</div> 

效果預覽：http://runjs.cn/detail/s3k5rfg0

3.動畫

• animation-name[動畫名稱]
• animation-duration[動畫時間]
• animation-timing-function[播放方式]
• animation-delay[開始播放時間]
• animation-iteration-count[播放次數]
• animation-direction[播放方向]
• animation-fill-mode[播放後的狀態]
• animation-play-state[對象動畫的狀態]

說明

檢索或設置對象所應用的動畫名稱，必須與規則@keyframes配合使用，由於動畫名稱由@keyframes定義 若是提供多個屬性值，以逗號進行分隔。

如何開始進行動畫

@keyframes至關於一個命名空間，後面跟一個名詞，若是在class中的animation-name定義了與之對應的name，那麼就能夠執行動畫了。定義動畫時，簡單的動畫能夠直接使用關鍵字from和to，即從一種狀態過渡到另外一種狀態：如：

@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}

複雜動畫：

@-webkit-keyframes demo{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

這裏面的百分百有點像flash裏幀的概念。表示設置某個時間段內任意時間點的樣式。    

實例代碼

CSS

       
       
       
       

        
        
        
        
.animation_name{

        
        
        
        
    left:0;

        
        
        
        
    top:100px;

        
        
        
        
    position:absolute;

        
        
        
        
    -webkit-animation:0.5s 0.5s ease infinite alternate;

        
        
        
        
    -webkit-animation-name:demo;

        
        
        
        
    -moz-animation:0.5s 0.5s ease infinite alternate;

        
        
        
        
    -moz-animation-name:demo;

        
        
        
        
}

        
        
        
        
@-webkit-keyframes demo{

        
        
        
        
    0%{left:0;}

        
        
        
        
    100%{left:400px;}

        
        
        
        
} 

       
       
       
       

HTML

       
       
       
       

        
        
        
        
<div class="demo_box animation_name">看我沒事來回跑</div>                     
       
       
       
       

預覽下效果：http://runjs.cn/code/uajpxech

關聯屬性

• transform-origin[變形原點]
• perspective-origin[透視原點]
• backface-visibility[隱藏內容的背面]
• transform-style[3D呈現]

說明

transform的參照點默認爲元素的中心點，若是要改變這個參照點，能夠是用transform-origin屬性進行自定義。

受影響變形函數：rotate()。

      
      
      
      

       
       
       
       
.origin_1{

       
       
       
       
    -webkit-transform-origin:center center;

       
       
       
       
    -moz-transform-origin:center center;

       
       
       
       
    -webkit-transition:0.5s ease all;

       
       
       
       
    -moz-transition:0.5s ease all;

       
       
       
       
    position:absolute;

       
       
       
       
    left:10px;

       
       
       
       
    top:50px;

       
       
       
       
}

       
       
       
       
.origin_2{

       
       
       
       
    -webkit-transform-origin:left top;

       
       
       
       
    -moz-transform-origin:left top;

       
       
       
       
    -webkit-transition:0.5s ease all;

       
       
       
       
    -moz-transition:0.5s ease all;

       
       
       
       
    position:absolute;

       
       
       
       
    left:250px;

       
       
       
       
    top:50px;

       
       
       
       
}

       
       
       
       
.origin_3{

       
       
       
       
    -webkit-transform-origin:100% 100%;

       
       
       
       
    -moz-transform-origin:100% 100%;

       
       
       
       
    -webkit-transition:0.5s ease all;

       
       
       
       
    -moz-transition:0.5s ease all;

       
       
       
       
    position:absolute;

       
       
       
       
    left:480px;

       
       
       
       
    top:50px;

       
       
       
       
}

       
       
       
       
.origin_4{

       
       
       
       
    -webkit-transform-origin:20px 60px;

       
       
       
       
    -moz-transform-origin:20px 60px;

       
       
       
       
    -webkit-transition:0.5s ease all;

       
       
       
       
    -moz-transition:0.5s ease all;

       
       
       
       
    position:absolute;

       
       
       
       
    left:250px;

       
       
       
       
    top:160px;

       
       
       
       
}

       
       
       
       
.origin_1:hover,

       
       
       
       
.origin_2:hover,

       
       
       
       
.origin_3:hover,

       
       
       
       
.origin_4:hover{

       
       
       
       
    -webkit-transform:rotate(45deg);

       
       
       
       
    -moz-transform:rotate(45deg);

       
       
       
       
}                        

      
      
      
      

HTML

      
      
      
      

       
       
       
       
<div class="demo_box origin_1">在中心點旋轉45度</div>

       
       
       
       
<div class="demo_box origin_2">在左上角旋轉45度</div>

       
       
       
       
<div class="demo_box origin_3">用百分百值來來設置旋轉點旋轉45度</div>

       
       
       
       
<div class="demo_box origin_4">用長度值來設置旋轉點旋轉45度</div>                        
      
      
      
      

預覽效果： http://runjs.cn/detail/alucwsnd

null