Переходы
CSS-переходы позволяют изменять значения свойств плавно (от одного значения к другому) за определенное время.
Для создания переходов используется следующая запись
transition: width 2s linear 1s;
CSS-переходы позволяют изменять значения свойств плавно (от одного значения к другому) за определенное время.
Для создания переходов используется следующая запись
transition: width 2s linear 1s;
transition-property: width;
transition-property: background;
transition-property: width, border;
transition-property: all;
определяет одно или несколько свойств, для которых нужно реализовать переход
transition-duration: 1s;
transition-duration: 2.5s;
transition-duration: 0s;
определяет время, за которое произойдёт переход от одного значения свойства к другому. Описывается в секундах
transition-delay: 0s;
transition-delay: .5s;
transition-delay: 2s;
определяет время, которое пройдёт от триггера перехода до его непосредственного старта. Описывается в секундах
transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
определяет кривую проведения перехода. Т. е. определяет скорость течения перехода, делая его более реалистичным
Анимации позволяют элементу постепенно меняться от одного стиля к другому.
Можно изменять столько свойств CSS, сколько хочется, столько раз, сколько нужно.
Для использования анимации CSS необходимо сначала указать некоторые ключевые кадры для анимации
animation: example 5s linear 2s infinite alternate forwards;
@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
При указании стилей CSS в правиле @keyframes, анимация будет постепенно изменяться от текущего стиля к новому стилю за определенное время.
Чтобы анимация заработала, необходимо привязать анимацию к элементу.
@keyframes example_1 {
from {
background: #ddd;
width: 50%;
color: #000;
}
to {
background: darkgreen;
width: 75%;
color: white;
}
}
div:hover {
animation: example_1 2s;
}
@keyframes example_2 {
0% {
background: #1d1d1d;
}
50% {
background: red;
}
100% {
background: yellow;
}
}
div:hover {
animation: example_2 2s;
}
div:hover {
animation: example_2 2s 3;
}
div:hover {
animation: example_2 2s infinite;
}
свойство указывает количество запусков анимации. Здесь также можно указать бесконечное число запусков
указывает, следует ли воспроизводить анимацию вперед, назад или в чередующихся циклах.
div:hover {
animation: example_2 2s normal;
}
div:hover {
animation: example_2 2s reverse;
}
div:hover {
animation: example_2 2s alternate 2;
}
div:hover {
animation: example_2 2s alternate-reverse 2;
}
свойство определяет стиль для элемента после щавершения анимации.
div:hover {
animation: example_2 2s;
}
div:hover {
animation: example_2 2s forwards;
}
div:hover {
animation: example_2 2s reverse forwards;
}
@keyframes example {
0% {
width: 100px;
height: 100px;
background: yellow;
}
25% {
width: 150px;
background: red;
}
50% {
height: 150px;
}
100% {
width: 200px;
height: 200px;
background: green;
}
}
animation: example 5s linear 2s infinite alternate forwards;