DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> css3動畫效果小結(推薦)
css3動畫效果小結(推薦)
編輯：關於CSS     

css3的動畫功能有以下三種:

1、transition(過度屬性)
2、animation(動畫屬性)
3、transform(2D/3D轉換屬性)

下面逐一進行介紹我的理解：

1、transition:<過渡屬性名稱> <過渡時間> <過渡模式>

如-webkit-transition:color 1s;

等同於:

-webkit-transition-property:color;

-webkit-transition-duration:1s;

多個屬性的過渡效果可以這樣寫：

方法1：-webkit-transition:<屬性1> <時間1> ,<屬性2> <時間2> ,。。。

方法2：

-webkit-transition:<屬性1> <時間1>;

-webkit-transition:<屬性2> <時間2>;

 

transition-timing-function屬性值有5個:

ease:緩慢開始，緩慢結束

liner:勻速

ease-in:緩慢開始

ease-out:緩慢結束

ease-in-out:緩慢開始，緩慢結束（和ease稍有區別）

實例：
transition過渡效果

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>transition過渡效果</title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         #box{   
  12.             width: 200px;   
  13.             height: 200px;   
  14.             background-color: chocolate;   
  15.             position: relative;   
  16.             left: 0px;   
  17.             top: 0px;   
  18.             transition: top 5s ease,left 5s ease ;   
  19.             -moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */   
  20.             -webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */   
  21.             -o-transition: top 5s ease,left 5s ease ; /* Opera */   
  22.         }   
  23.         .btn{   
  24.             width: 512px;   
  25.             margin: 0 auto;   
  26.             border: 2px solid #e3e3e3;   
  27.             border-radius: 5px;   
  28.             padding: 10px;   
  29.   
  30.         }   
  31.         .btn button{   
  32.             width: 80px;   
  33.             height: 40px;   
  34.             text-align: center;   
  35.             line-height: 40px;   
  36.             margin-right: 20px;   
  37.         }   
  38.         button:last-child{   
  39.             margin-right: 0px;   
  40.         }   
  41.     </style>  
  42.     <script>  
  43.         window.onload=function(){   
  44.             var e1 = document.getElementById("e1");   
  45.             var e2 = document.getElementById("e2");   
  46.             var e3 = document.getElementById("e3");   
  47.             var e4 = document.getElementById("e4");   
  48.             var e5 = document.getElementById("e5");   
  49.             var box = document.getElementById("box");   
  50.             e1.onclick=function(){   
  51.                 box.style.left = 1000+"px";   
  52.                 box.style.top = 100+"px";   
  53.                 box.style.transitionTimingFunction="ease";   
  54.             };   
  55.             e2.onclick=function(){   
  56.                 box.style.right = 0+"px";   
  57.                 box.style.top = 0+"px";   
  58.                 box.style.transitionTimingFunction="liner";   
  59.             };   
  60.             e3.onclick=function(){   
  61.                 box.style.right = 1000+"px";   
  62.                 box.style.top = 100+"px";   
  63.                 box.style.transitionTimingFunction="ease-in";   
  64.             };   
  65.             e4.onclick=function(){   
  66.                 box.style.left = 0+"px";   
  67.                 box.style.top = 0+"px";   
  68.                 box.style.transitionTimingFunction="ease-out";   
  69.             };   
  70.             e5.onclick=function(){   
  71.                 box.style.left = 1000+"px";   
  72.                 box.style.top = 100+"px";   
  73.                 box.style.transitionTimingFunction="ease-in-out";   
  74.             };   
  75.   
  76.         }   
  77.     </script>  
  78. </head>  
  79. <body>  
  80.     <div id="box"></div>  
  81.     <br>  
  82.     <br>  
  83.     <br>  
  84.     <br>  
  85.     <br>  
  86.     <br>  
  87.     <hr>  
  88.     <br>  
  89.     <br>  
  90.     <br>  
  91.     <div class="btn">  
  92.         <button id="e1">ease</button>  
  93.         <button id="e2">liner</button>  
  94.         <button id="e3">ease-in</button>  
  95.         <button id="e4">ease-out</button>  
  96.         <button id="e5">ease-in-out</button>  
  97.     </div>  
  98. </body>  
  99. </html>  

2、動畫屬性animation

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

值

描述

animation-name

規定需要綁定到選擇器的 keyframe 名稱。。

animation-duration

規定完成動畫所花費的時間，以秒或毫秒計。

animation-timing-function

規定動畫的速度曲線。

animation-delay

規定在動畫開始之前的延遲。

animation-iteration-count

規定動畫應該播放的次數。

animation-direction

規定是否應該輪流反向播放動畫。

注釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。

@keyframes animationname {keyframes-selector {css-styles;}}

值

描述

animationname

必需。定義動畫的名稱。

keyframes-selector

必需。動畫時長的百分比。

合法的值：

  • 0-100%
  • from（與 0% 相同）
  • to（與 100% 相同）

css-styles

必需。一個或多個合法的 CSS 樣式屬性。

以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。

0% 是動畫的開始時間，100% 動畫的結束時間。

例如：

CSS Code復制內容到剪貼板
  1. 　　animation:mymove 5s infinite;   
  2.   
  3. 　　@keyframes mymove{   
  4.   
  5. 　　　　from{ top:0px; }   
  6.   
  7. 　　　　to{ top:200px; }   
  8.   
  9. 　　}  

還可以這麼寫：

CSS Code復制內容到剪貼板
  1. 　　@keyframes mymove{   
  2.   
  3. 　　　　0%{ top:0px; }   
  4.   
  5. 　　　　25%{ top:200px; }   
  6.   
  7. 　　　　50%{ top:100px; }   
  8.   
  9. 　　　　75%{ top:200px; }   
  10.   
  11. 　　　　100%{ top:0px; }   
  12.   
  13. 　　}   

 案例：
css3的animation效果

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>    
  5. div   
  6. {   
  7. width:100px;   
  8. height:100px;   
  9. background:red;   
  10. position:relative;   
  11. animation:mymove 5s infinite;   
  12. -moz-animation:mymove 5s infinite; /* Firefox */   
  13. -webkit-animation:mymove 5s infinite; /* Safari and Chrome */   
  14. -o-animation:mymove 5s infinite; /* Opera */   
  15. }   
  16.   
  17. @keyframes mymove   
  18. {   
  19. from {top:0px;}   
  20. to {top:200px;}   
  21. }   
  22.   
  23. @-moz-keyframes mymove /* Firefox */   
  24. {   
  25. from {top:0px;}   
  26. to {top:200px;}   
  27. }   
  28.   
  29. @-webkit-keyframes mymove /* Safari and Chrome */   
  30. {   
  31. from {top:0px;}   
  32. to {top:200px;}   
  33. }   
  34.   
  35. @-o-keyframes mymove /* Opera */   
  36. {   
  37. from {top:0px;}   
  38. to {top:200px;}   
  39. }   
  40. </style>  
  41. </head>  
  42. <body>  
  43.   
  44. <p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>  
  45.   
  46. <div></div>  
  47.   
  48. </body>  
  49. </html>  

3、設置3D場景（即transform）

-webkit-perspective:800;(單位為像素)--即三維物體距離屏幕的距離。

-webkit-perspective-origin:50% 50%;(這個屬性代表了人眼觀察的視野。50% 50%為X軸、Y軸相應的位置，即屏幕的正中央。)

 　　

使用transform屬性調整元素：-webkit-transform-style:-webkit-perserve-3d;(這個屬性是告訴浏覽器我們是在一個三維空間中對元素進行操作)

(1)、translate(移動距離)

　　　　translateX（x px）

　　　　translateY（y px）

　　　　translateZ（z px）

(2)、rotate(旋轉角度)

　　　　rotateX(x deg)

　　　　rotateY(y deg)

　　　　rotateZ(z deg)

 　　

transform：rotate（45deg）

rotateX:向屏幕上邊沿向內旋轉為正方向。

rotateY:向屏幕豎直向下為正方向。

rotateZ:向屏幕外為正方向。

一個div塊，右邊沿向屏幕內旋轉45deg,即應設置為：Transform：rotateY（45deg）。

實例：

transform3D轉換效果

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>transform3D轉換效果</title>  
  6.     <style>  
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         #box{   
  12.             width: 200px;   
  13.             height: 200px;   
  14.             background-color: chocolate;   
  15.             position: relative;   
  16.             left: 0px;   
  17.             top: 0px;   
  18.             perspective:800px;   
  19.             perspective-origin:50% 50%;   
  20.             transform-style: preserve-3d;   
  21.             transform-origin:0% 100%;//以Y軸為旋轉中心   
  22.         }   
  23.         p{   
  24.             margin:20px 520px;   
  25.         }   
  26.         .btn{   
  27.             width: 300px;   
  28.             margin: 0 auto;   
  29.             border: 2px solid #e3e3e3;   
  30.             border-radius: 5px;   
  31.             padding: 10px;   
  32.   
  33.         }   
  34.         .btn button{   
  35.             width: 80px;   
  36.             height: 40px;   
  37.             text-align: center;   
  38.             line-height: 40px;   
  39.             margin-right: 20px;   
  40.         }   
  41.         button:last-child{   
  42.             margin-right: 0px;   
  43.         }   
  44.     </style>  
  45.     <script>  
  46.         window.onload=function(){   
  47.             var tx = document.getElementById("tx");   
  48.             var ty = document.getElementById("ty");   
  49.             var tz = document.getElementById("tz");   
  50.             var rx = document.getElementById("rx");   
  51.             var ry = document.getElementById("ry");   
  52.             var rz = document.getElementById("rz");   
  53.             var box = document.getElementById("box");   
  54.             tx.onclick=function(){   
  55.                 box.style.transform = "translateX(500px)";   
  56.             };   
  57.             ty.onclick=function(){   
  58.                 box.style.transform = "translateY(400px)"  
  59.             };   
  60.             rx.onclick=function(){   
  61.                 box.style.transform = "rotateX(30deg)"  
  62.             };   
  63.             ry.onclick=function(){   
  64.                 box.style.transform = "rotateY(30deg)"  
  65.             };   
  66.             rz.onclick=function(){   
  67.                 box.style.transform = "rotateZ(30deg)"  
  68.             };   
  69.         }   
  70.     </script>  
  71. </head>  
  72. <body>  
  73.     <div id="box"></div>  
  74.     <br>  
  75.     <br>  
  76.     <br>  
  77.     <br>  
  78.     <br>  
  79.     <br>  
  80.     <hr>  
  81.     <br>  
  82.     <br>  
  83.     <br>  
  84.     <p>translate(移動距離)</p>  
  85.     <div class="btn">  
  86.         <button id="tx">translateX</button>  
  87.         <button id="ty">translateY</button>  
  88.     </div>  
  89.     <p>rotate(旋轉角度)</p>  
  90.     <div class="btn">  
  91.         <button id="rx">rotateX</button>  
  92.         <button id="ry">rotateY</button>  
  93.         <button id="rz">rotateZ</button>  
  94.     </div>  
  95. </body>  
  96. </html>  

使用transform-origin屬性調整旋轉中心。默認旋轉中心點為div盒子的正中心。

這個旋轉中心是可以改變的：

　　　　X軸：left、center、right.

　　　　Y軸：top、center、bottom.

　　　　Z軸：length px(一個長度值)。

以上這篇css3動畫效果小結(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/gaotenglong/archive/2016/07/24/5700997.html

關於CSS
CSS布局入門
CSS布局與傳統表格(table)布局最大的區別在於：原來的定位都是采用表格，通過表格的間距或者用無
div中class與id的區別及應用
class是設置標簽的類。 id是設置標簽的標識。 class屬性用於指定元素屬於何種樣式
WEB標准布局的Div + CSS 高度自適應解決方法
自適應高度的問題，采用 Div + CSS 進行三列或二列布局時，事先不知道具體高度，只能根據內容的

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
css position 設置元素的定位方式詳解 FireFox浏覽器和IE浏覽器下CSS的兼容問題 css實現圖片在div中居中的效果 CSS3制作hover下劃線動畫 用CSS打造韓式風格網站 CSS中margin邊界疊加問題及解決方案 利用css繪制三角形的方法及拓展 CSS常用技巧匯總 5個CSS書寫技巧 CSS＋DIV制作網頁時易犯的錯誤總結
熱門推薦
META標簽的奧妙 CSS設計網頁頭部的寫法 CSS3 仿微信聊天小氣泡實例代碼 css 背景固定樣式background-attachment屬性基礎 CSS常用信息速查手冊 IE6下兼容性常見的幾個問題與解決方法 元素絕對定位以後設置了高寬,a標簽不能點擊的原因及解決方法 全面了解css 屬性選擇器 深入解析動態加載css的實現方法
大家都在看
從jQuery.camelCase()學習string.replace() 函數學習 Schema中定義空元素 jQuery實現防止提交按鈕被雙擊的方法 多角色選項卡登錄效果 HTML 5草案並沒有成為正式標准 使用 JavaScript 實現 XMLHttpRequest,在IE,FireFox 上測試通過！ 使用requestAnimationFrame實現js動畫性能好 JS模擬並美化的表單控件完整實例
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved