【前端必会】CSS动画,的确很简单

  • 【前端必会】CSS动画,的确很简单已关闭评论
  • 31 次浏览
  • A+
所属分类:Web前端
摘要

用css动画让你的页面交互动起来代码其实很简单参考https://www.runoob.com/css3/css3-animations.html
总结


背景

用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
总结

  1. 了解动画必须弄懂2个概念,关键帧设置,动画时长。
  2. 动画时长:当你给一个元素添加了使用了animation的相关设置时,这个动画就会开始启动,这里的时长只是方便理解(主要是说明时长非常关键),实际动画的配置包括,延迟开始时间,结束后是否循环等等。具体参考文档。
  3. 关键帧设置,是指你需要将动画时长划分成几个关键的节点(就像动画片一样),这个关键的节点就是关键帧。每个关键帧有针对这个元素在当前时刻的一些配置信息,宽、高、背景色等
  4. 有了关键帧设置和动画时长,动画就会按配置动起来。