Содержит название CSS-свойств, к которым будет применен эффект перехода.
Значение свойства может содержать как одно свойство, так и список через запятую.
| transition-property | |
| Значения: | Описание: |
| none | Отсутствие свойства для перехода. |
| all | Значение по умолчанию. Применяет эффект ко всем свойствам элемента. |
| «свойство, свойство» | Cписок CSS-свойств, перечисленных через запятую, участвующих в переходе. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Продолжительность перехода — transition-duration
Задаёт промежуток времени, в течение которого должен осуществляться переход.
Если свойства имеют разные значения для перехода, они указываются через запятую.
Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.
| transition-duration | |
| Значения: | Описание: |
| «время» | Время перехода указывается в секундах или миллисекундах, например, 2s или 5ms. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Функция перехода transition-timing-function
Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому.
Если вы определяете более одного перехода для элемента, например, цвет фона и его положение, вы можете использовать разные функции для каждого свойства.
| transition-timing-function | |
| Значения: | Описание: |
| ease | Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. |
| linear | Переход происходит равномерно, без колебаний в скорости. |
| ease-in | Переход начинается медленно, а затем плавно ускоряется в конце. |
| ease-out | Переход начинается быстро и плавно замедляется в конце. |
| ease-in-out | Переход медленно начинается и медленно заканчивается. |
| cubic-bezier(x1, y1, x2, y2) | Позволяет вручную установить значения от 0 до 1 для кривой ускорения. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Задержка перехода transition-delay
Это свойство, позволяет сделать так, чтобы изменение с некоторой задержкой.
| transition-delay | |
| Значения: | Описание: |
| время | Время задержки перехода указывается в секундах или миллисекундах. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Собираем Transition в кучу
До этого момента, мы рассмотрели все свойства по отдельности и надо заметить, что если указать только одно свойство из перечисленных, то трансформация работать не будет.
Теперь рабочий вариант на примере:
.block{
background-color: #ff0;
height: 100px;
width: 100px;
transition-property: width, height, background-color;
transition-duration: 2s,.5s,5s;
transition-timing-function: ease;
transition-delay: 1s;
}
.block:hover{
width: 150px;
height: 50px;
background-color: #f00;
}
Краткая запись перехода — transition
Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition.
{transition: transition-property transition-duration transition-timing-function transition-delay;}
Если воспользоваться значениями по умолчанию, то запись
div {transition: 1s;}
будет эквивалентна
div {transition: all 1s ease 0s;}
Анимация CSS
Мы недавно видели, что переходы — это просто способ анимации стилевых свойств от исходного до конечного состояния.
Итак, переходы в CSS являются специфическим видом анимации, где:
· есть только два состояния: начало и конец;
· анимация не зациклена;
· промежуточные состояния управляются только функцией времени.
Но что если мы хотим:
· иметь контроль над промежуточными состояниями?
· зациклить анимацию?
· сделать разные виды анимаций для одного элемента?
· анимировать определённое свойство только на половину пути?
· имитировать различные функции времени для разных свойств?
Анимация в CSS позволяет всё это, и не только.
Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).
Как и transition, свойство animation является сокращённым для нескольких других:
Свойства анимации:
· animation-name: название анимации;
· animation-duration: как долго длится анимация;
· animation-timing-function: как вычисляются промежуточные состояния;
· animation-delay: анимация начинается спустя некоторое время;
· animation-iteration-count: сколько раз должна выполняться анимация;
· animation-direction: должно движение идти в обратную сторону или нет;
· animation-fill-mode: какие стили применяются до и после анимации.
· animation-play-state: управляет проигрыванием и остановкой анимации
@keyframes
Перед применением анимации к элементам HTML, нам требуется написать анимацию с помощью ключевых кадров. Вообще, ключевые кадры — это каждый промежуточный шаг в анимации. Они определяются с помощью процентов:
· 0% — первый шаг анимации;
· 50% — шаг на полпути в анимации;
· 100% — последний шаг.
Важно!
Можно также использовать ключевые слова from и to вместо 0% и 100%, соответственно.
Мы можете определить столько ключевых кадров, сколько хотим, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.
Каждый ключевой кадр является правилом CSS, это означает, что вы можете писать свойства CSS как обычно.
Чтобы определить анимацию, напишите ключевое слово @keyframes с его названием:
@keyframes around {
0% { left: 0; top: 0; }
25% { left: 240px; top: 0; }
50% { left: 240px; top: 140px; }
75% { left: 0; top: 140px; }
100% { left: 0; top: 0; }
}
.move{
position: absolute;
height:100px;
width:100px;
background-color: #444;
animation: around 4s linear infinite;
}
Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite, то анимация будет идти от 0% до 100%, а затем немедленно обратно к 0% и так бесконечно.
Animation-name
Название анимации используется, по крайней мере, дважды:
1. при написании анимации с помощью @keframes;
2. при использовании анимации с помощью свойства animation-name (или через сокращённое свойство animation).
Например так:
@keyframes whatever {
/*... */
}
.selector { animation-name: whatever; }
Подобно именам классов CSS, название анимации может включать в себя только:
· буквы (a-z);
· цифры (0-9);
· подчёркивание (_);
· дефис (-).
Важно!
Название не может начинаться с цифры или с двух дефисов.
Animation-duration
Длительность анимации может быть задана в секундах (1s) или миллисекундах (200ms).
.selector { animation-duration: 0.5s; }
Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.