2 transform для одного объекта

Question

Возможно сделать 2 transform для одного объекта? Делаю анимацию используя transform. Необходимо сделать постоянное вращение, но движение по оси один раз. Первое сделал, а как втрое подключить не знаю. Из HTML разметки только один div. Учусь анимировать объекты на чистом проекте.

.x_a {
  width: 136px;
  height: 137px;
  background-image: url(https://lh6.googleusercontent.com/-J2G3nf7sAL0/AAAAAAAAAAI/AAAAAAAABEc/crlUhlgL50Q/photo.jpg);
  background-size: 136px 137px;
  background-repeat: no-repeat;
  transform: rotate(0turn);
  animation-name: anim_1;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes anim_1 {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

@keyframes anim_2 {
  from {
    transform: translate(100px, 100px);
  }
  to {
    transform: translate(100px, 200px);
  }
}

<div class="x_a"></div>

Answer 1

.x_a {
  width: 136px;
  height: 137px;
  background-image: url(https://lh6.googleusercontent.com/-J2G3nf7sAL0/AAAAAAAAAAI/AAAAAAAABEc/crlUhlgL50Q/photo.jpg);
  background-size: 136px 137px;
  background-repeat: no-repeat;
  transform: rotate(0turn);
  animation-name: anim_1;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.y_a {
  animation-name: anim_2;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes anim_1 {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

@keyframes anim_2 {
  from {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(400px, 0px);
  }
  to {
    transform: translate(0px, 0px);
  }
}

    <div class="y_a">
       <div class="x_a"></div>
   </div>

БЛОГ НА HUSL

2 transform для одного объекта

Ответы (1 шт):