关于animation-fill-mode的两个例子

最新推荐文章于 2023-02-15 16:49:29 发布

richest_qi

最新推荐文章于 2023-02-15 16:49:29 发布

阅读量159

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/117792173

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

下面是关于animation-fill-mode 的两个例子。

第一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-fill-mode</title>
    <style>
        .ball{
            width: 200px;
            height: 200px;
            background: red;
            border-radius: 50%;
            margin: 10px;
        }
        @keyframes myAnimation{
            to{
                background: pink;
                transform: translateX(500px) scale(.5);
            }
        }
        .doAnimation{
            animation: myAnimation 2s;
        }
        .doAnimation2{
            animation: myAnimation 2s forwards;
        }
        .doAnimation3{
            animation: myAnimation 2s backwards;
        }
    </style>
</head>
<body>
    <div class="ball doAnimation"></div>
    <div class="ball doAnimation2"></div>
    <div class="ball doAnimation3"></div>
</body>
</html>

在这里插入图片描述

第二个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation-fill-mode</title>
    <style>
        .ball{
            width: 150px;
            height: 150px;
            background: red;
            border-radius: 50%;
            margin-bottom: 20px;
        }
        @keyframes myAnimation{
            from{
                background: blue;
            }
            to{
                background: pink;
                transform: translateX(500px) scale(.5);
            }
        }
        .doAnimation{
            animation: myAnimation 2s 3s;
        }
        .doAnimation2{
            animation: myAnimation 2s forwards 3s;
        }
        .doAnimation3{
            animation: myAnimation 2s backwards 3s;
        }
        .doAnimation4{
            animation: myAnimation 2s both 3s;
        }
    </style>
</head>
<body>
    <div class="ball doAnimation"></div>
    <div class="ball doAnimation2"></div>
    <div class="ball doAnimation3"></div>
    <div class="ball doAnimation4"></div>
</body>
</html>

在这里插入图片描述

参考文章

理解animation-fill-mode属性

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于animation-fill-mode的两个例子

下面是关于animation-fill-mode 的两个例子。第一个例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
复制链接

扫一扫

专栏目录