анимация CSS3 непреднамеренное встряхивание

Я пытаюсь анимировать прямоугольный div, расположенный по диагонали примерно -33deg с использованием transform: rotate(-33deg), затем анимируем это, чтобы переместить позицию по диагонали, допустим, 200px влево и 100px вниз.анимация CSS3 непреднамеренное встряхивание

Что происходит, он движется так, как предполагалось, но движется так, как будто он двигается влево, а затем вниз, а затем бесконечно, а не по диагонали, что заставляет коробку выглядеть дрожащей и менять ее размеры примерно на 1 пиксель, когда он движется, если вы смотрите на коробке близко.

Есть ли способ остановить этот непреднамеренный встряхивающий эффект?

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

источник

2015-09-23 Paul

просьба представить рабочий jsfiddle пример – xeraphim

Вы пробовали 'анимация-продолжительность: 1s;' ? – CodeRomeos

вот jsfiddle https://jsfiddle.net/175qqteg/, если вы присмотритесь, вы увидите, что коробка трясет ужасно, как поезд – Paul

Вы можете анимировать элементы с помощью преобразований вместо этого. Если вы сначала повернете, то трансляция анимации будет перемещаться вдоль оси плавно.

Вот грубый пример, используя вашу скрипку в качестве основы: https://jsfiddle.net/mbotcayh/1/

Соответствующий код анимации:

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

источник

2015-09-23 11:03:56 Marcelo

wow так гладко, спасибо вам большое! – Paul

анимация CSS3 непреднамеренное встряхивание

ответ

Смежные вопросы