在css3中,動畫屬性名是“animation”,該屬性是一個簡寫屬性,用於規定綁定的keyframe名稱、動畫時間、速度曲線、動畫延遲、動畫次數和是否反向播放動畫,語法為「animation:名稱時間速度延遲次數是否反向播放」。
本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。
animation 屬性是一個簡寫屬性,用於設定六個動畫屬性:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
註解:請一律規定animation-duration 屬性,否則時長為0,就不會播放動畫了。
語法為:
animation: name duration timing-function delay iteration-count direction;
其中參數表示的值為:
範例如下:
<html> <head> <meta charset="utf-8"> <title>123</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p> <div></div> </body> </html>
輸出結果:
(學習影片分享:css影片教學)
以上是css3動畫屬性名是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!