題外話：再肝一章~
文章內(nèi)容輸出來源：拉勾教育大前端就業(yè)集訓(xùn)營
1.概述
- 概述：css3中提供了自己的動畫制作方法，這可以在許多網(wǎng)頁中取代動畫圖片、Flash 動畫以及JavaScript喻奥。
- 步驟：css3動畫制作分為兩步：創(chuàng)建動畫、綁定動畫椒丧。
2.創(chuàng)建動畫——@keyframes規(guī)則
- 概述：@keyframes規(guī)則用于創(chuàng)建動畫土涝。其中規(guī)定某項(xiàng)CSS樣式，就能創(chuàng)建由從一種樣式逐漸變化為另一種樣式的效果省艳∧锓祝可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。
- 多過程控制：需要使用百分比來規(guī)定變化發(fā)生的時(shí)間跋炕，或用關(guān)鍵詞"from"和"to"赖晶，等同于0%和100%。0%是動畫的開始辐烂，100% 是動畫的完成遏插。
- 書寫方法：
@keyframes 自定義名稱{
動畫過程1{
CSS樣式變更
}
動畫過程2{
CSS樣式變更
}
...
}
- 舉個(gè)例子：
<style>
@keyframes myMovement {
0%{
transform: translateY(0px);
}
25%{
transform: translateY(200px);
}
50%{
transform: translateY(0px);
}
75%{
transform: translateY(-200px);
}
100%{
transform: translateY(0px);
}
}
</style>
說明：以上只是創(chuàng)建了一個(gè)動畫，因?yàn)闆]有綁定所以無法播放纠修。用百分比定義了5個(gè)階段胳嘲，每個(gè)階段代表在Y軸上不同的位置。
3.綁定動畫——animation屬性
- 概述：動畫創(chuàng)建好了之后扣草，需要指定一個(gè)對象來完成這個(gè)動畫了牛，也就是在一個(gè)選擇器中，添加animation屬性辰妙，否則不會產(chǎn)生動畫效果鹰祸。
- 書寫方式：
選擇器{
animation: 動畫名稱 過渡時(shí)間 貝塞爾曲線 動畫次數(shù) 延遲播放時(shí)間；
}
- 舉個(gè)完整的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: pink;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 200px auto;
/* 綁定動畫 */
animation: myMovement 4s linear ;
}
@keyframes myMovement {
0%{
transform: translateY(0px);
}
25%{
transform: translateY(200px);
}
50%{
transform: translateY(0px);
}
75%{
transform: translateY(-200px);
}
100%{
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
說明：通過animation來綁定設(shè)置好的動畫密浑，即可讓對應(yīng)的元素動起來啦~如果不設(shè)置播放次數(shù)蛙婴，則默認(rèn)播放1次。
- 單一屬性：
| 屬性 | 說明 |
|---|---|
| animation-name | 規(guī)定@keyframes動畫的名稱 |
| animation-duration | 規(guī)定動畫完成一個(gè)周期所需要的時(shí)間尔破，s或ms為單位 |
| animation-timing-fuction | 指定動畫的時(shí)間曲線（貝塞爾曲線） |
| animation-delay | 規(guī)定動畫開始的時(shí)間 |
| animation-iteration-count | 動畫播放的次數(shù)街图，infinite表示無限次 |
瀏覽器兼容
- Internet Explorer 10浇衬、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性。
- Chrome 和 Safari 需要前綴 -webkit-餐济。
- Internet Explorer 9耘擂，以及更早的版本，不支持 @keyframe 規(guī)則或 animation 屬性颤介。
前端文章匯總目錄
http://www.reibang.com/p/6d80dd616ff4
結(jié)束語：一花一世界梳星，一木一浮生，愿與諸君共勉
