returnture 2022-04-12 14:49 采纳率: 66.7%
浏览 149

css animation动画抖动


<!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>Document</title>
    <style>
        .box {
            width: 450px;
            height: 450px;
            margin: 100px auto;
        }

        .box1 {
            height: 450px;
            background-image: url(./2_2_2.png);
        }

        .animation1 {
            animation: moveimg 4s linear;
        }



        @keyframes moveimg {
            0% {
                width: 0px;
            }

            50% {
                width: 50%;
            }

            100% {
                width: 100%;
            }
        }


    </style>
</head>

<body>
    <div class="box">
        <div class="box1 animation1"></div>

    </div>
</body>

</html>
  • 写回答

1条回答 默认 最新

  • ··零·· 2022-04-12 15:10
    关注

    如果要无限重复动画的话，修改你的22行

            .animation1 {
                animation-name: moveimg;
                animation-duration: 3s;
                animation-iteration-count: infinite;
        }

    上面只是宽度循环变化，如果换成图片总体放大循环 代码如下：

    
<!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>Document</title>
    <style>
        .box {
            width: 450px;
            height: 450px;
            margin: 100px auto;
        }
 
        .box1 {
            height: 450px;
            position: relative;
        }
 
        .animation1 {
                animation-name: moveimg;
                animation-duration: 3s;
                animation-iteration-count: infinite;
        }
 
        @keyframes moveimg {
            0% {
                transform: scale(0);
            }
 
            50% {
                transform: scale(.5);
              
            }
 
            100% {
                transform: scale(1);
          
            }
        }
 
 
    </style>
</head>
 
<body>
    <div class="box">
        <div class="box1 ">
            <img class="animation1" src="./2_2_2.png">
        </div>
 
    </div>
</body>
 
</html>
    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 4月12日

悬赏问题

  • ¥15 网站设计与开发职业技能大赛试题
  • ¥20 在使用CESM2.2.0模型进行case.submit过程中出现如下错误(关键词-Map)
  • ¥15 有办法改变通过wifi进入的网站的设置吗
  • ¥15 所以到底怎么算！算到凌晨五点都算不出来！
  • ¥15 label_studio
  • ¥15 请教如何phython发邮件
  • ¥15 linux系统安装问题
  • ¥15 路径规划如何采用矢量法让他们尽量在一个方向
  • ¥15 crypto 一道rsa解密题
  • ¥15 survIDINRI已将生存时间转为数值变量，仍错误 Time variable is not numeric。