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

运行效果

css 动画 keyframes_过渡效果

三.动画中常用的属性

属性

描述

@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()

指定了时间函数中的间隔数量(步长)


阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: CSS