CSS3動畫效果-3d-過渡動畫


知識點一:旋轉

新加的屬性:transform: rotateZ(ndeg);

知識點二:過度動畫

transform-style:preserve-3d;// 設置成3D的效果,,必加的東西
perspective: 800px-2000px; //設置成右側邊陰影的。。。。。

@keyframes name { 0% { transform: rotate(180deg); } 180% { transform: rotate(360deg); } 360% { trnsform: rotate(720deg); } }//結束到這 。。。結束

animation: name 20s; //過渡加在動畫的元素上
或者是這種。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
animation-name: name;
animation-duration: 3s;//動畫指定需要多少秒或毫秒完成
animation-timing-function: 設置動畫將如何完成一個周期
animation-delay: 時間; //設置動畫在啟動前的延遲間隔。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM