欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS3之animate动画

程序员文章站 2022-03-01 20:54:09
...

一、@keyframes 规则：定义一个关键帧动画

①当用 @keyframes 创建动画时，把它绑定到一个选择器，否则动画不会有任何效果
②用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。里面可以改变背景色、位置、形状大小。

@keyframes move {
            0% {
                left: 0px;
                top: 0px;
                width: 100px;
            }
            50% {
                left: 500px;
                top: 0;
                width: 300px;
            }
            100% {
                left: 500px;
                top: 500px;
                width: 100px;
            }
        }

二、动画属性

注意：必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。


1、animation-name 指定要绑定到选择器的关键帧的名称

 <style>
         div{
            position: fixed;
            animation:move 2s linear 3s infinite alternate-reverse;
        }
        /* 定义关键帧 */
        @keyframes move{  }
    </style>

2、animation-duration 动画指定需要多少秒或毫秒完成
3、 animation-timing-function 设置动画将如何完成一个周期
ease（默认：慢快慢）linear（匀速）ease-in（低速开始）ease-out（低速结束）ease-in-out （以低速开始和结束）
4、animation-delay 设置动画在启动前的延迟间隔。
5、animation-iteration-count 定义动画的播放次数。
6、animation-direction 指定是否应该轮流反向播放动画。
①reverse：反向运动，一直从100%-0%。
②alternate： 正向往返运动 从0% - 100% 第二次动画从100% - 0% 第三次 0% -100%
③alternate-reverse: 反向往返运动 从100% - 0% 第二次动画从0% - 100% 第三次 100% - 0%
7、animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
①forwards: 希望停止在最后一个关键帧的位置上
② backards: 希望第一个关键帧立即作用
③both: 希望第一个关键帧立即作用 希望动画结束停止在最后一个关键帧的位置
8、animation-play-state 指定动画是否正在运行或已暂停。

三、练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animate动画</title>
    <style>
        .demo{
            width:100px;
            height:100px;
            border:1px solid black;
            background-color:aqua;
            line-height:100px;
            text-align:center;
            position: fixed;
            animation:move 2s linear 3s infinite alternate-reverse;
            /* 动画： 关键帧 运动一周所花的时间  速率曲线 动画何时开始 运动次数 反向往返运动 */
        }
        /* 定义关键帧 */
        @keyframes move{
            0% {
                left:0;
                top:0;
                width:100px;
            }
            25% {
                left:300px;
                top:0;
                width:100;
            }
            50% {
                left:0;
                top:300px;
                width:100px;
            }
            75% {
                left:300px;
                top:300px;
                width:100px;
            }
            100% {
                left:0;
                top:0;
                width:100px;
            }
        }
    </style>
</head>
<body>
    <div class="demo">demo</div>
</body>
</html>
相关标签： css3

上一篇： css3的动画属性

下一篇： jquery.animate.js调用Animate.css实现强大的css3动画

推荐阅读