动画

动画库

动画分析过程：
1：分析动画运动轨迹，运动现象
2：想一下那些css 属性可以实现这样的效果。
3：根据轨迹变化，进行百分比划分（不一定是等分），
划分方式：找到几个特殊的【峰值】，在峰值与峰值之间进行划分
4：在每个不同的百分比区间更改属性的值
5：如果是渐进式的；值越来越小，直到小到回到最初的状态

动画运动轨迹：
常用的：平移 旋转 拉伸 显示 隐藏 透明度

 <h2 class="xt-animation bounce">Bounce弹跳动画</h2>
 <h2 class="xt-animation flash">flash闪烁动画</h2>
 <h2 class="xt-animation flasher">flasher快闪</h2>
 <h2 class="xt-animation shake">shake抖动</h2>
 <h2 class="xt-animation rotate">rotate旋转</h2>
 <h2 lass="xt-animation fadeOut">fadeOut渐隐</h2>

        h1, h2 {
            text-align: center;
        }

        h2 {
            float: left;
            margin: 30px 0 0 30px;
            width: 400px;
            height: 40px;
            background-image: -webkit-linear-gradient(92deg, red, rgb(214, 6, 255),aqua);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }


/* 
写属于自己的动画样式库（参考 animate.css动画库）
*/


/* 通常基础类作用 为默认情况
其他情况可以【按需】修改默认情况（重新赋值过程）
*/

/* 
单位使用说明：
1：范式使用百分比 都是以父元素为基础
2：范式单位大于1000px 的都是以body为基础

*/

/* 定义基础类 */

.xt-animation {
    /* 默认执行所有动画名字 */
    animation: all;
    /* 默认每个动画执行时间 */
    animation-duration: 2s;
    /* 默认所有动画均匀速执行 */
    animation-timing-function: linear;
    /* animation-iteration-count: infinite; */
}


/* 始终是否循环 */

.infinite {
    animation-iteration-count: infinite;
}


/* 设置延迟执行时间 */

.delay-1s {
    animation-delay: 1s;
}
.faster{
    animation-delay: 800ms;
}
.delay-2s {
    animation-delay: 2s;
}

.delay-3s {
    animation-delay: 3s;
}

.delay-4s {
    animation-delay: 4s;
}

.delay-5s {
    animation-delay: 5s;
}


/* 设置动画执行时间长短 */

.fast {
    animation-duration: 800ms;
}

.faster {
    animation-duration: 500ms;
}

.slow {
    animation-duration: 3s;
}

.slower {
    animation-duration: 4s;
}
/* 弹跳 */

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    animation-name: bounce;
    transform-origin: center bottom;
}
/* 闪烁 */

@keyframes flash {
    /*0% 50% 100%时候 执行下面样式 */
    50% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}

.flash {
    animation-name: flash;
}


/* 3频率快闪 */

@keyframes flasher {
    0%,
    33%,
    66%,
    100% {
        opacity: 1;
    }
    16%,
    48%,
    82% {
        opacity: 0;
    }
}

.flasher {
    animation-name: flasher;
}
/* 抖动 */

@keyframes shake {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0px, 0);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    animation-name: shake;
}
/* 旋转 */
@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    /* 50% {
        transform: rotate(180deg);
    } */

    100% {
        transform: rotate(360deg);
    }
}.rotate{
    animation-name: rotate;
}
/* 渐隐 */
@keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.fadeOut{
    animation-name: fadeOut;
}