Анимация изображения для сайта с помощью CSS3 | RUDEBOXИногда возникает необходимость создать анимацию для изображения, при этом затратив минимум усилий. Дело в том, что для обычной анимации картинки необходимо приложить не мало усилий, учитывая что не все умеют реализовать данную задумку. Мы решили рассказать, как можно создать весьма хитрую анимацию для картинки, а именно мы заставим ее двигаться как куклу, разбив изображения на точки, которая будет двигаться по заданной траектории. В результате мы получим движения волнами. К тому же мы подобрали картинку в виде моря.

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

Шаг 1. HTML

Разметка у нас будет состоять из сорока классов, именно на столько точек анимации мы разобьем данное изображение:

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

Анимация изображения для сайта с помощью CSS3 | RUDEBOX

Шаг 2. CSS

Как вы уже поняли, в стилях мы укажем анимацию для каждой точки, диапазон колебания для каждой точки в зависимости насколько нам необходимо отклонение от нулевого значения:

Кроме этого мы установили общие параметры контейнера, отметим, что урок достаточно простой, но он имеет место быть.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.