Примеры анимации на HTML и CSS

• Примеры анимации процесса загрузки
• Пример анимации в рекламном блоке
• Пример анимации «Летающая тарелка»
• Пример анимации «Игральная карта»

Подробнее о создании анимации можно почитать в нашем учебнике по CSS здесь.

Для начала приведем пару простейших примеров анимации для процессов загрузки или установки. Для первых четырех примеров использован один и тот же html-код, но разное оформление.

Теперь давайте сделаем простейшую анимационную галерею, в которой фото будут обновляться автоматически. Такой прием может пригодиться в рекламе или же, например, на главных страничках сайтов-визиток или лендингов, где будет происходить смена фото с продаваемыми товарами или оказываемыми услугами. Один из таких простейших вариантов показан в данном рекламном блоке. При этом в анимации используется уже не два ключевых кадра, а значительно больше.

Пример простейшей анимации посадки и взлета летающей тарелки на фоне побережья. Сама тарелка представляет собой гифку, анимируются только ее координаты. При этом анимация полностью адаптивная и может использоваться на любых размерах блока-обертки.