CSS3动画学习笔记



CSS3动画需@keyframes规则和animation属性一起配合使用才能生效,@keyframes规则定义了一组样式,它设置了多个关键点时元素的样式(也称关键帧),animation属性定义了动画使用的规则、时长、速度等信息。

1、@keyframes规则

@keyframes规则定义了一组样式,它设置了多个关键点时元素的样式,它有两种写法:

@keyframes styles {
    /*0%、50%、100%分别对应动画0%、50%、100%时的状态*/
    0% {left: 0px;}
    50% {left: 180px;}
    100% {left: 200px;}
}

或者:

@keyframes styles {
    /*from为动画开始时的状态,to为动画结束时的状态*/
    from {left: 0px;}
    to {left: 200px;}
}

from等同于0%,to等同于100%,显然0%-100%形式可以更加精确的控制动画。为能兼容各种浏览器,推荐写法:

@keyframes styles {
    0% {left: 0px;}
    100% {left: 200px;}
}
@-webkit-keyframes styles {
    0% {left: 0px;}
    100% {left: 200px;}
}
@-moz-keyframes styles {
    0% {left: 0px;}
    100% {left: 200px;}
}

2、animation属性

animation属性定义了动画使用的规则、时长、速度等信息,animation的属性有:

引用内容 引用内容
animation-name:指定要绑定到的关键帧的名称;
animation-duration:指定动画需要多少秒或毫秒完成;
animation-timing-function:设置动画将如何完成一个周期;
animation-delay:设置动画在启动前的延迟间隔;
animation-iteration-count:定义动画的播放次数;
animation-direction:指定是否应该轮流反向播放动画;
animation-fill-mode:规定当动画不播放时,要应用到元素的样式;
animation-play-state:指定动画是否正在运行或已暂停;

animation属性写法如下:

.todo {
    animation-name: styles;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

animation属性支持简写:

引用内容 引用内容
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation属性简写的写法:

.todo {
    animation: styles 3s linear forwards;
}

同样为能兼容各种浏览器,推荐写法:

.todo {
    animation: styles 3s linear forwards;
    -webkit-animation: styles 3s linear forwards;
    -moz-animation: styles 3s linear forwards;
}

完整示例:

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>CSS3 Animation</title>
    <style>
        div{
            width: 10px;
            height: 10px;
            background-color: #000;
            position: relative;
        }

        @keyframes styles {
            0% {left: 0px;}
            100% {left: 200px;}
        }
        @-webkit-keyframes styles {
            0% {left: 0px;}
            100% {left: 200px;}
        }
        @-moz-keyframes styles {
            0% {left: 0px;}
            100% {left: 200px;}
        }

        .todo {
            animation: styles 3s linear forwards;
            -webkit-animation: styles 3s linear forwards;
            -moz-animation: styles 3s linear forwards;
        }
    </style>
</head>
<body>
    <div class="todo"></div>
</body>
</html>

相关链接

[1].CSS3 动画:https://www.runoob.com/css3/css3-animations.html
[2].@keyframes 规则:https://www.runoob.com/cssref/css3-pr-animation-keyframes.html
[3].animation属性:https://www.runoob.com/cssref/css3-pr-animation.html

评论: 0 | 引用: 0 | 查看次数: 1136
发表评论
登录后再发表评论!