Переходы CSS
Позволяют плавно менять значения свойств стилей CSS при возникновении событий добавляющих или изменяющих свойства. Можно использовать совместно с событиями Java Script.
Событие :hover (наведение мыши) увеличивает размер шрифта:
#zoom{
transition-property: font-size;
transition-duration: 2s;
transition-timing-function: linear;
},.
#zoom:hover{
font-size:3em;
}
<div id='zoom'>Этот текст увеличится при наведении</div>
- transition-property:all;
- свойство которое следует плавно менять, по умолчаню равно all (все свойства)
- transition-duration:1s;
- длительность изменения
- transition-timing-function:linear;
- ускорени/замедление:
ease-in - изменение начинается медленно, затем ускоряется;
ease-out - изменение начинается быстро, затем узамедляется;
linear - изменение происходит с постоянной скоростью;
ease;
ease-in-out; - transition-timing-function:step(2, start/end)
- применяется для изменения свойств шагами, start/end указывает в нвчале или конце шага применять изменение свойств. step(9) без второго аргумента - это step(9, end)
Краткая запись:
transition: font-size 3s linear, background-color:red 5s linear;
Через запятую можно указывать несколько свойств.
Функцию времени можно менять так же непосредственно при помощи
инструментов разработчика (ctrl+shift+i),
далее выбрать элемент html к которому применено свойство
transition-timing-function:
в браузере firefox: (инспектор) - правила;
chrome: (elements) - style;
Справа, сразу после transition-timing-function:
находится значек, нажав накоторый, можно визуально
настроить поведение функции времени.
Изменение размеров элемента.
#fox{
transition: all 5s steps(100);
background-color: blueviolet;
height: 100px;
width: 100px;
}
#fox:hover{
height: 200px;
width: 200px;
}
Текст перемещается при наведении курсора на контейнер-родитель.
#up{
background-color: aquamarine;
height: 100px;
position: relative;
}
#up>span{
position: absolute; bottom:0px;
transition-property: all;
transition-duration: 6s;
transition-timing-function: step(3,start);
}
#up:hover>span{
bottom:80px;
}
<div id='up'>
<span>Этот текст переместится</span>
</div>