动画定义和调用

最新推荐文章于 2022-07-26 01:05:23 发布

头发还多

最新推荐文章于 2022-07-26 01:05:23 发布

阅读量165

点赞数

分类专栏： js学习内容记录文章标签： css3

本文链接：https://blog.csdn.net/qq_44935762/article/details/119021893

版权

js学习内容记录专栏收录该内容

56 篇文章 0 订阅

订阅专栏

动画的定义：

使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

动画调用：

定义动画之后，就可以使用animation属性调用动画

动画的执行次数

动画的第五个参数就是动画的执行次数
animation：r 1s linear 0s 3;
如果想永远执行可以写infinite
animation：r 1s linear 0s infinite;

alternate和forwards

如果想让动画的第2、4、6、、偶数次自动逆向执行，那么要加上alternate参数即可
animation:movelr 2s linear 0s infinite alternate;
如果想让动画停止在最后结束状态，那么要加上forwards
animation:changeToCircle 1s linear 0s forwards;

多关键帧动画：

在这里插入图片描述

实验代码：

<!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>动画的定义和调用</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            animation: r 1s linear 0s infinite;
        }
        @keyframes r{
            /* 起始状态 */
            form{
                transform: rotate(0);
            }
            /* 结束状态 */
            to {
                transform: rotate(360deg);
            }
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 自动逆行 */
            animation: z 1s linear 0s infinite alternate;
        }
        @keyframes z{
            /* 起始状态 */
            form{
                transform: translate(0);
            }
            /* 结束状态 */
            to {
                transform: translate(200px);
            }
        }
        .box3 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 停留在最后结束状态 */
            animation: w 1s linear 0s forwards;
        }
        @keyframes w{
            /* 起始状态 */
            form{
                border-radius: 0;
            }
            /* 结束状态 */
            to {
                border-radius: 50%;
            }
        }
        .box4 {
            width: 200px;
            height: 200px;
            /* 正着变一次反着变 */
            animation: we 5s linear 0s infinite alternate;
        }
        @keyframes we{
           0% {
               background-color: red;
           }
           20% {
               background-color: orange;
           }
           40% {
               background-color: yellow;
           }
           60% {
               background-color: green;
           }
           80% {
               background-color: greenyellow;
           }
           100% {
               background-color: blue;
           }
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>

</body>
</html>

头发还多

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动画定义和调用

动画的定义：使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀动画调用：定义动画之后，就可以使用animation属性调用动画动画的执行次数动画的第五个参数就是动画的执行次数animation：r 1s linear 0s 3;如果想永远执行可以写infiniteanimation：r 1s linear 0s infinite;alternate和forwards如果想让动画的第2、4、6、、偶
复制链接

扫一扫