#背景 用css動畫讓你的頁面交互動起來 #開始 <body> <button id="button">開始</button> <div id="block"></div> </body> <script> document.getElementById("button").addEventList ...
背景
用css動畫讓你的頁面交互動起來
開始
<body>
<button id="button">開始</button>
<div id="block"></div>
</body>
<script>
document.getElementById("button").addEventListener("click", () => {
document.getElementById("block").setAttribute("class", "go");
});
</script>
<style>
#button {
position: absolute;
right: 10px;
top: 10px;
}
#block {
position: absolute;
background-color: pink;
left: 0px;
top: 0px;
width: 100px;
height: 100px;
}
@keyframes go {
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
.go {
animation-name: go;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
</style>
代碼其實很簡單參考https://www.runoob.com/css3/css3-animations.html
總結
- 瞭解動畫必須弄懂2個概念，關鍵幀設置，動畫時長。
- 動畫時長：當你給一個元素添加了使用了animation的相關設置時，這個動畫就會開始啟動，這裡的時長只是方便理解（主要是說明時長非常關鍵），實際動畫的配置包括，延遲開始時間，結束後是否迴圈等等。具體參考文檔。
- 關鍵幀設置，是指你需要將動畫時長劃分成幾個關鍵的節點（就像動畫片一樣），這個關鍵的節點就是關鍵幀。每個關鍵幀有針對這個元素在當前時刻的一些配置信息，寬、高、背景色等
- 有了關鍵幀設置和動畫時長，動畫就會按配置動起來。
