css 动画 keyframes

动画是CSS3中最具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果. 相比较过渡效果,动画可以实现更多变化,更多控制, 连续播放等效果.

动画的基本使用:

步骤分为两步:
1.定义动画
2.调用动画

一.定义动画(类似定义类选择器)

@keyframes move {
            /*动画开始*/
            from {
                transform: translateX(0px);
            }
            25% {
                transform: translate(1000px,0px);
            }
            50% {
                transform: translate(1000px,500px);
            }
            to {
                transform: translate(0px,500px);
            }
        }

代码中的keyframes也叫做关键帧
代码中的百分比就是时间的划分.

代码里的0%和100%叫做动画序列

0%是动画的开始,100%是动画的完成.这样的规则就是动画序列.
在@keyframes中规定某项css样式,就能创建由当前样式逐渐改变为新样式的动画效果.
动画是使元素从一种样式逐渐变化为另一种样式的效果,您可以改变任意多的样式任意多的次数.
用百分比来规定动画发生的事件,或用关键字from和to,等同于0%和100%.

二.调用动画

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /*调用动画*/
            animation-name: move;
            /*持续时间*/
            animation-duration: 4s;
            /*运动曲线*/
            animation-timing-function: ease;
            /*开始时间*/
            animation-delay: 1s;
            /*循环次数*/
            animation-iteration-count: 1;
            /*是否逆向播放*/
            animation-direction: alternate;
            /*结束位置*/
            animation-fill-mode: forwards;
        }

        div:hover {
            animation-play-state: paused;
        }

animation-name调用的动画的名称

animation-duration动画持续时间,单位秒

运行效果

三.动画中常用的属性

四.速度曲线调节

animation-timing-function:规定动画的速度曲线,默认ease