В новой записи мы с вами рассмотрим анимацию на чистом CSS. Мы рассмотрим свойства transform, transision. Данные свойства позволяют создавать анимации вращения, смещения, перемежения на чистом CSS.
transition
transition-property
Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода. Вам нужно прописать в качестве значения название стиля, для которого будет применяться плавное изменение.
.div {
width: 100px;
transition-property: width;
}
.div:hover {
width: 200px;
}transition-duration
Задает время за которое должна пройти анимация.
Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то переход будет резкий. Свойство не наследуется.
.div {
width: 100px;
height: 50px;
background: #657432;
margin: auto;
transition-duration: 1s;
}
.div:hover {
width: 200px;
}transition-timing-function
Свойство transition-timing-function задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.
| ease | Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1). |
| linear | Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1). |
| ease-in | Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1). |
| ease-out | Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1). |
| ease-in-out | Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1). |
| cubic-bezier(x1, y1, x2, y2) | Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
В таблице ниже представлены значения которые вы можете использовать в качестве значения для свойства transition-timing-function.
| easeInSine | cubic-bezier(0.47, 0, 0.745, 0.715) |
| easeOutSine | cubic-bezier(0.39, 0.575, 0.565, 1) |
| easeInOutSine | cubic-bezier(0.445, 0.05, 0.55, 0.95) |
| easeInQuad | cubic-bezier(0.55, 0.085, 0.68, 0.53) |
| easeOutQuad | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| easeInOutQuad | cubic-bezier(0.455, 0.03, 0.515, 0.955) |
| easeInCubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |
| easeOutCubic | cubic-bezier(0.215, 0.61, 0.355, 1) |
| easeInOutCubic | cubic-bezier(0.645, 0.045, 0.355, 1) |
| easeInQuart | cubic-bezier(0.895, 0.03, 0.685, 0.22) |
| easeOutQuart | cubic-bezier(0.165, 0.84, 0.44, 1) |
| easeInOutQuart | cubic-bezier(0.77, 0, 0.175, 1) |
| easeInQuint | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
| easeOutQuint | cubic-bezier(0.23, 1, 0.32, 1) |
| easeInOutQuint | cubic-bezier(0.86, 0, 0.07, 1) |
| easeInExpo | cubic-bezier(0.95, 0.05, 0.795, 0.035) |
| easeOutExpo | cubic-bezier(0.19, 1, 0.22, 1) |
| easeInOutExpo | cubic-bezier(1, 0, 0, 1) |
| easeInCirc | cubic-bezier(0.6, 0.04, 0.98, 0.335) |
| easeOutCirc | cubic-bezier(0.075, 0.82, 0.165, 1) |
| easeInOutCirc | cubic-bezier(0.785, 0.135, 0.15, 0.86) |
| easeInBack | cubic-bezier(0.6, -0.28, 0.735, 0.045) |
| easeOutBack | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
| easeInOutBack | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
transition-delay
Данное свойство используется для создания задержки между анимациями. Значение указывается в секундах. Вы можете указать дробное число в качестве значения.
.div {
width: 100px;
height: 50px;
background: #657432;
margin: auto;
transition-duration: 1s;
transition-delay: .5s;
}
.div:hover {
width: 200px;
}transform
Свойство transform используется для создания анимации трансформации. С помощью данного свойства вы можете вращать, растягивать, смещать элементы.
Давайте рассмотрим все значения которые может принимать данное свойство. В качестве примера я буду использовать обычный блок, а анимация будет срабатывать при наведение на него.
Так же я буду комбинировать это свойство с ранее рассмотренным свойством transition, чтобы сделать анимацию плавной.
rotate()
Данное значение позволяет вращать элемент на указанное количество градусов. Если вы укажете положительное значение, то элемент будет вращаться по часовой стрелке, если отрицательное — против.
transform: rotate(360deg);translate()
Значение translate смещает элемент по оси X и Y. Значение указывается в px. Первое значение смещает элемент по оси X, второе значение смещает по оси Y.
transform: translateX(100px);Значения translateX() и translateY() смещают элемент по X и Y координатам.
transform: translateX(100px);transform: translateY(100px);scale()
С помощью данного свойства вы можете сжимать или растягивать элемент по вертикали или горизонтали. Аналогично предыдущему значению свойства transform, имеются 3 вида указания значения: scale(), scaleX(), scaleY(). Значение можно указывать в единицах или дробных числах
transform: scale(1.5, 0.5);transform: scaleX(1.5);transform: scaleY(1.5);skew()
С помощью данного свойства вы можете сжимать или растягивать элемент по вертикали или горизонтали. Аналогично предыдущему значению свойства transform, имеются 3 вида указания значения: skew(), skewX(), skewY(). Значение указывается можно указывать в градусах.
transform: skew(20deg, 50deg);transform: skewX(20deg);transform: skewY(20deg);matrix()
Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения.
transform: matrix(20deg);transform-origin
Данное свойство смещает цент трансформации. Значение указывается в процентах, где center — 50% 50%, или возможно указания значения в качестве ключевых свойств.
transform-origin: top left;Вы можете использовать несколько трансформация сразу. Для этого нужно их перечислить в порядке их запуска в качестве значения.
transform: rotate(360deg) skewY(20deg);Указание ключевых кадров анимации
Вы можете указывать ключевые кадры анимации в определенных точках анимации. Это указывается с помощью @keyframes, при этом нужно указать произвольное название анимации и перечислить список правил.
@keyframes имя анимации { список правил }Имя анимации вы указываете своё, его в дальнейшем мы будет использовать внутри свойства transform.
Правила задаются с указанием ключевых кадров в процентах или с указанием ключевых свойств from и to.
.html_keyframe_shadow {
width: 50px;
height: 50px;
background: #653462;
margin: auto;
transition: 1s;
border: 1px solid #000;
}
.html_keyframe_shadow:hover {
animation: shadow 2s infinite ease-in-out;
}
@keyframes shadow {
from,
to {
background: red;
}
25% {
background: green;
}
75% {
background: black;
}
50% {
background: blue;
}
} animation-name — название анимации для элемента
Указывает список анимаций применяемых для элемента. Здесь вам нужно указать названия анимаций которые вы хотели бы применить для выбранного элемента.
animation-name: test_animation; animation-duration — продолжительность анимации
Данное свойство позволяет задавать продолжительность анимации. Значение указывается в секундах или миллисекундах.
animation-duration: .5s;
animation-duration: 200ms;animation-iteration-count — количество повторов анимации
Вы можете указать количество повторов анимации, для этого нужно добавить свойство animation-iteration-count
animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.5;animation-direction — направление анимации
Свойство animation-direction определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах. Когда анимация воспроизводится в обратном порядке, временные функции также меняются местами. Например, при воспроизведении в обратном порядке функция ease-in будет вести себя как ease-out.
normal | Все повторы анимации воспроизводятся так, как указано. Значение по умолчанию. |
reverse | Все повторы анимации воспроизводятся в обратном направлении от того, как они были определены. |
alternate | Каждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении. |
alternate-reverse | Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
animation-direction: initial;
animation-direction: inherit; animation-play-state — свойство для управления работой функции
С помощь данного свойства вы можете останавливать и запускать функцию указывая определенные значения.
animation-play-state: running; //запускаем
animation-play-state: paused; //останавливаем
animation-play-state: paused, running, running;
animation-play-state: initial;
animation-play-state: inherit;Вы можете прописать данное свойство для псевдокласса hover и останавливать анимацию после наведения курсора на элемент.
animation-delay — указывает начало работы анимации
Свойство animation-delay определяет, когда анимация начнется. Задается в секундах s или миллисекундах ms.
Указываем несколько видов анимации на один элемент
Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:
div {
animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;
}