html - CSS3 动画意外晃动-6ren

html - CSS3 动画意外晃动

转载作者：太空宇宙更新时间：2023-11-04 11:21:25

25

4

我正在尝试使用 transform: rotate(-33deg) 为大致对 Angular 线放置 -33 度的矩形 div 设置动画。然后将其动画化以沿对 Angular 线移动位置，假设向左移动 200 像素，向下移动 100 像素。

发生的事情是，它按预期移动，但它的移动就像是向左移动，然后向左向下移动，然后无限向下移动，而不是沿对 Angular 线移动，这使得盒子看起来在晃动，并且当它移动时，它的大小大约改变了大约 1px，如果你看紧贴着盒子。

有没有办法阻止这种意外的震动效果？

JSfiddle Demo

<body>
    <div id="wrapper">
        <div class="banner bner_01">
            <div class="box2">
                <div class="text"> JSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLEJSFIDDLE</div>
            </div>
        </div>
    </div>
</body>

body{
    background: black;
    overflow: hidden;
}

#wrapper{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding-bottom: 56.25%;
    background: white;
    overflow: hidden;
}
.banner {
    overflow: hidden;
    position: absolute;
    height: 16.7%;
    width: 300%;
    background: rgb(247, 209, 11);
    box-shadow: 0px 13px 4px rgba(0, 0, 0, 0.4);
    color:black;
}
.bner_01 {
    left: -15%;
    top: 49%;
    transform: rotate(-5.9deg);
    animation: bner_01 5s infinite linear;
}
@keyframes bner_01 {
    0% {
        left: -15%;
        top:49%;
    }
    100% {
        left: -126.87%;
        top: 69.6%;
    }
}
.text{
    width:100%;
    height: 100%;
    vertical-align: middle;
    display: flex;
    align-items: center;
    overflow: hidden;
}

最佳答案

您可以使用变换来为元素设置动画。如果先旋转，然后平移动画将平滑地沿轴移动。

这是一个以您的 fiddle 为基础的粗略示例: https://jsfiddle.net/mbotcayh/1/

相关动画代码:

@keyframes bner_01 {
    0% {
        transform: rotate(-5.9deg) translateX(0%);
    }
    100% {
        transform: rotate(-5.9deg) translateX(-50%);
    }
}

关于html - CSS3 动画意外晃动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32735282/

25

4

0

文章推荐： Java Swing MigLayout 更改 revalidate()/repaint() 上的格式

文章推荐： linux - 带星号的变量

文章推荐： javascript - PHP : How to animate still images by clicking (or hovering)

swift - 当我向下滚动时 viewController 晃动
大家好，当我尝试向下 ScrollView Controller 时遇到问题，我找不到错误。在其他 View Controller 中没有这样的错误...我该如何修复它？ scrollView
Css 过渡 div 晃动
为什么当我使用绝对位置和百分比宽度时，当我将鼠标悬停在上方的 div 上时会出现此故障？有例子。我在更复杂的网站上遇到了这个故障。 text .box { width: 50%;
html - 如何纠正悬停 css 效果颤抖/晃动？
我在我的网站上制作了一个悬停效果，它引用了一张不透明度为 65% 的原始图片。问题是，这只会发生一次，只有我第一次将它悬停时，一切都会摇晃/颤抖，但随后一切都会开始正常工作。也许我的悬停代码中缺少某些

首页

博学

6Ren·AI

商城

html - CSS3 动画意外晃动