之前的 文章 《你值得 了解 的JS高级技巧（总结）》中，给大家了解了JS高级技巧。下面本篇文章给大家了解CSS 制作 动画常用技巧，我们一起看看怎么做。
trans IT ion
CSS 中有一个 transition 属性，能够监听某个 CSS 属性的变化，通过属性变化的控制，实现 简单 的动画效果：
transition CSS 属性是 transition- PR o PE rty，transition-duration，transition -t iming-function 和 transition-delay 的一个简写属性。 —— 引用自 MDN
ht ML 代码
<!DOCTYPE html>
<html>
<head>
< ;m eta charset="UTF-8" />
<meta n am e="viewport" content="width=device-width, initial -s cale=1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
h ei ght: 50px;
line-height: 50px;
text-align: center ;
color: # fff;
background: #000;
border-radius: 4px;
/* 使用 transition 侦听 CSS 属性变化 为其加上动画 */
transition: background 1s ease -i n-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/w jq 990112/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 {
dis play : 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: trans latex (-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 &am p; keyframes
animation 属性的用法和 transition 比较相似，接下来由我来详细介绍一下。
animation CSS 属性是 animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play- stat e 属性的一个简写属性形式。
先做个简单的旋转效果体验一下：
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(0 deg );
}
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 设定的动画方向运行 * rev erse: 按照 keyframes 设定的动画方向的反方向运行 * alternate: 先按照 keyframes 设定的动画方向运行 运行结束后再反方向运行 * alternate-reverse: 先按照 keyframes 设定的动画方向的反方向运行 运行结束后再正向运行 */ animation-direction: normal | reverse | alternate | alternate-reverse; /* * none: 不设定填充模式 默认在动画开始及结束时都停留在动画未开始的状态 * forwa rds : 动画结束后停留在动画的最后一帧 * 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 的部分：
/*
* ①
*/
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
.move {
width: 100px;
height: 50px;
background: yellow;
animation: move 1s linear infinite;
}
/*
* ②
*/
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
.move {
width: 100px;
height: 50px;
background: yellow;
animation: move 0.5s linear infinite alternate;
}推荐学习：CSS视频教程
以上就是一文讲解CSS制作动画常用技巧（收藏）的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 一文讲解CSS制作动画常用技巧（收藏） 全部内容，希望文章能够帮你解决 一文讲解CSS制作动画常用技巧（收藏） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于一文讲解CSS制作动画常用技巧（收藏）的详细内容...