一、動畫效果 1.過渡與動畫相類似，都需要三要素，那麼他們的區別在哪裡呢？ 答：過渡必須是人為的觸發才會執行動畫，動畫不需要人為的觸發就可以自動執行動畫。 2.相同點： （1）過度和動畫都是用來給元素添加動畫的；（2）過渡和動畫都是系統新增的一些屬性；（3）過渡和動畫都需要滿足三要素才會有動 ...
一、動畫效果
1.過渡與動畫相類似，都需要三要素，那麼他們的區別在哪裡呢？
答：過渡必須是人為的觸發才會執行動畫，動畫不需要人為的觸發就可以自動執行動畫。
2.相同點：
（1）過度和動畫都是用來給元素添加動畫的；（2）過渡和動畫都是系統新增的一些屬性；（3）過渡和動畫都需要滿足三要素才會有動畫效果
3.動畫的三要素
（1）告訴系統需要執行哪個動畫；
animation-name:動畫名稱;
（2）告訴系統我們需要自己創建一個自定義名稱的動畫
@keyframs 動畫名稱{
from{
}
to{
}
}
（3）動畫持續的時長
animation:時間；/*這裡的時間可以使用秒做單位*/
<style>
*{
padding:0;
margin:0;
}
div{
width:100px;
height: 50px;
background-color: red;
animation-name:lnj;
animation-duration: 1s;
}
@keyframes lnj {
from{
margin-left:0;
}
to{
margin-left:500px;
}
}
.........省略代碼........
<div></div>
二、動畫模塊其他屬性
<style> *{ padding:0; margin:0; } div{ width: 100px; height: 50px; background-color: red; animation-name:sport; animation-duration: 1s; animation-delay:1s;/*動畫執行前的延遲時間*/ animation-timing-function:linear;/*動畫持續的速度函數類型*/ animation-iteration-count:3;/*動畫執行的次數*/ animation-direction:alternate;/*動畫執行迴圈往複，迴圈往複一次是算兩次動畫效果的，如果使用normal，那麼就是重覆動畫而已，預設是此值*/ animtion-play-state:running;/*預設是running,也就是執行動畫*/ } @keyframes sport { from{ margin-left:0px; } to{ margin-left:500px; } } div:hover{ /*告訴系統當前動畫是否需要暫停*/ animation-play-state:paused; } .........省略代碼....... <div></div>
三、動畫效果其他屬性下
通過我們的觀察，動畫是有一定的狀態的
（1） 等待狀態；（2）執行狀態；（3）結束狀態
animation-fill-mode:none;
屬性值有四種
none:不做任何的改變；
forwards:讓元素結束狀態保持動畫的最後一幀的樣式
backwards:讓元素等待狀態的時候顯示動畫的第一幀的樣式
both:兩個屬性值的效果都顯示。
<style> *{ padding:0; margin:0; } .box1{ width: 100px; height: 50px; background-color: red; animation-name:sport; animation-duration:2s; } @keyframes sport {/*這裡的百分比代表占用的時間*/ 0%{ margin-left:0px; margin-top:0px; } 10%{ margin-left: 300px; margin-top:0px; } 20%{ margin-left:300px; margin-top:300px; } 30%{ margin-left:0px; margin-top:300px; } 100%{ margin-left:0px; margin-top:0px; } } .box2{ width: 100px; height: 50px; background-color: red; margin:100px auto; animation-name:sport2; animation-duration:2s; animation-fill-mode:backwards; animation-delay:2s; } @keyframes sport2 { 0%{ tranform:rotate(10deg); } 25%{ transform:rotate(45deg); } 50%{ transform:rotate(79deg); } 100%{ transform:rotate(160deg); } } </style> </head> <body> <div class="box1"></div> <div class="box2"></div>
四、源碼：
D175_CartoonModule.html
D176_OtherAttrubuteOfAnimationModule.html
D176_OtherAttributeOfAnimationModule2.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D175_CartoonModule.html
https://github.com/ruigege66/HTML_learning/blob/master/D176_OtherAttrubuteOfAnimationModule.html
https://github.com/ruigege66/HTML_learning/blob/master/D176_OtherAttributeOfAnimationModule2.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
