CSS3 animation动画

最新推荐文章于 2024-08-12 11:00:42 发布

qq_41985405

最新推荐文章于 2024-08-12 11:00:42 发布

阅读量124

点赞数

文章标签： css3 动画 css

本文链接：https://blog.csdn.net/qq_41985405/article/details/130619968

版权

本文介绍了CSS3中的关键帧动画属性，包括animation-name定义动画名称，animation-duration设置动画时长，animation-timing-function控制速度曲线，animation-delay设定延迟时间，animation-iteration-count设置播放次数，animation-direction指定动画播放方向，animation-fill-mode定义动画结束后的样式，以及animation-play-state用于控制动画的播放和暂停状态。通过实例展示了不同属性的效果。

摘要由CSDN通过智能技术生成

animation：
1. animation-name 动画名称
2. animation-duration 动画周期时间，默认0
3. animation-timing-function 动画速度曲线，默认ease(由慢到快再到慢)；linear（匀速）、ease-in(低速开始)、ease-out（低速结束）、ease-in-out（低速开始和结束）
4. animation-delay 动画延迟播放时间，默认0
5. animation-iteration-count 动画播放次数，默认1；n、infinite(无限次)）
6. animation-direction 动画方向，默认normal（正常播放）；reverse（反向播放）、alternate（交替播放：奇正偶反）、alternate-reverse（奇反偶正）
7. animation-fill-mode 动画填充模式，默认none（不应用任何样式到目标元素）；forwards（动画结束后，目标元素应用最后一帧样式）；backwords（动画延迟等待期间，目标元素应用第一帧样式）；both（forwards + backwards）
8. animation-play-state: 动画播放状态，默认running（正在运行）；paused（暂停）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>速度曲线：默认ease，由慢到快，再到慢</p>
    <div class="e e1-1"></div>
    <p>速度曲线：linear，匀速播放</p>
    <div class="e e1-2"></div>
    <p>动画延迟播放时间：2s</p>
    <div class="e e1-3"></div>
    <p>动画播放次数：3次</p>
    <div class="e e1-4"></div>
    <p>动画方向：alternate（交替播放）</p>
    <div class="e e1-5"></div>
    <p>动画填充模式：forwards（动画结束后，目标元素应用最后一帧样式）</p>
    <div class="e e1-6"></div>
    <p>动画填充模式：backwords（动画延迟等待期间，目标元素应用第一帧样式）</p>
    <div class="e e1-7"></div>
    <p>动画填充模式：both（forwards + backwards）</p>
    <div class="e e1-8"></div>
    <div id="e2" class="e e2" style="animation-play-state: running;"></div>
    <button onclick="handleClick1()">播放/暂停</button>
    <div id="e3" class="e e3" style="animation-play-state: paused;"></div>
    <button onclick="handleClick2()">播放/暂停</button>
  </body>
</html>
<script>
  function handleClick1() {
    document.getElementById('e2').style.animationPlayState = document.getElementById('e2').style.animationPlayState === 'running' ? 'paused' : 'running'
  }
  function handleClick2() {
    document.getElementById('e3').style.animationPlayState = document.getElementById('e3').style.animationPlayState === 'running' ? 'paused' : 'running'
  }
</script>
<style>
  @keyframes colorChange {
    from {
      background: red;
      left: 0;
    }
    to {
      background: blue;
      left: 500px;
    }
  }

  @keyframes move {
    0% {
      background: red;
      left: 0;
      top: 0;
    }
    25% {
      background: yellow;
      left: 200px;
      top: 0;
    }
    50% {
      background: blue;
      left: 200px;
      top: 200px;
    }
    75% {
      background: green;
      left: 0;
      top: 200px;
    }
    100% {
      background: red;
      left: 0;
      top: 0;
    }
  }
</style>
<style>
* {
  box-sizing: border-box;
  margin-bottom: 10px;
}
.e {
  width: 50px;
  height: 50px;
  background: peachpuff;
  position: relative;
}
.e1-1 {
  animation: colorChange 5s;
}
.e1-2 {
  animation: colorChange 5s linear;
}
.e1-3 {
  animation: colorChange 5s linear 2s;
}
.e1-4 {
  animation: colorChange 5s linear 2s 3;
}
.e1-5 {
  animation: colorChange 5s linear 2s 3 alternate;
}
.e1-6 {
  animation: colorChange 5s linear 2s 3 alternate forwards;
}
.e1-7 {
  animation: colorChange 5s linear 2s 3 alternate backwards;
}
.e1-8 {
  animation: colorChange 5s linear 2s 3 alternate both;
}
.e2 {
  animation: move 4s linear 2s infinite alternate;
}
.e3 {
  animation: move 4s linear 2s infinite alternate paused;
}
</style>