Как реализовать элементы с анимацией на заднем фоне?

Question

[metori]

Привет. Подскажите, пожалуйста, как можно реализовать вот такое: diorama.elated-themes.com (первый слайд).

Answer 1

[Stalker_RED]

div {
  position: absolute;
  top: 100px; left: 100px;
  animation: moveAround 7s linear infinite;  
}

@keyframes moveAround {
    from { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

https://jsfiddle.net/36j6yz95/
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Comments

[metori]

Cпасибо за пример, а подскажите, как еще добавить к этой анимации еще одну, чтобы при загрузке страницы оно не просто появлялось, а, например выезжало откуда-то?

[Stalker_RED]

metori: еще одна анимация, но уже без infinite, чтобы не повторялась.

[metori]

Stalker_RED: cпасибо

Answer 2

[Максим Тимофеев]

Обычный слайдер, на нем слоями элементы, с css анимацией. Не столько сложно технологически, сколько долго, много рутинной работы.
Слайдер при переключении слайда, добавляет его контейнеру класс, который запускает анимации. Все предельно просто.