前端之HTML5，CSS3（五）

　　动画(animation)

　　动画是使元素从一种样式逐渐变化为另一种样式的效果。通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

　　动画的属性

基本语法：选择器 {动画名称 动画持续时间 动画运动曲线 动画开始时间 动画播放次数 动画是否倒叙播放}。在设置动画属性之前，需要使用@keyframes 规则对动画样式进行设定，基本格式为 @keyframes 动画名称 {from{样式1;} to{样式2;}}。设定@keyframes规则后，通过动画名称绑定到需要制作动画的元素上，生成动画。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
属性 描述
@keyframes 规定动画样式
animation 动画属性连写
animation-name 规定@keyframes动画名称
animation-duration 规定动画完成一次播放花费的时间，默认为0
animation-timing-function 规定动画的时间速度曲线，默认为ease
animation-delay 规定动画开始播放时间，默认为0
animation-iteration-count 规定动画播放次数,默认为1
animation-direction 规定动画下一次播放是否倒叙播放，默认为normal
animation-play-state 规定动画状态时运行或者暂停，默认为running

　　@keyframes

　　规定动画运动规则，声明动画内容，用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%，0% 是动画的开始，100% 是动画的完成。使用百分比可以更加细化时间以及动画样式。

@keyframes my-animation {
            from {
                margin-left: 0;  /*开始在位置0*/
            }

            to {
                margin-left: 1000px; /*结束结束在横向位置1000px*/
            }
        }
        /*或者*/
        @keyframes my-animation {
            0% {
                margin-left: 0; /*开始在位置0*/
            }
            25% {
                margin-left: 250px; /*1/4的播放时间在横向位置250px*/
            }
            50% {
                margin-left: 500px; /*1/2的播放时间在横向位置500px*/
            }
            75% {
                margin-left: 750px; /*3/4的播放时间在横向位置750px*/
            }
            100% {
                margin-left: 1000px; /*结束时间在横向位置1000px*/
            }
        }

　　animation

　　动画属性连写，连写顺序为：动画名称(animation-name) 动画持续时间(animation-duration) 动画运动曲线(animation-timing-function) 动画开始时间(animation-delay) 动画播放次数(animation-iteration-count) 动画是否倒叙播放(animation-direction)。其中animation-name和animation-duration为必须属性，不能缺省，其他属性可以不必要可以省略。

　　animation-name

　　动画名称可以自行设定，但是一定要注意声明(@keyframes部分)和调用部分(animation部分)的动画名称一致。

　　animation-duration

　　animation-duration 属性定义动画完成一个周期所需要的时间，以秒(s)或毫秒(ms)计。属性值为ns或者nms，其中n为非负数，当n为0时，无动画效果。

　　animation-timing-function

　　动画变化的速度曲线，属性值有：linear(匀速)，ease(慢-快-慢)，ease-in(慢-快)，ease-out(快-慢)，ease-in-out(慢-快-慢)...

　　animation-delay

　　定义动画开始前等待的时间，以秒或毫秒计。可选属性，默认时间为0s开始。

　　animation-iteration-count

　　定义动画的播放次数，默认为1次。可以设置属性值为infinite，表示播放无限次数。

　　animation-direction

　　定义是否应该轮流反向播放动画，属性值：normal(不倒序播放)，alternate(倒序播放)。注意，设置倒序播放时，动画正序播放和倒序播放一遍，播放次数为2。

　　animation-play-state

　　规定动画正在运行还是暂停，属性值：running(播放状态)，paused(暂停状态)。一般在JS中使用该属性，设定动画播放或者暂停。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动画-测试</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            animation: move 2s ease 0s infinite alternate;
        }
        @keyframes move {
            from {
                margin-left: 0;
            }
            to {
                margin-left: 1000px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　效果自行测试。

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄