CSS3 动画意外抖动答案

【问题标题】：CSS3 animation unintended shakingCSS3 动画意外抖动
【发布时间】：2015-09-23 19:17:23
【问题描述】：

我正在尝试使用transform: rotate(-33deg) 为大约-33 度对角定位的矩形 div 设置动画，然后将其设置为对角移动位置，例如向左移动 200 像素，向下移动 100 像素。

发生的情况是，它按预期移动，但它的移动就像是向左然后向左然后向下无限移动，而不是沿对角线移动，这使得盒子看起来在晃动，如果你看它，它的大小大约会改变大约 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;
}

【问题讨论】：

请提供一个有效的 jsfiddle 示例
你试过`animation-duration: 1s;`吗？
这里是 jsfiddle jsfiddle.net/175qqteg，如果你仔细观察，你会发现盒子像火车一样剧烈地摇晃
更新了红线，使其更加明显！！ jsfiddle.net/175qqteg/2

标签： html css css-animations

【解决方案1】：

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

下面是一个粗略的例子，使用你的小提琴作为基础： https://jsfiddle.net/mbotcayh/1/