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