动画、过渡与变形

动画

1.定义动画
  使用 @keyframes
  关键帧：1)关键字  from ... to ...
                 2)百分比  0% ~ 100%

​

        @keyframes a_color {
            from{
                color: #333;
            }
            to {
                color:  red;
            }
        }
        @keyframes a_width {
            0% {
                width: 100px;
                background-color: aqua;
            }
            50% {
                width: 200px;
                background-color: blueviolet;
            }
            100% {
                width: 100px;
                background-color: blue;
            }
        }

[点击并拖拽以移动]
​

2.配置动画
    1）animation-name    动画名字
            可以与@keyframes中定义的动画名字绑定

    2）animation-duration       动画持续时间
            动画完成一个循环所需的时间长度。
            单位s 、ms ,默认值为0s 。

    3）animation-iteration-count    动画迭代次数，动画重复的次数。
            <number> ：默认值为1，不能为负数，可以为小数，比如0.5表示播放一半
            infinite ： 无限循环

    4）animation-delay    动画延迟执行时间
            动画延迟，即元素在加载成功后到动画运行前的时间。
            单位为s 、ms ,默认值为0s，即动画加载成功后立刻运行。
            例如：animation-delay: 3s;    

    5）animation-direction    动画方向
            normal ：默认值，正常播放    
            reverse ：播放帧的顺序反转，播放的起点为帧的结束
            alternate ：播放帧的顺序交替反转，即第一次播放从帧的开始播放到帧的结束，第二次播放就从帧的结束播放到帧的开始，与此同时，速度曲线也交替反转。反转时ease-in交替为ease-out                
            alternate-reverse ：与alternate类似，不过第一次播放时候需要反转。     

    6）animation-fill-mode    填充模式
            none        不改变默认行为，默认值
            forwards    在动画结束后，目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值
            backwards    在延迟时间内，目标将保留在执行期间所遇到的第一个关键帧所设置的计算值。
            both        向前和向后填充模式都被应用。

    7） animation-timing-function    动画的速度曲线
            ease        默认值，先快后慢
            linear        线性增长，匀速
            ease-in     先慢后快
            ease-out    先快后慢
            ease-in-out    先慢后快再慢

    8）animation-play-state    暂停/恢复
        动画的状态，可以通过JavaScript查询该属性以确定该动画目前是运行还是停止，或者可以通过JavaScript来设定动画的运行状态。
            running     运行状态
            paused      暂停状态

3.动画库
    1）安装 把源码下载到本地
    2）使用
        <div class="animate__animated animate__bounce">hello</div>

css过渡 (transition)

    div {
    transition: <property> <duration> <timing-function> <delay>;
    }
 
    transition
        transition-property    过渡属性
        transition-duration    持续时间
        transition-timing-function     持续时间
        transition-delay       过渡延迟

        过渡需要触发，不是所有的属性都能够触发

css变形 (transform)

    div {
    transform: xxx();
    transform-origin:center;
    }
 
    旋转 (rotate)
        rotateX (angle)   绕X轴旋转，例如单杠运动  30deg
        rotateY (angle)   绕Y轴旋转，例如钢管舞运动
        rotateZ (angle)   绕Z轴旋转，例如旋转盘。
        rotate (angle)    与rotateZ()一致。

    倾斜 (skew)
        skew(ax,ay) 函数表示对元素的剪切或者扭转，
        ax表示水平方向的扭转，
        ay表示垂直方向的扭转，
        使用skewX(ax) 和skewY(ay)   

    缩放（scale）               scale(0.5,0.5)
        scale() 函数能够更改元素的大小，scale变换的是通过矢量来实现。
        它的坐标定义了每个方向上的缩放比例。
        如果两个向量的坐标是相等的，缩放是均匀的
        scale(0,2)  隐藏函数

    移动（translate）
        translate(tx, ty) 函数能够移动元素。
        tx为元素在水平方向上移动的距离，
        ty为元素在垂直方向上移动的距离。