Реализовать анимацию через transition и animation

Question

Требуется создать анимацию к объекту квадрат: цвет последовательно меняется (красный – синий – зеленый – коричневый – фиолетовый – красный).

Реализовать это требуется двумя способами, через transition и animation.

Второе сделал в @keyframes:

@keyframes sq {
    0% {
        background-color: red;
    }
    20% {
        background-color: blue;
    }
    40% {
        background-color: green;
    }
    50% {
        transform: rotateY(-180deg);
    }
    60% {
        background-color: brown;
        transform: skew(-45deg, 45deg);
    }
    80% {
        background-color: violet;
    }
    100% {
        background-color: red;
    }
}

А вот transition не нахожу соответствующей информации.

Такая анимация для первого свойства возможна?

Полный текст задания:

Объект: квадрат. Цвет постепенно меняется в последовательности: красный – синий – зеленый – коричневый – фиолетовый – красный. Во второй половине анимации добавляется поворот против часовой стрелки по оси Y и положительный наклон по оси Z.

Answer 1

transitions – для простых анимаций, завязанных на :hover;
animations – для сложных покадровых анимаций через @keyframes.

.circle {
  background: red;
  width: 70px;
  height: 70px;
  animation: sq 5s infinite;
}

@keyframes sq {
    0% {
        background: red;
    }
    20% {
        background: blue;
    }
    40% {
        background: green;
    }
    50% {
        transform: rotateY(-180deg);
    }
    60% {
        background: brown;
        transform: skew(-45deg, 45deg);
    }
    80% {
        background: violet;
    }
    100% {
        background: red;
    }
}

<div class="circle"></div>

БЛОГ НА HUSL

Реализовать анимацию через transition и animation

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