01、transition过渡动画

1.1、transition动画

transition 过渡动画是针对CSS样式的变化，进行过渡，如 width 、 opacity 、 color 改变的过渡，可以实现CSS样式的平滑动态过渡动画效果。

transition 动画本身并不会主动执行，须通过其他方式触发，动画属性变化才会触发执行。常用一些伪类触发： :hover 、 :focus 、 :active （鼠标按下激活）、 :target （锚点元素id）、 :checked ，或者JS控制CSS样式来触发动画执行。

🔸简写属性：transiton : property duration timing-function delay

当 transition-property 指定的属性值变化时，就会触发动画执行，且只对该属性执行过渡动画，设置 all 则任意属性变化都会触发动画执行。

如下示例分析：

页面初始加载时并不会触发动画执行。

当鼠标移入时，属性


    width

、


    background-color

值变化，触发了动画执行。

当鼠移出时，属性


    width

、


    background-color

值回到初始状态，再次触发了动画执行。

<button onclick="active()">动起来</button> <p class="goodstudy">好好学习</p> <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 变换函数 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/矩阵） 其他变换相关属性 .ddup:hover{ transform: translateX(-30px); /* transform只有一个生效，被后面的覆盖了*/ transform: rotateX(180deg); /* 围绕x轴3d旋转*/ </style>

02、animation帧动画

CSS 动画 animation 帧动画，动画的实际CSS样式是由 @keyframes 规则实现的， animation 属性负责设置动画的各项运动参数。

2.1、animation

animation 属性/值 示例/备注 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">
    断肠人在天涯
<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 {
            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 {
        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定义的动画帧划分为多段执行，多用来实现图片的逐帧动画效果。
<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变换