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

Примеры анимации процесса загрузки

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

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

Идет загрузка...
Идет загрузка...
Идет загрузка...
Идет загрузка...

Пример анимации в рекламном блоке

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

OOO «Автолохотрон»

Продажа краденных авто по всему миру!

Тел. +333-3333-3333-3333

Пример анимации «Летающая тарелка»

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

Пример анимации «Игральная карта»

Чтобы обеспечить 3D-эффект при повороте карты на 360 градусов, мы используем два непрозрачных изображения: для лицевой и обратной сторон карты. При этом каждое изображение поворачивается в противофазе: когда видна одна сторона карты, вторая повернута более, чем на 180 градусов и мы ее не видим.