animation动画全解

最新推荐文章于 2022-11-25 14:52:08 发布

fltenwall

最新推荐文章于 2022-11-25 14:52:08 发布

阅读量7.6k

点赞数 12

分类专栏： CSS 文章标签： animation动画全解 animation动画 animation属性小球运动动画 css动画

本文链接：https://blog.csdn.net/qq_32925031/article/details/107539156

版权

本文详细介绍了CSS动画的八大属性，包括animation-delay、animation-direction、animation-duration等，并通过实例演示了如何调试贝塞尔曲线、创建进度条特效以及实现小球的平滑运动动画。文章适合想要深入理解CSS动画的开发者阅读。

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

animation八大属性共用

代码

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </body>
</html>

CSS

.box {
   
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  margin-bottom: 20px;
}
.box:nth-child(2n + 1) {
   
  animation: move 2s linear infinite alternate;
}
.box:nth-child(2n) {
   
  animation: move 2s linear infinite alternate-reverse forwards 1s;
}

.box:hover {
   
  animation-play-state: paused;
}

@keyframes move {
   
  0% {
   
    transform: translate(0, 0);
  }
  100% {
   
    transform: translate(400px, 0);
  }
}