От автора: всех приветствую. Анимация стала одним из нововведений css3. И сегодня я покажу вам, как делается в css анимация при наведении на элемент. Я покажу всего 2 простых примера: с крутящимся мячом и пульсирующей кнопкой, но их вам будет достаточно, чтобы понять общую суть. Я рекомендую вам все примеры разбирать вместе со мной.
Итак, есть мяч и есть газон. Задача: заставить мяч крутиться по часовой стрелке при наведении на него. Это можно сделать и без анимации, но тогда будет только один прокрут. При анимации же, если вы знаете, можно управлять количеством повторов и еще многими интересными вещами.
Я не буду сейчас вдаваться в html-разметку, там нечего говорить, поэтому сразу перейдем к реализации нужного нам эффекта. Я напомню, нужно делать бесконечный поворот мяча при наведении на него. За поворот у нас в css отвечает свойство transform: rotate. Составляем анимацию:
|
1 2 3 4 |
@keyframes ball{ 0%{transform: rotate(0deg)} 100%{transform: rotate(360deg)} } |
Это делается вот таким образом. Если вы ранее никогда не делали анимаций в css, то коротко объясню. @keyframes – это как бы обязательное ключевое слово в начале, говорящее браузеру о том, что далее мы будем писать анимационные кадры. Далее я указываю произвольно имя анимации, после чего следует уже ее описание.
В описании мы указываем на каких моментах анимации что делать. Так, я указал, что в самом начале элемент не нужно поворачивать, а к полному завершению анимации он должен быть повернут на 360 градусов.
Анимация составлена, теперь вам нужно ее применить к самому элементу. Для этого я прописал мячу стилевой класс ball и указал в css:
|
1 2 3 |
animation-name: ball; animation-duration: 1s; animation-iteration-count: infinite; |
Собственно, в нашем случае для работоспособности анимации нужно указать ее имя, длительность и количество повторов, поскольку их должно быть бесконечное кол-во.
Но, внимание! Все эти правила нужно указать для селектора .ball:hover, ведь мы рассматриваем анимацию при наведении, а не просто так. После всех выполненных манипуляций обновите страницу и наведите курсор на мяч. Если он начал крутиться, то все сделано правильно. Но это был немного странный пример, который мне сразу пришел в голову, сейчас рассмотрим более приближенный к реальности.
Пульсирующая кнопка
Мы сделаем кнопка, при наведении на которую она сначала будет увеличиваться, а потом уменьшаться. И так будет бесконечно, пока курсор наведен на нее.
|
1 |
<input type = "submit" value = "Сделать заказ!"> |
Вот html-разметка, пусть это будет кнопка отправки формы, хотя смешно получается, ведь самой формы нет, но нам ведь только для примера. Пропишем для нее какие-нибудь стили в css, чтобы она выглядела более менее нормально:
|
1 2 3 4 5 6 7 8 |
input[type=submit]{ margin: 20px 50px; background: #2E5C8A; border: 2px solid #1C4354; padding: 25px; color: #fff; font-weight: bold; } |
Вот так она выглядит:
Не шикарно, но для примера пойдет. Теперь создаем для нее анимацию, смотрите код:
|
1 2 3 4 |
@keyframes button{ 50%{transform: scale(1.5, 1.5)} 100%{transform: scale(0.75, 0.75)} } |
За управление размерами отвечает transform: scale. Первое значение отвечает за ширину, второе соответственно за высоту. В данном коде понятно, что на половине анимации кнопка должна увеличиться в полтора раза, но к концу наоборот уменьшиться.
Остается связать анимацию с кнопкой:
|
1 2 3 4 5 |
input[type=submit]:hover{ animation-name: button; animation-duration: 1s; animation-iteration-count: infinite; } |
Опять же, не забывайте дописывать псевдокласс hover, потому что мы рассматриваем именно анимацию при наведении на кнопку. Все, теперь обновляем страницу и при наведении на кнопку она пульсирует. Все работает. Более сложный пример
Итак, мы рассмотрели 2 простых примера, но сейчас я хочу в качестве бонуса показать вам еще один пример. Он не совсем связан с наведением, мы сделаем зависимость анимации от чекбоксов.
Я предлагаю реализовать такой интересный пример: будет три лягушки и три чекбокса, а также предложение выбрать, какую лягушку отправить за экран. Соответственно, если вы отметите первую галочку, то улетит первая лягушка и т.д. Я советую вам прямо сейчас открыть редактор кода и попробовать самому на практике, потому что так вы гораздо быстрее поймете, как оно работает.
Все это на самом деле не так сложно реализовать, как вам могло показаться. Вот полный код примера:
|
1 2 3 4 5 6 7 |
Выберите, какой лягушке нужно спрыгнуть с монитора:<br> Первой <input type = "checkbox" class = "c1"> <br> Второй <input type = "checkbox" class = "c2"> <br> Третьей <input type = "checkbox" class = "c3"> <br> <img class = "frog1" src = "frog.png"> <img class = "frog2" src = "frog.png"> <img class = "frog3" src = "frog.png"> |
Соответственно, каждый чекбокс получает свой класс, то же самое верно и для изображений. Теперь нужно подготовить саму анимацию:
|
1 2 3 |
@keyframes jump{ 100%{transform: translate(1500px, -150px)} } |
Как видите, она совсем проста, тут только перемещение по горизонтали и вертикали по хожу всей анимации. А теперь самое главное. Как же сделать так, чтобы при нажатии на первый чекбокс первая лягушка выполняла указанную анимацию и т.д.? Смотрите код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.c1:checked ~.frog1{ animation-name: jump; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .c2:checked ~.frog2{ animation-name: jump; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } .c3:checked ~.frog3{ animation-name: jump; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } |
Это полный код для всех трех лягушек. Реализовать все это получилось благодаря тому, что у нас есть псевдокласс :checked, который позволяет применить стили только к отмеченным чекбоксам. Но мы идем дальше, применяя стили ни к непосредственно чекбоксу, а к элементу с классом .frog1, то есть к первой лягушке. При этом крайне важно, чтобы она находилась в html-разметке дальше самого чекбокса. Но об этом мы и так позаботились.
Попробуйте. Свойство animation-fill-mode: forwards, необходимо нам для того, чтобы после выполнения анимации сохранялось состояние, то есть лягушка не возвращалась на исходное положение.
Видите, я отметил две первые галочки и первые 2 лягушки отправились в путешествие за экран.
На основе этого примера вы можете реализовывать любые другие нужные вам связки. Например, в зависимости от выбора пользователя показывать ему разное приветствие и т.д.
Что ж, друзья, сегодня мы рассмотрели достаточно интересные способы анимации с помощью css3, а если вы хотите изучить другие свойства css3, могу порекомендовать к просмотру соответствующие уроки из премиум-раздела. Там вы также освоите плавные переходы, градиенты и много-много других интересных вещей.
