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动画持续时间,单位秒

运行效果

三.动画中常用的属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性,除了animation-play-state属性.
animation-name	规定@keyframes动画的名称.
animation-duration	规定一个动画周期所需要的时间
animation-timing-function	规定动画的速度曲线,默认ease
animation-delay	规定动画何时开始,默认0
animation-iteration-count	规定动画被播放的次数,默认是1,还有infinite
animation-direction	规定动画是否在下一周期逆序播放,默认normal,alternate逆序播放
animation-play-state	规定动画是否正在运行或暂停.默认"running",还有"pause"
animation-fill-mode	规定动画结束后,保持forwards回到起始backwards

四.速度曲线调节

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

值	描述
linear	动画从头到尾的速度是相同的
ease	默认,动画以低速开始,然后加快,最后变慢
ease-in	动画以低俗开始
ease-out	动画以低俗结束
ease-in-out	动画以低俗开始和结束
steps()	指定了时间函数中的间隔数量(步长)