css анимация при клике

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/css-animations.

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.

CSS transitions

Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.

Например, CSS, представленный ниже, 3 секунды анимирует свойство background-color .

Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.

При клике на эту кнопку происходит анимация её фона:

Есть всего 5 свойств, задающих анимацию:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Далее мы изучим их все, пока лишь заметим, что общее свойство transition может перечислять их все, в порядке: property duration timing-function delay , а также задавать анимацию нескольких свойств сразу.

Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

Далее мы рассмотрим свойства анимации по отдельности.

transition-property

Список свойств, которые будут анимироваться, например: left , margin-left , height , color .

Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».

transition-duration

Продолжительность анимации, задаётся в формате CSS time, то есть в секундах s или ms .

transition-delay

Задержка до анимации. Например, если transition-delay: 1s , то анимация начнётся через 1 секунду после смены свойства.

Возможны отрицательные значения, при этом анимация начнётся с середины.

Например, вот анимация цифр от 0 до 9 :

Она осуществляется сменой margin-left у элемента с цифрами, примерно так:

В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:

Можно стартовать её «с середины», с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного transition-delay .

В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:

В JavaScript это делается дополнительной строкой:

transition-timing-function

Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.

Самое сложное, но при небольшом изучении – вполне очевидное свойство.

У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.

Кривая Безье

В качестве временной функции можно выбрать любую кривую Безье с 4 опорными точками, удовлетворяющую условиям:

  1. Начальная точка (0,0) .
  2. Конечная точка (1,1) .
  3. Для промежуточных точек значения x должны быть в интервале 0..1 , y – любыми.

Синтаксис для задания кривой Безье в CSS: cubic-bezier(x2, y2, x3, y3) . В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.

Она указывает, как быстро развивается процесс анимации во времени.

  • По оси x идёт время: 0 – начальный момент, 1 – конец времени transition-duration .
  • По оси y – завершённость процесса: 0 – начальное значение анимируемого свойства, 1 – конечное.

Самый простой вариант – это когда процесс развивается равномерно, «линейно» по времени. Это можно задать кривой Безье cubic-bezier(0, 0, 1, 1) .

График этой «кривой» таков:

…Как видно, это просто прямая. По мере того, как проходит время x , завершённость анимации y равномерно приближается от 0 к 1 .

Поезд в примере ниже с постоянной скоростью «едет» слева направо, используя такую временную функцию:

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

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

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

Проверяя на работу анимации, то вот как пример:

1. В ярком оттенке цвета;

2. В синей гамме;

3. В алой палитре цвета;

4. Темно синий цвет, на котором эффектно смотрится анимация;

Приступаем к установке:

.keyboages <
margin: 18px auto;
position: relative;
font-size: 27px;
color: #f7f7f7;
padding: 19px;
width: 197px;
overflow: hidden;
text-align: center;
cursor: pointer;
text-transform: uppercase;
border: 2px solid #fffbfb;
box-shadow: 0px 5px 12px rgba(64, 58, 58, 0.41), 0px 7px 25px -12px rgba(158, 150, 150, 0.05);
border-radius: 57px;
>

.keyboages:nth-of-type(1) <
background-color: #1aab57;
>
.keyboages:nth-of-type(2) <
background-color: #2176af;
>
.keyboages:nth-of-type(3) <
background-color: #c53829;
>
.keyboages:nth-of-type(4) <
background-color: #1c1f5d;
>
.keyboages.left:after <
left: 0;
>
.keyboages.right:after <
right: 0;
>
.keyboages.begun:after <
content: «»;
background: #f7f7f7;
display: block;
position: absolute;
width: 200%;
height: 200%;
top: -5%;
border-radius: 75px;
margin-left: -28%;
opacity: 0;
transition: all 0.75s ease-in-out;
>
.keyboages.begun.right:after <
content: «»;
background: #fff;
display: block;
position: absolute;
width: 200%;
height: 200%;
top: -5%;
border-radius: 50px;
margin-right: -30%;
opacity: 0;
transition: all 0.75s ease-in-out;
>
.keyboages.begun:active:after <
width: 0px;
opacity: 1;
transition: 0s;
>
.keyboages.largerukin:after <
content: «»;
background: #fff;
display: block;
position: absolute;
width: 200%;
height: 100%;
top: 0;
opacity: 0;
transition: all 0.75s ease-in-out;
>
.keyboages.largerukin:active:after <
width: 0px;
opacity: 1;
transition: 0s;
>
.keyboages.atusexpecomeg:after <
content: «»;
background: #f7f7f7;
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
transition: all 0.75s ease-in-out;
>
.keyboages.atusexpecomeg:active:after <
width: 0px;
opacity: 2;
transition: 0s;
>

.keyboages.karvested:after <
content: «»;
background: #f9f9f9;
position: absolute;
width: 185px;
height: 185px;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
margin: auto;
border-radius: 75%;
transform: scale(1);
transition: all 0.75s ease-in-out;
>
.keyboages.karvested:active:after <
transform: scale(0);
opacity: 1;
transition: 0s;
>

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

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

Кнопки являются краеугольным камнем каждого интерфейса, вы используете их каждый день. Они являются важным элементом дизайна взаимодействия. Если вы ищете вдохновение для создания интересных кнопок, вот 25 примеров их CSS анимации.

Эти кнопки обладают некоторыми потрясающими эффектами зависания, некоторые из которых содержат эффект градиента, 3D-эффекты, дизайн материалов и многое другое.

Оцените статью