Несколько флип-экземпляров (изображения)

Question

Мне было интересно, как это достичь. Например, у меня есть четыре версии логотипа, и я хочу пройти через все из них с помощью флип-эффекта. Пример:

Логотип 1 (ждет пару секунд)> перелистывает логотип 2 (ждет пару секунд)> перелистывает логотип 3 (ждет пару секунд)> перелистывает логотип 4. Все это с перспективой анимация.

Как и в случае с монеткой, но вы переворачиваете 4 экземпляра логотипа.

Я действительно не знаю, как сделать анимацию переворачивания автоматически. Я нашел кое-что, но они набрасываются на зависание или нажимают + вы можете перевернуть 2 экземпляра (спереди и сзади).

Возможно, вы можете указать мне некоторые соответствующие учебники или что-то в этом роде.

спасибо.

Answer 1

Совершенно возможно только с CSS3!

Вместо использования перехода (ведьма запускается действием от пользователя), используйте анимацию css. На CSS-tricks.com есть отличное видео, в которое люди обращаются к анимации CSS, и я рекомендую вам check it out, чтобы увидеть, как обдумать его и как заставить его работать во многих браузерах, но в двух словах вы начинаете с объявления анимация:

@-webkit-keyframes nameTheAnimation { /* what will it do */ } 

и затем вы идете на элемент, который вы хотите, чтобы оживить и добавить анимации:

-webkit-animation: nameTheAnimation 'delay in s' 'time in s'; 

для получения дополнительной информации о том, что свойства доступны, вы можете check w3schools