影片是CSS3中具有顛覆性的特征之一，可通過設定多個節點來精確控制一個或一組影片，常用來實作復雜的影片效果，
語法格式：
animation:影片名稱 花費時間 運動曲線 何時開始 播放次數 是否反方向;
關于幾個值，除了名字，影片時間，延時有嚴格順序要求其它隨意r
@keyframes 影片名稱 { from{ 開始位置 } 0% to{ 結束 } 100% }
animation-iteration-count:infinite; 無限回圈播放 默認是1次
animation-direction： alternate 影片應該輪流反向播放 默認是 normal
animation-play-state:paused; 暫停影片"
小汽車案例
body { background: white; } img { width: 200px; } .animation { animation-name: goback; animation-duration: 5s; animation-timing-function: ease; animation-iteration-count: infinite; } @keyframes goback { 0%{} 49%{ transform: translateX(1000px); } 55%{ transform: translateX(1000px) rotateY(180deg); } 95%{ transform: translateX(0) rotateY(180deg); } 100%{ transform: translateX(0) rotateY(0deg); } }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/103977.html
標籤：Html/Css
上一篇：HTML不換行，多余用省略號代替
下一篇：元素的顯示與隱藏