动画模块其他属性下（ animation-fill-mode 属性、连写格式）

最新推荐文章于 2023-09-30 22:14:38 发布

407指导员

最新推荐文章于 2023-09-30 22:14:38 发布

阅读量494

点赞数 1

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110355875

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

动画模块其他属性下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他属性下</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            animation-name: sport;
            animation-duration: 5s;
            position: absolute;
        }

        @keyframes sport {
            0% {
                left: 0;
                top: 0;
            }
            25% {
                left: 300px;
                top: 0;
            }
            50% {
                left: 300px;
                top: 300px;
            }

            75% {
                left: 0;
                top: 300px;
            }

            100% {
                left: 0;
                top: 0;
            }
        }

        .box2 {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: blue;
            animation-name: myRotate;
            animation-duration: 5s;
            animation-delay: 2s;
        }
        @keyframes myRotate {
            0% {
                transform: rotate(10deg);
            }
            50% {
                transform: rotate(40deg);
            }
            100% {
                transform: rotate(70deg);
            }
        }


    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

在这里插入图片描述

通过我们观察，动画是有一定的状态的

1.等待状体

2.执行状态

3.结束状态

animation-fill-mode 属性

规定动画在等待状态和结束状态的样式

其属性值是由逗号分隔的一个或多个填充模式关键词。

语法

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

forwards就规定动画完成后保持到最后一帧的画面

backwards就规定等待状态下，直接将画面换成第一帧，没有那种间断感，比如说从0%开始就是旋转50°，如果不设置该属性，会在第一帧从0°跳到50°，如果设置了等待状态直接变成第一帧50°

both是两个同时设置。

添加

animation-fill-mode: both;

在这里插入图片描述

连写格式

animation 属性

格式

animation: name duration timing-function delay iteration-count direction;

animation:动画名称动画时长动画运行速率动画延迟时长动画执行次数是否需要往返动画

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

除了 animation-play-state 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画连写</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            animation: move 3s linear 1s 2 alternate;
        }
        
        @keyframes move {
            from {
                margin-left: 0;
            }

            to {
                margin-left: 500px;
            }
        }


    </style>
</head>
<body>
<div></div>
</body>
</html>

在这里插入图片描述

连写格式的简写

animation: name duration

只要能构成三要素就可以执行动画，有动画名，设置动画样式有执行时间即可。

407指导员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动画模块其他属性下（ animation-fill-mode 属性、连写格式）

动画模块其他属性下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>其他属性下</title> <style> * { margin: 0; padding: 0; } .box1 { wi
复制链接

扫一扫