HTML系列：
人人都懂的HTML基础知识-HTML教程(1)
HTML元素大全(1)
HTML元素大全(2)-表单
CSS系列：
CSS基础知识筑基
常用CSS样式属性
CSS选择器大全48式
CSS布局秘籍(1)-任督二脉BFC/IFC
CSS布局秘籍(2)-6脉神剑
CSS动画-transition/animation
00、CSS动画
CSS系列：
CSS基础知识筑基
常用CSS样式属性
CSS选择器大全48式
CSS布局秘籍(1)-任督二脉BFC/IFC
CSS布局秘籍(2)-6脉神剑
CSS动画-transition/animation
CSS 动画就是由一种状态（CSS样式），过渡到另一中状态（CSS样式）的动态过程，CSS中提供了两种动画实现方式：transition、animation。
| 对比 | transition动画 | animation动画 |
|---|---|---|
| 定义 | 基于CSS属性变化的简单过渡动画 | 基于关键帧@keyframes实现更复杂的动画 |
| 复用 | 只能执行一次，不可重复执行，复用不便 | 可多次执行，复用方便 |
| 执行方式 | 页面加载不会默认执行，须触发执行 | 可直接执行、可控制 |
| 动画事件 | 无，只能预估动画时间，用定时器setTimeout模拟 |
支持监听事件，如动画开始、结束 |
| 动画帧 | 只有初始帧（当前样式）、结束帧（触发动画时的样式） | 支持任意多帧动画设置 |
| 五星好评 | 灵活简单 | 功能丰富 |
01、transition过渡动画
1.1、transition动画
transition 过渡动画是针对CSS样式的变化，进行过渡，如width、opacity、color改变的过渡，可以实现CSS样式的平滑动态过渡动画效果。
transition动画本身并不会主动执行，须通过其他方式触发，动画属性变化才会触发执行。常用一些伪类触发：:hover、:focus、:active（鼠标按下激活）、:target（锚点元素id）、:checked，或者JS控制CSS样式来触发动画执行。
| transition过渡 | 描述 | 示例 |
|---|---|---|
| transition | 过渡动画的简写属性，包括下面这些小弟 | （transition /trænˈzɪʃ(ə)n/ 过渡） |
| transition-property | 指定过渡动画的CSS属性名，多个,分割，默认all都生效 |
transition-property: width; |
| transition-duration | 动画时长，默认0，单位s、ms，*必备 | transition-duration: 1s; |
| transition-delay | 动画延时时长，延时执行动画 | transition-delay: 1s; |
| *-timing-function | 指定过渡动画执行缓动曲线函数，详见后面animation章节 |
transition-timing-function: linear; |
简写属性：transiton: property duration timing-function delay
当transition-property指定的属性值变化时，就会触发动画执行，且只对该属性执行过渡动画，设置all则任意属性变化都会触发动画执行。
如下示例分析：
页面初始加载时并不会触发动画执行。
当鼠标移入时，属性width、background-color值变化，触发了动画执行。
当鼠移出时，属性width、background-color值回到初始状态，再次触发了动画执行。
<div>
<button onclick="active()">动起来</button>
<p class="goodstudy">好好学习</p>
</div>
<style>
.goodstudy {
background-color: #63a9e7;
width: 150px; margin: 40px 0; padding: 8px;
/* 设置动画 页面加载并不会执行 */
transition-property: width,background-color;
transition-duration: 1s;
transition-delay: 0.2s;
transition-timing-function: ease-out;
transition: all 1s ease-out;
}
.goodstudy:hover {
width: 350px;
background-color: red;
}
.active {
transform: rotate(360deg);
background-color: #0cdb39;
transition: all 3s;
}
</style>
<script>
//通过脚本添加CSS类，触发动画执行
const pnode = document.querySelector('.goodstudy');
function active() {
pnode.classList.add('active');
//执行完移除，没有事件只能定时执行移除动作
setTimeout(() => {
console.log('removed');
pnode.classList.remove('active');
}, 3000);
}
</script>
1.2、transform变换
transform 可实现元素的各种图形变换，如缩放、旋转，及3D的变换，（transform /trænsˈfɔːrm/ 变换）。transform 本身并不是动画，不过常用来配合transition来实现各种炫酷的变换动画效果。
| transform变换函数 | 描述 | 示例 |
|---|---|---|
| transform | 元素变换，值支持下面这些函数，可设置多个值 | transform: skew(30deg) rotate(60deg); |
| translate(x, y) | 位移变换，x、y方向的移动，可负数。扩展函数translateX()、translateY()，其他变换函数类似 | transform: translateY(100);（ translate /trænzˈleɪt/ 变化、移动） |
| scale(x, y) | 缩放变换，1为100%原始大小 | transform: scaleX(2); |
| rotate(angle) | 旋转，参数单位为角度deg，（rotate /rəʊˈteɪt/ ） |
transform: rotate(30deg); |
| skew(x, y) | 元素倾斜，单位为角度deg（ skew /skjuː/ 倾斜） |
transform: skew(-60deg,0); |
| translate3d(x,y,z) | 3D的位置变换，指定x、y、z坐标轴的偏移距离 | transform: translate3d(100px,0,0); |
| scale3d(x,y,z) | 3D的缩放变换，指定x、y、z坐标轴的缩放值 | transform: scale3d(2,1.2,1); |
| rotate3d(x,y,z,angle) | 3D旋转，指定x、y、z坐标轴 | transform: rotateX(180deg); |
| matrix() | 基于X轴和Y轴矩阵变换（/ˈmeɪtrɪks/矩阵） | |
| 其他变换相关属性 | ||
| transform-origin | 元素中心坐标，默认center |
transform-origin: 150px 50px; |
| perspective | 3D变换的透视视角，在父元素上设置 /pərˈspektɪv/ | perspective: 500px; |
3D坐标系的手势图：
<div>
<button onclick="active()">动起来</button>
<p class="goodstudy">好好学习</p>
<p class="ddup">天天向上</p>
</div>
<style>
.ddup{
background-color: #0cdb39;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
transition: all 1s ease-out;
transform: skew(-30deg);
}
.ddup:hover{
transform: translateX(-30px); /* transform只有一个生效，被后面的覆盖了*/
transform: rotateX(180deg); /* 围绕x轴3d旋转*/
}
</style>
02、animation帧动画
CSS 动画 animation帧动画，动画的实际CSS样式是由 @keyframes 规则实现的，animation属性负责设置动画的各项运动参数。
2.1、animation
| animation 属性/值 | 描述 | 示例/备注 |
|---|---|---|
| animation | 动画组合简写属性，包括下面这些小弟 | 是有顺序的，支持多组动画，逗号隔开 |
| animation-name | *必填，指定由@keyframes定义的动画序列名称 |
@keyframes animation-name {} |
| animation-duration | *必填，动画时长，单位s、ms | animation-duration: 2.5s |
| animation-iteration-count | 动画循环次数(1)，infinite无限循环（/ˈɪnfɪnət/无限） |
animation-iteration-count: 3; |
| animation-timing-function | 设置动画速度变化函数，提供了函数、预置函数关键字 | animation-timing-function: linear; |
| linear、ease、... | 预置的函数关键字定义，默认ease | |
| cubic-bezier() | 三次贝塞尔曲线函数，参数为两个坐标点，在线工具 | cubic-bezier(x1, y1, x2, y2) |
| animation-fill-mode | 动画执行元素样式应用方式，默认none，动画执行完成后恢复到原来的样式。animation-fill-mode: forwards; |
● forwards：动画后保留最后一帧的样式 ● backwards：立刻应用第一帧样式，包括 animation-delay延迟时间生效● both：forwards+backwards，全都要！ |
| animation-delay | 动画延时时长，默认0s立即执行，可为负数 |
animation-delay: 2s; |
| animation-direction | 播放方向方式，默认normal。animation-iteration-count多次执行时可以使用交替运行alternate |
● alternate：动画交替反向运行，结合多次 ● reverse：反向播放动画 ● alternate-reverse：反向交替运行 |
| animation-play-state | 动画运行状态，running、paused，可用来控制动画 | animation-play-state: paused; |
简写属性：animation: name duration timing-function delay iteration-count direction fill-mode play-state
<div class="div-abox">
断肠人在天涯
</div>
<style>
.div-abox {
padding: 4px;
width: 150px;
background-color: red;
animation-delay: 1s;
animation-duration: 1s;
animation-name: box-line-ani;
animation-direction: alternate; /*动画交替反向运行*/
animation-iteration-count: infinite; /*无限重复*/
animation-fill-mode: both;
animation-timing-function: cubic-bezier(.4, .52, .93, .4);
/*animation 简写属性*/
animation: box-line-ani 1.5s alternate 4 cubic-bezier(.4, .52, .93, .4) both;
}
.div-abox:hover { /* 鼠标悬浮时运动加速 */
animation-duration: 0.5s;
}
@keyframes box-line-ani {
0% {
background-color: white;
width: 150px;
}
40% { width: 250px; }
100% {
background-color: #63a9e7;
width: 400px;
}
}
</style>
2.2、@keyframes关键帧
animation 属性定义动画各项运动参数，实际的动画执行的CSS属性通过@keyframes来定义，使用@keyframes建立两个或两个以上关键帧来实现动画帧的样式定义。
@keyframes animationname { keyframes-selector { css-styles; } }
- 定一个关键帧动画组，并命名：
@keyframes animation-name {}用百分比
%来定动画帧：0% 表示开始第一帧样式，可以用别名from代替。100% 表示最后一帧样式，可以用别名to代替。中间可以加其他
%* 关键帧。每一帧里定义需要执行动画变换的CSS样式。
@keyframes animation-name {
0% {
background-color: white;
width: 150px;
}
40% { width: 250px; }
100% {
background-color: #63a9e7;
width: 400px;
}
}
2.3、animation-timing-function动画缓动曲线
animation-timing-function 用来定义动画执行过程的缓动速度，内置了几个常用的函数定义关键字，及两个关键函数。同transition 动画中的缓动速度属性 transition-timing-function 是一样的，同母异父的亲兄妹。
三次贝塞尔曲线缓动函数：cubic-bezier(x1, y1, x2, y2)（cubic /ˈkjuːbɪk/ 立方），参数其实是两个坐标点，可以通过在线贝塞尔可视化工具编辑和测试。用来实现动画过程中速度变化曲线的控制，以实现更自然的动画效果。内置的linear、ease等都是基于贝塞尔曲线函数的。
步骤缓动函数：steps()，把@keyframes定义的动画帧划分为多段执行，多用来实现图片的逐帧动画效果。
| animation-timing-function | 描述 | 示例/补充 |
|---|---|---|
| cubic-bezier(x1, y1, x2, y2) | 三次贝塞尔曲线函数，参数为两个坐标点，在线工具 | cubic-bezier(x1, y1, x2, y2) |
| linear | 匀速，= cubic-bezier(0.0, 0.0, 1.0, 1.0) |
animation-timing-function: linear; |
| ease | 默认值：低速开始，中间加速，然后低速收尾 | （ease /iːz/ 容易，减轻） |
| ease-in | 低速开始 | |
| ease-out | 低速结束 | |
| ease-in-out | 低速开始，低速结束 | |
steps( n, <jumpterm>) |
分阶段缓动函数，参数为步数和变化点。可实现时钟指针动画 | animation-timing-function:steps(6); |
2.4、动画事件
用于监听动画的开始、循环、结束的动画事件 AnimationEvent
| 事件 | 描述 |
|---|---|
| animationstart | 动画开始 |
| animationend | 动画完成 |
| animationiteration | 动画循环 |
<script>
const node = document.querySelector('.div-abox');
node.addEventListener('animationend', (e) => {
console.log(e.animationName, e.type, e.elapsedTime);
//box-line-ani animationend 1
})
</script>
参考资料
入浅出 CSS 动画
CSS3 3D transform变换
️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀
