一文讲解CSS制作动画常用技巧（收藏）-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

一文讲解CSS制作动画常用技巧（收藏）

之前的文章《你值得了解的JS高级技巧（总结）》中，给大家了解了JS高级技巧。下面本篇文章给大家了解CSS制作动画常用技巧，我们一起看看怎么做。

transition

CSS 中有一个transition属性，能够监听某个 CSS 属性的变化，通过属性变化的控制，实现简单的动画效果：

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。 —— 引用自 MDN

html代码

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .box {        width: 200px;        height: 50px;        line-height: 50px;        text-align: center;        color: #fff;        background: #000;        border-radius: 4px;        /* 使用 transition 侦听 CSS 属性变化 为其加上动画 */        transition: background 1s ease-in-out 0.2s, color 3s, width 5s;      }      .box:hover {        width: 400px;        color: #000;        background: #fff;      }    </style>  </head>  <body>    <div>      <div>鼠标悬浮查看效果</div>    </div>  </body></html>

登录后复制

动画效果点击此处查看地址https://codepen.io/wjq990112/pen/PoqEemX

体验完了，现在来具体讲一下用法：

css代码

transition: transition-property | transition-duration |  transition-timing-function | transition-delay;

登录后复制

这样写你们估计看不懂，我们一条一条来拆解：

css代码

transition-property: background; /* 任何你需要侦听变化的 CSS 属性 */transition-duration: 1s; /* 设定过渡动画的时长 */transition-timing-function: ease-in-out; /* 设定过渡动画的效果 */transition-delay: 0.2s; /* 设定触发动画的延迟 */

登录后复制

而transition属性就是由上面的 4 条 CSS 属性组合而成。

第一第二个属性是必须项，用于指定侦听需要添加过渡动画的属性以及指定动画时长。

第三第四个属性为可选项，用于设定过渡动画的效果和延迟。

transition-timing-function的可选值详见
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function

第一个属性还有 2 个特殊值：none：不对任何属性进行侦听 all：对所有属性进行侦听并为其添加过渡动画。

当省略第三个属性时，第二个时间项会被自动解析为动画效果延迟。

干说还是有点难理解，举个栗子吧：

css代码

transition: background 1s ease-in-out 0.2s;

上面这个例子，就是前面的代码中的一部分。

意思是侦听background的变化，为其添加 1 秒的过渡动画，过渡动画的效果是慢开始慢结束，并在属性变化 0.2 秒后才开始执行。

那么上面代码中的这一段：

css代码

.box {  width: 200px;  height: 50px;  line-height: 50px;  text-align: center;  color: #fff;  background: #000;  border-radius: 4px;  /* 使用 transition 侦听 CSS 属性变化 为其加上动画 */  transition: background 1s ease-in-out 0.2s, color 3s, width 5s;}.box:hover {  width: 400px;  color: #000;  background: #fff;}

登录后复制

代码中的transition属性分别为background``color``width加上了过渡动画，当class=box的标签的这三个属性发生变化时，就回自动为其加上默认或指定的动画效果。

接下来我们就用它来做一些进阶的用法：

在实现动画的过程中，可能会需要使用一种常用的方式：overflow障眼法。

用于实现一些类似Tab切换的效果：

html代码

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .wrapper {        width: 100px;        height: 100px;        overflow: hidden;      }      #tabs {        display: flex;        width: 200px;        height: 100px;        transition: transform 0.3s;      }      .tab-pane-1 {        width: 100px;        height: 100px;        line-height: 100px;        text-align: center;        background: red;      }      .tab-pane-2 {        width: 100px;        height: 100px;        line-height: 100px;        text-align: center;        background: yellow;      }      .transform {        transform: translateX(-50%);      }    </style>  </head>  <body>    <div>      <div id="tabs">        <div>1</div>        <div>2</div>      </div>    </div>    <button onclick="switchTabPane()">切换Tab</button>    <script>      function switchTabPane() {        var el = document.getElementById('tabs')        el.className = el.className ? '' : 'transform'      }    </script>  </body></html>

登录后复制

动画效果点击此处查看https://codepen.io/wjq990112/pen/MWwrXWo

实现这个效果只需要将容器设置为overflow: hidden;，然后对容器内的tab侦听transform属性，使用transform: translateX()使其在 X轴方向移动，大功告成了。

还有一些旋转效果也可以使用transform: rotateZ();使其在浏览器平面上旋转实现，默认是以几何中心为中心点进行旋转。

animation & keyframes

animation属性的用法和transition比较相似，接下来由我来详细介绍一下。

animation CSS 属性是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

先做个简单的旋转效果体验一下：

html代码

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      @keyframes rotate {        0% {          transform: rotateZ(0deg);        }        100% {          transform: rotateZ(359deg);        }      }      .rotate {        width: 100px;        height: 100px;        line-height: 100px;        text-align: center;        color: #fff;        background: red;        /* 为元素设定 10s 的旋转动画 */        animation: rotate 10s linear infinite;      }      .wrapper {        display: flex;        width: 200px;        height: 200px;        justify-content: center;        align-items: center;      }    </style>  </head>  <body>    <div>      <div>旋转</div>    </div>  </body></html>

登录后复制

动画效果点击此处查看https://codepen.io/wjq990112/pen/mdJXeqm

这是一个基础的旋转动画，用到了animation和keyframes两个常用于制作动画的 CSS 属性。

animation

现在我们来讲一下基础用法：

css代码

animation: animation-name | animation-duration | animation-timing-function |  animation-delay | animation-iteration-count | animation-direction |  animation-fill-mode | animation-play-state;

登录后复制

这样讲肯定还是不懂，继续一条一条拆解开给大家讲解：

css代码

animation-name: rotate; /* 自定义 keyframes 名 */animation-duration: 10s; /* 设定单次过渡动画时长 */animation-timing-function: linear; /* 设定单次过渡动画效果 */animation-delay: 0s; /* 设定单次过渡动画延迟时间 */animation-iteration-count: infinite; /* 设定过渡动画执行次数 infinite 表示无限循环 */animation-direction: normal; /* 设定过渡动画方向 可对奇数偶数次动画分别设定 */animation-fill-mode: none; /* 设定过渡动画的填充模式 */animation-play-state: running; /* 设定过渡动画运行或停止 */

登录后复制

相信大部分属性都很好理解，只有两个属性可能会比较难理解。

animation-direction和animation-fill-mode应该可以说是最难理解的两个属性了，我们再详细讲解一下：

css代码

/* *normal: 按照 keyframes 设定的动画方向运行 *reverse: 按照 keyframes 设定的动画方向的反方向运行 *alternate: 先按照 keyframes 设定的动画方向运行 运行结束后再反方向运行 *alternate-reverse: 先按照 keyframes 设定的动画方向的反方向运行 运行结束后再正向运行 */animation-direction: normal | reverse | alternate | alternate-reverse;/* *none: 不设定填充模式 默认在动画开始及结束时都停留在动画未开始的状态 *forwards: 动画结束后停留在动画的最后一帧 *backwards: 动画开始前停留在动画的第一帧 *both: 动画开始前和动画结束后分别停留在动画的第一帧和最后一帧 */animation-fill-mode: none | forwards | backwards | both;

登录后复制

这两个属性可以说是最难理解的，如果想看设定之后的效果，可以转战MDN。

keyframes

这个CSS属性，相信学过一些简单的动画制作的同学肯定了解，很简单，就是关键帧。

为一个动画设定关键帧，CSS将自动填充他的运动路径。

css代码

@keyframes rotate {  0% {    transform: rotateZ(0deg);  }  100% {    transform: rotateZ(359deg);  }}

登录后复制

上面这段代码，就是为设定了animation属性的div标签创建了两个关键帧，一个是动画起始位置的样式，另一个是动画结束位置的样式，CSS将自动填充动画的过程（即旋转 359 度）。

不仅仅可以设置开始和结束的位置（0%可以使用from关键字代替，100%可以使用to关键字代替），还可以在动画的运行过程中插入关键帧，例如33%，50%，66%等等，CSS会按照关键帧的样式，对动画进行自动填充。

通常情况下，keyframes会与animation配合使用。

讲完了animation和keyframes的用法，我们来看一道面试题，来自本人 2020 年某跳动实习生招聘一面：

请你使用 CSS 实现一个方块来回移动，无限循环。

这个题目其实有 2 种做法，但是原理都是一样的，这里就不放 HTML 代码了，直接放 CSS 的部分：

transition: transition-property | transition-duration |  transition-timing-function | transition-delay;0

登录后复制

推荐学习：CSS视频教程

以上就是一文讲解CSS制作动画常用技巧（收藏）的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~

相关推荐