【web前端开发 | CSS3】动画

动画 （经常使用）

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

1、定义动画：使用@keyframes定义动画

    @keyframes 动画名称 {
        0%{

        }
        100%{

        }
    }

2、使用动画：给当前标签设置一些样式来指定使用的动画

描述	属性
指定动画的名称(必需)	animation-name
指定动画的时间(必需)	animation-duration
指定动画的速度	animation-timing-function ： linear-匀速 、 steps(步数)
指定动画的执行次数	animation-iteration-count
指定是否可做逆向动画	animation-direction ：alternate-可逆向播放
指定保持动画结束时的状态	animation-fill-mode ： backwards-标签保持在动画开始的状态，forwards-标签保持在动画结束的状态
指定动画延迟执行的时间	animation-delay
指定动画的播放状态 暂停-播放	animation-play-state ：paused-暂停 、running-播放

举例：

    <style>
        /* 1. 用keyframes 定义动画（类似定义类选择器） */
        @keyframes move {
            0% {
                transform: translate(0px) rotate(0deg) scale(0);
                background-color: tomato;

            }

            100% {
                transform: translate(1900px) rotate(360deg) scale(3);
                background-color: turquoise;
            }
        }

        div {
            float: left;
            margin-top: 100px;
            width: 200px;
            height: 200px;
            border: 2px solid transparent;
            border-radius: 50%;

            /* 元素使用动画 */
            animation: move 6s ease 2s 3 alternate backwards;
        }
    </style>

复合写法：

animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画等待或者结束的状态;