CSS3 @keyframes動畫規則
阿新 • • 發佈：2019-02-02
CSS3 動畫屬性
@keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { from {top:0px;} to {top:200px;} } @-o-keyframes mymove /* Opera */ { from {top:0px;} to {top:200px;} }
注：目前瀏覽器都不支援 @keyframes 規則；Firefox 支援替代的 @-moz-keyframes 規則；Opera 支援替代的 @-o-keyframes 規則；Safari 和 Chrome 支援替代的 @-webkit-keyframes 規則。
@keyframes 語法
html與css程式碼:div勻速向下運動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>index</title> <meta name="description" content=""> <meta name="author" content="boonya"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <style> div { width: 200px; height: 200px; background-color: #39B940; position:relative; -moz-animation:mymove 5s infinite;/*infinite無限迴圈*/ } @-moz-keyframes mymove{ from{top:0px;} to{top:300px;} } </style> </head> <body> <div> <p>我是小妞妞。</p> </div> </body> </html>
效果圖
帶有多個 CSS 樣式的多個 keyframe 選擇器,html與css程式碼
注：圖片為靜態，效果為動態，請參考http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes4<style> div { width: 200px; height: 200px; background-color: #39B940; position:relative; -moz-animation:mymove 5s infinite; border-radius:25px; } @-moz-keyframes mymove{ 0% {top:0px; left:0px; background:#A217A2;} 25% {top:0px; left:100px; background:#0FC646;} 50% {top:100px; left:100px; background:#DEAF24;} 75% {top:100px; left:0px; background:#0FC646;} 100% {top:0px; left:0px; background:#A217A2;} } </style>