動畫animation · web前端

[TOC] # 簡介動畫是CSS3中具有顛覆性的特征之一，可通過設置多個節點來精確控制一個或一組動畫，常用來實現復雜的動畫效果。語法格式： ~~~ animation:動畫名稱動畫時間運動曲線何時開始播放次數是否反方向; ~~~ ![](https://img.kancloud.cn/e0/a9/e0a9c0827e5ddab9ac8dd17490da1bfd_861x454.png) 關于幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意r ~~~ @keyframes 動畫名稱 { from{ 開始位置 } 0% to{ 結束 } 100% } ~~~ ~~~ animation-iteration-count:infinite; 無限循環播放 animation-play-state:paused; 暫停動畫" ~~~ # 體驗動畫 ~~~ <style> div { width: 100px; height: 100px; background-color: pink; animation: go 2s ease 0s infinite alternate; /*引用動畫*/ /*animation:動畫名稱動畫時間運動曲線何時開始播放次數是否反方向;*/ /*動畫名稱是自己定義的 go google*/ /*infinite 無限循環*/ /*一般情況下，我們就用前2個 animation: go 2s*/ } /*@keyframes go {} 定義動畫*/ @keyframes go { from { transform: translateX(0) } to { transform: translateX(600px) } } </style> <body> <div></div> </body> ~~~ # 多組動畫 ~~~ <style> div { width: 100px; height: 100px; background-color: pink; /*animation: go 2s ease 0s infinite alternate; 引用動畫*/ animation: go 2s infinite; /*引用動畫*/ /*animation:動畫名稱動畫時間運動曲線何時開始播放次數是否反方向;*/ /*動畫名稱是自己定義的 go google*/ /*infinite 無限循環*/ /*一般情況下，我們就用前2個 animation: go 2s*/ } /*@keyframes go {} 定義動畫*/ @keyframes go { 0% { /*起始位置，等價于 form*/ transform: translate3d(0, 0, 0) ; } 25% { transform: translate3d(800px, 0, 0); } 50% { transform: translate3d(800px, 400px, 0); } 75% { transform: translate3d(0, 400px, 0); } 100% { transform: translate3d(0, 0, 0); /*100% 相當于結束位置 to*/ } } /* 動畫結束之后會返回原來的位置！！！*/ </style> <div></div> ~~~ # 汽車翻轉 ~~~ <style> img { /*animation:動畫名稱動畫時間運動曲線何時開始播放次數是否反方向;*/ animation: car 5s infinite; /*引用動畫*/ } /*定義動畫*/ @keyframes car { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(1000px, 0, 0); } 51% { transform: translate3d(1000px, 0, 0) rotateY(180deg); /*如果多組變形都屬于 tarnsform 我們用空格隔開就好了*/ } 99% { transform: translate3d(0, 0, 0) rotateY(180deg); /*如果多組變形都屬于 tarnsform 我們用空格隔開就好了*/ } } </style> <img src="images/car.jpg" width="100" alt=""/> ~~~ # 無縫滾動圖片, 冗余, 橫著放 ![](https://img.kancloud.cn/29/e6/29e6e36f9b3685525ae8bc945b6fd1f2_833x165.png) ~~~ <style> * { margin: 0; padding:0; } ul { list-style: none; } nav { width: 882px; height: 86px; border: 1px solid pink; margin: 100px auto; overflow: hidden; } nav li { float: left; } nav ul { width: 200%; animation: moving 5s linear infinite; /*引用動畫*/ /*linear 勻速動畫*/ } /*定義動畫*/ @keyframes moving { form { transform: translateX(0); } to { transform: translateX(-882px); } } nav:hover ul { /*鼠標經過nav 里面的ul 就暫停動畫*/ animation-play-state:paused; /*鼠標經過暫停動畫*/ } </style> <nav> <ul> <li><img src="images/nav1.jpg" alt=""/></li> <li><img src="images/nav2.jpg" alt=""/></li> <li><img src="images/nav3.jpg" alt=""/></li> <li><img src="images/nav4.jpg" alt=""/></li> <li><img src="images/nav5.jpg" alt=""/></li> <li><img src="images/nav6.jpg" alt=""/></li> <li><img src="images/nav7.jpg" alt=""/></li> <li><img src="images/nav1.jpg" alt=""/></li> <li><img src="images/nav2.jpg" alt=""/></li> <li><img src="images/nav3.jpg" alt=""/></li> <li><img src="images/nav4.jpg" alt=""/></li> <li><img src="images/nav5.jpg" alt=""/></li> <li><img src="images/nav6.jpg" alt=""/></li> <li><img src="images/nav7.jpg" alt=""/></li> </ul> </nav> ~~~