1. 适合过渡动画的场景
最典型的一个例子就是当鼠标移入时进行一些动画效果：
实例演示
预览
复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<!-- 中文渐变色的CSS库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<!-- 中文布局的CSS库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
<style>
/* 清除默认样式 */
* { padding: 0; margin: 0; }
/* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
ul {
/* 网格布局 */
display: grid;
/* 引入了chinese-layout这个库，所以可以用中文 */
grid: var(--六宫格);
/* 间距10px */
gap: 10px;
/* 给个宽高 */
width: 300px;
height: 200px;
/* 清除默认样式 */
list-style: none;
}
li {
/* 引入了chinese-gradient这个CSS库，所以可以用中文 */
background: var(--怦然心动);
/* 过渡属性，有了这个属性才会有过渡效果 */
transition: transform .2s;
}
li:hover {
/* 鼠标移入时进行放大 */
transform: scale(1.1);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
运行案例
点击 "运行案例" 可查看在线运行效果
运行结果：
不过眼尖同学可以发现CSS里面居然可以写中文，这是怎么回事呢？
原来是因为我们引入了一个CSS库来美化了我们的样式：
2. 小结
其实你在大部分网站看到的一些交互动画都是过渡动画，这么一看感觉好像帧动画没什么优势啊。
其实不然，接下来我们将用雪碧图来让大家见识一下帧动画的厉害之处。