CSS动画

动画
1) 介绍

1. 由于当前动画的技术不太稳定，要考虑浏览器的兼容性问题
2. 写动画是不需要任何的js基础
3. 通过@keyframes来定义动画，规定在一定时间内，改变css的属性
4) 语法
    1. 定义动画【在style标签内部定义】
        @keyframes 动画名 {
            from {} // from是关键帧，动画开始的位置
            to {}   // to是关键帧，动画结束的位置
        }
        ==>等价于
        @keyframes 动画名 {
            0% {}
            100% {}   
        }

        @keyframes 动画名 {
            0% {}
            25% {}
            50% {}
            75% {}
            100% {}   
        }

        使用百分数的好处，不仅仅可以打上开始位置和结束位置的关键帧，也可以在某一个需要地方设置关键帧

1. 使用动画

animation-name 动画名称(@keyframes中定义的动画名)

animation-duration 动画持续的时间 秒

animation-delay 动画延迟的时间 秒

也就是当前文件在浏览器首次打开后，多少秒再执行动画

animation-direction 动画的方向

normal 正常播放动画
reverse 反方向
alternate 交替反转【需要动画的次数】 默认1次

animation-iteration-count 动画的次数

infinite 无限次
n【整数】 规定动画执行n次

animation-timing-function 动画的速度曲线

linear  线性【匀速】
ease-in 先慢后快
ease-out 先快后慢
ease-in-out    先慢后快再慢
steps(5) 逐帧动画

animation-fill-mode 动画填充

forwards    动画结束时，元素停靠在结束位置
backwards  默认  动画结束时，元素停靠在开始位置

animation-play-state 动画的播放与暂停

running 播放
paused 暂停
可以实现光标悬浮到元素上之后，元素暂停动画的播放

animation 速写:

animation: animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode， animation-play-state 

2、动画库animate.css

1) 下载
    1. 通过npm【包管理机制】
        > npm install --save animate.css
            element-ui
            axios
            jQuery
            boostrap
    2. 通过cdn引入在线链接【使用需要联网】
        bootcdn
        xxxcdn
        <link href=""></link>
2) 在需要使用的标签上添加类名
    <div class="animate__animated animate__swing"></div>
    

3.过渡 transition

1) 介绍
    1. transition始终需要触发，一般通过:hover
    2. transition不需要设置关键帧

    简单的动画效果一般采用过渡，复杂的动画效果一般采用动画
2) 语法
    transition-property 过渡的属性名
        可以不设置属性名 none
        可以设置一个属性名 width
        可以设置多个属性名 width,height...
        可以设置所有的属性名 all
    transition-duration 过渡的时间
        秒/毫秒  1s / 1000ms
    transition-delay    过渡延迟的时间
        秒/毫秒  1s / 1000ms
    transition-timing-function  过渡的速度曲线
        ease
        ease-in
        ease-out
        ease-in-out
        linear【默认值】
        steps
transition 速写：
transition-property transition-duration transition-timing-function transition-delay
例如： transition: all 3s steps(8) 2s;

4.变形 transform

1) 语法
    div {
        transform:xxx();
        transform-origin:center;
    }
    transform 对元素进行某种类型的变形
    transform-origin 元素变形的原点
center--默认
left top
2) 分类
    1. 旋转 rotate
        rotate(45deg)=rotateZ()
        rotateX(angle) 
        rotateY(angle)
        rotateZ(angle)  
    2. 倾斜 skew
        skewX(angle)
        skewY(angle)
    3. 缩放 scale
        scale(2) x,y轴同时缩放  （中心缩放）
        scale(x,y)
        如果数值比1小，则缩小，如果比1大，则放大
    4. 移动 translate
        translate(x)  ==  translateX()
        translate(x,y)
        translateX(100px)
        translateY()