CSS动画Animation全解

前言

在css中我们希望实现一个动画的效果，我们可以使用animation属性进行元素的操作，从而实现动画效果

本文就使用一个小demo来讲解一下

效果展示

代码实现

可以看到现在我们实现的是一只皮卡丘在移动

首先我们需要拿到这张gif图片i.gifer.com/4tym.gif

接下来我们就将它放在我们的页面中

html

html 复制代码

<div class="login">
    <div class="login-wrappe">
      <div class="avatar">
        <img src="https://i.gifer.com/4tym.gif" alt="" />
      </div>
    </div> 
 </div>

css

js 复制代码

.login {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  padding: 0 0.3rem;
  box-sizing: border-box;
  overflow: hidden; // 溢出隐藏.让其变为bfc容器

  .login-wrappe {
    width: 7.44rem;
    height: 12.77rem;
    border: 1px solid #ccc;
    margin: 0 auto;
    margin-top: 1rem;
    border-radius: 0.3rem;
    box-shadow: -0.25rem 0.25rem 0.6rem rgb(115, 115, 115);
    overflow: hidden;
    .avatar {
      width: 2.4rem;
      height: 2.4rem;
      margin: 1rem auto 0.77rem;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
  }
}

目前的效果为：

可以看到这个动图是在原地动，我们只需要给他添加动画就能够实现让他看起来好像真的在跑

接下来我们定义一个动画的关键帧

css 复制代码

@keyframes move {
  0% {
    transform: translateX(-180px);
  }
  100% {
    transform: translateX(180px); /* 要移动的距离 */
  }
}

在 0% 这个关键帧时，元素的 transform 属性被设置为 translateX(-180px) ，这表示动画开始时，元素会向左平移 180 像素。

在 100% 这个关键帧时，transform 属性被设置为 translateX(180px) ，这意味着动画结束时，元素会向右平移 180 像素。

然后再对应的容器里添加一个animation

js 复制代码

 /* 动画名称，持续时间，速度曲线，迭代次数 */
 animation: move 2s ease-in-out infinite;

常见的动画速度曲线（缓动函数）包括：

linear ：动画以恒定速度进行，没有加速或减速。
ease ：动画开始时缓慢，然后加速，结束时再次缓慢。
ease-in ：动画开始时缓慢，然后以正常速度进行。
ease-out ：动画以正常速度开始，结束时缓慢。
ease-in-out ：动画开始和结束时缓慢，中间速度正常。

动画的迭代次数可以是以下几种情况：

infinite ：无限次循环播放。
具体的整数，例如 2 、 5 等，表示动画播放的具体次数。

接下来我们就能看到这个效果了

animation需要配合@keyframes来使用，通过他们的结合使用是可以实现很复杂的动画效果的

animation的一般步骤如下:

定义关键帧动画
使用 @keyframes 规则定义动画的关键帧。每个关键帧都指定了元素在某一时刻的样式。

css 复制代码

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

将动画应用到元素
使用 animation 属性将定义好的动画应用到元素上。可以设置动画名称、持续时间、速度曲线等参数。

css 复制代码

.animated-element {
  animation: slide 3s ease-in-out infinite;
}

调整动画参数
可以进一步调整动画的各种属性,如:

animation-name: 动画名称
animation-duration: 动画持续时间
animation-timing-function: 速度曲线
animation-delay: 动画延迟启动时间
animation-iteration-count: 动画循环次数
animation-direction: 动画播放方向

结合其他 CSS 属性
动画可以与其他 CSS 属性结合使用,如 transform、opacity 等,创造出更复杂的视觉效果。

css 复制代码

@keyframes grow {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.animated-element {
  animation: grow 2s ease-in-out infinite;
}

性能优化
为了保证动画的流畅性,应该尽量避免触发昂贵的重排和重绘操作,优先使用 transform 和 opacity 属性来驱动动画。

总结

本文介绍了CSS动画Animation的基础的使用用法，结合代码带大家实现了一个移动的皮卡丘

希望本文能够帮助你对Animation有更好的理解！！