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

背景

用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. 有了关键帧设置和动画时长，动画就会按配置动起来。
posted @ 2022-10-08 22:49  李同学的教室  阅读(263)  评论(0)    收藏  举报