Question

我正在尝试使用transform: rotate(-33deg)对角放置大约-33deg的矩形div动画，然后设置动画以对角移动位置，让我们说向左移动200px，向下移动100px。

发生的事情是，它按预期移动，但它移动就好像它向左移动然后向左移动然后向下无限移动而不是对角移动这使得框看起来摇晃并且当它移动时它的大小大约改变大约1px盒子紧密。

有没有办法阻止这种意想不到的摇晃效果？

<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;
}

Answer 1

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

以下是使用小提琴作为基础的粗略示例： https://jsfiddle.net/mbotcayh/1/

相关动画代码：

[Serializable]
sealed class FactoryClassAttribute : Attribute {
    public FactoryClassAttribute(Type type) {
        Type = type;
    }

    public Type Type { get; set; }

    public static FactoryClassAttribute From(Enum value) {
    {
        var type = value.GetType();
        return type.GetField(Enum.GetName(type, value))
            .GetCustomAttributes(false)
            .OfType<FactoryClassAttribute>()
            .FirstOrDefault();
    }    
}

CSS3动画无意中晃动

1 个答案: