CSS动画-transition/animation

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; } }

1. 定一个关键帧动画组，并命名：@keyframes animation-name {}
2. 用百分比%来定动画帧：
   • 0% 表示开始第一帧样式，可以用别名from代替。
   • 100% 表示最后一帧样式，可以用别名to代替。
   • 中间可以加其他%* 关键帧。
3. 每一帧里定义需要执行动画变换的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变换

---

️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀