背景
用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的相关设置时，这个动画就会开始启动，这里的时长只是方便理解（主要是说明时长非常关键），实际动画的配置包括，延迟开始时间，结束后是否循环等等。具体参考文档。
- 关键帧设置，是指你需要将动画时长划分成几个关键的节点（就像动画片一样），这个关键的节点就是关键帧。每个关键帧有针对这个元素在当前时刻的一些配置信息，宽、高、背景色等
- 有了关键帧设置和动画时长，动画就会按配置动起来。