css3 實現動畫
阿新 • • 發佈：2018-12-11
CSS3，我們可以建立動畫，它可以取代許多網頁動畫影象，例如下面這個小球動畫
使用css3關鍵幀動畫可以輕鬆實現
請看下面程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>關鍵幀動畫</title> </head> <style type="text/css"> @keyframes move { 10%{ transform: translate(50px,50px)} 30%{ transform: translate(150px,150px) scale(1.5); } 50%{ transform: translate(250px,150px) scale(1); } 70%{ transform: translate(350px,250px) scale(2); } 100%{ transform: translate(0px,0px) scale(1); } } @-webkit-keyframes move { 10%{ -webkit-transform: translate(50px,50px) } 30%{ -webkit-transform: translate(150px,150px) scale(1.5) } 50%{ -webkit-transform: translate(250px,150px) scale(1) } 70%{ -webkit-transform: translate(350px,250px) scale(2) } 100%{ -webkit-transform: translate(0px,0px) scale(1)} } .box{ width: 30px; height: 30px; background-color: pink; border-radius: 50%; /* 規定 @keyframes 動畫的名稱 */ animation-name:move; -webkit-animation-name:move; -o-animation-name:move; -ms-animation-name:move; -moz-animation-name:move; /* 規定動畫完成一個週期所花費的秒 預設是 0 */ animation-duration:1s; -webkit-animation-duration:1s; -o-animation-duration:1s; -ms-animation-duration:1s; -moz-animation-duration:1s; /* 規定動畫的速度曲線。預設是 "ease" */ animation-timing-function: linear; -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; -ms-animation-timing-function: linear; -moz-animation-timing-function: linear; /* 規定動畫何時開始。預設是 0 */ animation-delay: 0; -webkit-animation-delay: 0; -o-animation-delay: 0; -ms-animation-delay: 0; -moz-animation-delay: 0; /* 規定動畫被播放的次數。預設是 1 */ animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; } </style> <body> <div class="box"></div> </body> </html>
動畫型別不僅僅侷限於 translate（平移） 還可以是 scale（縮放）rotate（旋轉）等