web基础·CSS3动画基本使用@keyframes,animation

@keyframes 无需鼠标触发，加载页面时即刻启动（自启动）

                      和animation一起搭配使用

@keyframes和animation的使用方法是：

@keyframes后面加动画名，来设置不同阶段的不同状态

animation-name后加动画名，来设置这个持续的时间、进行的速度、何时开始（页面加载后开始还是开始后延迟开始）、执行次数或是否重复执行、是否反方向播放、是否回到起始状态、是否运行或暂停等。

例如：

<style>       
        /*move就是动画名称*/
        @keyframes move {
        /* 0%就是开始时的状态 */
            0% {
                transform: translateX(0);
            }
        /* 100%就是结束时的状态 */
            100% {
                transform: translate(200px, 200px);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;

            /*  animation-name指向@keyframes声明的动画名称 */
            animation-name: move;
            /* 从0%~100%的动画持续时间 */
            animation-duration: 2s;
        }
</style>

那对于从0%~100%的可以，其实也是可以分段设置的

例如：让div来走一个矩形，矩形有四个角，四个角就可以作为四个位置

 <style>
        @keyframes move {
            0% {
                transform: translate(10, 10);
            }
            25% {
                transform: translate(400px, 10px);
            }
            50% {
                transform: translate(400px, 300px);
            }
            75% {
                transform: translate(10px, 300px);
            }
            100% {
                transform: translate(10px, 10px);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: pink;
            /*动画名称*/
            animation-name: move;
            /*动画持续时间4s，一共有4个阶段，也就是每个阶段1s*/
            animation-duration: 4s;
        }

animation-name:        动画名称

animation-duration:5s;        动画持续时间

animation-timing-function:ease;        动画运动曲线（ease:低速开始-中间加快-结束前减速）

linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

                Firefox: 中        -moz-animation-timing-function:

                Safari 和 Chrome中        -webkit-animation-timing-function:

animation-delay:1s;        何时开始/没有该属性表示页面加载时开始动画

animation-iteration-count:infinite;        重复次数/infinite表示无限次数（默认1次）

animation-direction:alternate;        是否需要反方向播放（默认是normal不需要）

animation-fill-mode:forwards;        停留在结束状态

                                                      （需要把重复执行去掉，重执的权值大于状态规定）

animation的综合写法：

animation:name  duration  timing-function  delay  iteration-count  direction  fill-mode;

动画简写的话，name和duration是必不可少的

例如：animation:move  3s  ease  1s  1  normal  forwards;

animation-play-state:规定动画是否运行或暂停

需要单独写，不包括在animation的综合写法中;        paused表示暂停

<style>
    div:hover {
                /* 规定动画是否运行或暂停 */
                animation-play-state: paused;
    }
</style>