Все для начинающих
Примеры анимации на HTML и CSS
Примеры анимации процесса загрузки
Подробнее о создании анимации можно почитать в нашем учебнике по CSS здесь.
Для начала приведем пару простейших примеров анимации для процессов загрузки или установки. Для первых четырех примеров использован один и тот же html-код, но разное оформление.
Пример анимации в рекламном блоке
Теперь давайте сделаем простейшую анимационную галерею, в которой фото будут обновляться автоматически. Такой прием может пригодиться в рекламе или же, например, на главных страничках сайтов-визиток или лендингов, где будет происходить смена фото с продаваемыми товарами или оказываемыми услугами. Один из таких простейших вариантов показан в данном рекламном блоке. При этом в анимации используется уже не два ключевых кадра, а значительно больше.
OOO «Автолохотрон»
Продажа краденных авто по всему миру!
Тел. +333-3333-3333-3333
Пример анимации «Летающая тарелка»
Пример простейшей анимации посадки и взлета летающей тарелки на фоне побережья. Сама тарелка представляет собой гифку, анимируются только ее координаты. При этом анимация полностью адаптивная и может использоваться на любых размерах блока-обертки.
Пример анимации «Игральная карта»
Чтобы обеспечить 3D-эффект при повороте карты на 360 градусов, мы используем два непрозрачных изображения: для лицевой и обратной сторон карты. При этом каждое изображение поворачивается в противофазе: когда видна одна сторона карты, вторая повернута более, чем на 180 градусов и мы ее не видим.