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

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>
    评论 编辑记录

报告相同问题？

  • css3动画效果抖动解决方法
    2020-09-22 11:42
    然而，在使用CSS3进行动画设计时，常常会遇到动画抖动问题，这会严重影响动画的流畅性和用户的视觉体验。本文将详细介绍CSS3动画效果抖动问题的解决方法。 首先，我们来了解什么是CSS3动画抖动。在某些情况下，当...
  • css 动画 抖动,css3动画之上下抖动
    2021-08-03 21:20
    13142ads的博客 今天为大家介绍css3动画之上下抖动，有需要的朋友参考一下。代码如下：.common_animate:hover{animation-duration:1s;/*动画时间*/animation-fill-mode:both;/*播放后的状态*/animation-name:buzz-out;animation-...
  • 关于css的敲击抖动动画
    2024-08-20 10:36
    GGBOOM-HAHA的博客 2.在你需要它动的事件里面给它加个动画class，比如click,mouseover什么的。//看起来没有用，但是.../*左3到左0，不就是右敲击吗嗷嗷嗷*//* 添加显示时的抖动效果 *//* 定义抖动动画的关键帧 */3.给shacking加个动画。
  • 如何解决css动画抖动的问题
    2022-06-08 12:32
    xy_向阳的博客 在使用css做动画的时候，我们经常会遇到动画抖动的问题，你是怎么解决的？
  • css 动画 抖动,css3实现循环抖动等动画
    2021-08-03 21:21
    KabudoS的博客 CSS3抖动/*实现图片旋转，当鼠标移动上去就停止*//*实现的是过渡*/img:hover{width:1000px;/*开始之前等待两秒*/transition:width 10s linear 0s;/*Firefox 4*/-moz-transition:width 10s linear 0s;/*Safari and ...
  • CSS动画出现抖动的问题
    2023-05-12 14:06
    Little_naive的博客 1. css动画出现抖动情况有很多, 我查阅了... 但是开启硬件加速同时也会产生动画抖动.这种情况下我通过以下办法去做的。2. 动画出现了重复的布局计算和重绘, 像这种情况我采用了以下方法处理。把上面两个属性配合使用。
  • animate.css 是一个 CSS3 动画库，它预设了抖动、闪烁、弹跳等多种动画效果
    2024-02-08 15:48
    CSS3 动画是通过 CSS3 的 `transition` 和 `animation` 属性实现的。`transition` 可以定义元素在特定属性改变时的过渡效果，而 `animation` 则可以定义更复杂的自定义动画序列。Animate.css 将这些复杂的 CSS 规则...
  • CSS动画文字块抖动问题
    2023-09-06 13:19
    伯牙哦的博客 当加上will-change: transform;这个属性时，文字抖动就会消失，这段代码的作用为。动画是平移效果，当平移时，文字位置会发生变化，这是文字块的css。属性来预定义元素的变化，以避免重排。
  • CSS3实现跳动的动画效果
    2020-12-02 05:05
    在CSS3中，我们可以利用各种新的属性和方法来创建丰富的动画效果。本示例中，我们将探讨如何通过CSS3实现一个跳动的动画效果。这个效果由两部分组成：元素的阴影部分（`::before`伪元素）和元素本身（`::after`伪...
  • 使用css animation动画做边框闪动效果
    2022-03-15 12:03
    IChenSY的博客 使用css animation动画做闪动效果 在拖拽div节点时，给div节点添加diagramTop-item-click样式，使用css animation动画0.5秒执行一次。 css样式 .diagramTop-item { width: 102px; height: 32px; background-color...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 4月12日