Как сделать transition обратно
CSS-анимации
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/css-animations.
Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.
Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.
CSS transitions
Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.
Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.
При клике на эту кнопку происходит анимация её фона:
Есть всего 5 свойств, задающих анимацию:
Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:
Далее мы рассмотрим свойства анимации по отдельности.
transition-property
Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».
transition-duration
transition-delay
Возможны отрицательные значения, при этом анимация начнётся с середины.
Например, вот анимация цифр от 0 до 9 :
Она осуществляется сменой margin-left у элемента с цифрами, примерно так:
В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:
В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:
В JavaScript это делается дополнительной строкой:
transition-timing-function
Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.
Самое сложное, но при небольшом изучении – вполне очевидное свойство.
У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.
Кривая Безье
В качестве временной функции можно выбрать любую кривую Безье с 4 опорными точками, удовлетворяющую условиям:
Она указывает, как быстро развивается процесс анимации во времени.
График этой «кривой» таков:
Поезд в примере ниже с постоянной скоростью «едет» слева направо, используя такую временную функцию:
Почему не отрабатывает transition в обратную сторону?
На деле так, но как только я увожу курсор background пропадает не плавно, а сразу же исчезает.
1 ответ 1
Рекомендую использовать не display:none для включение/выключения блока, а, например, opacity:0 или visibility:hidden : во-первых, появится возможность лучше управлять анимацией, во-вторых, браузеру не придётся перерисовывать страницу, что снизит нагрузку, ибо свойство display:none не просто прячет элемент, а удаляет из DOM и переформировывает контент всей страницы.
Больше информации по ссылке: display
Всё ещё ищете ответ? Посмотрите другие вопросы с метками css scss или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.22.41046
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
2.20. CSS3-переходы
CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.
Создание плавных изменений свойств элементов
Поддержка браузерами
1. Название свойства transition-property
Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.
Создаваемые эффекты должны быть ненавязчивыми. Не все свойства требуют плавного изменения во времени, что связано с пользовательским опытом. Например, при наведении на ссылку мы хотим видеть мгновенную смену цвета ссылки или цвета и стиля подчёркивания. Поэтому переходы следует использовать для тех свойств, к которым действительно нужно привлечь внимание.
| transition-property | |
|---|---|
| Значения: | |
| none | Отсутствие свойства для перехода. |
| all | Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента. |
| свойство | Определяет список CSS-свойств, перечисленных через запятую, участвующих в переходе. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
2. Продолжительность перехода transition-duration
Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.
3. Функция перехода transition-timing-function
Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Свойство не наследуется.
Для создания более реалистичных анимаций используйте функцию cubic Bézier:
4. Задержка перехода transition-delay
Необязательное свойство, позволяет сделать так, чтобы изменение свойства происходило не моментально, а с некоторой задержкой. Не наследуется.
| transition-delay | |
|---|---|
| Значения: | |
| время | Время задержки перехода указывается в секундах или миллисекундах. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
5. Краткая запись перехода
Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition
transition: transition-property transition-duration transition-timing-function transition-delay;
Если воспользоваться значениями по умолчанию, то запись
6. Плавный переход нескольких свойств
Для элемента можно задать несколько последовательных переходов, перечислив их через запятую. Каждый переход можно оформить своей временной функцией.
7. Примеры переходов для различных свойств
Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.
Свойство CSS Transition
Синтаксис CSS transition
Синтаксис выглядит довольно устрошающе, но по факту все просто. Давайте разберем на простых примерах как это работает. После двух примеров будут разобраны все возможные значения каждого из элемента синтаксиса:
Примеры со свойством Transition
Пример #1. Анимация в html через transition
На странице преобразуется в следующее
Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:
Код transition: all 1s linear означает следующее:
Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform.
Пример #2. Увеличение объекта в html без смещения других объектов
На странице преобразуется в следующее
Теперь объект увеличивается и не происходит смещения других объектов.
Рассмотрим детально какие значения может принимать каждый из параметров
Значения свойств transition
1. Параметр transition-property
Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения
Для включения нескольких свойств, их можно перечислить через запятую.
2. Параметр transition-duration
Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).
Параметр transition-duration можно задавать отдельным свойством в CSS:
3. Параметр transition-timing-function
Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.
Где value может принимать значения:
Эффект плавного перехода в CSS часто применяется при наведении курсора на какой-нибудь элемент, например для кнопки. Когда при наведении курсора, кнопка меняет свой цвет, процесс замены происходит очень быстро и резко, то хочется это действие замедлить.
Добиться эффекта плавного перехода можно с помощью CSS свойства – transition, где
all – эффект замедления применяется ко всем возможным переходам
1s – время выполнения плавного перехода
ease – способ выполнения плавного перехода
transition: all 1s ease;
Анимация кнопки при наведении
Демонстрация работы анимации кнопки, верхий рисунок: демо
Свойство transition следует прописать к элементу, в нашем случае это кнопка button, а не к его состоянию, то есть псевдоэлементу hover. Тогда плавный переход будет работать не только при наведении, но и при снятии курсора с элемента.
Плавный переход transition CSS. Кнопка
.button <
background-color: #2bc6a4;
border: none;
border-radius: 15px;
color: #fff;
display: block;
padding: 10px 20px;
text-align: center;
text-transform: uppercase;
width: 20%;
margin: auto;
font-family: sans-serif;
font-size: 22px;
text-decoration: none;
transition: all 1s ease;
>
.button:hover <
background-color: #4feac8;
>
Анимация фона при наведении при участии transition
Демонстрация работы анимации кнопки, нижний рисунок: демо
Создадим круг, при наведении на который будет плавно меняется его цвет. Для этого создадим тег div с классом circle, внутри которого пропишем тег span с текстом.
Плавный переход transition CSS. Круг
HTML структура готова и мы переходим к написанию CSS кода. Для реализации данного эффекта, у нас должно быть два круга, один реальный, а другой фейковый.
В CSS коде оформим внешний вид первого круга, в обычном состоянии и он будет черного цвета.
.circle <
background: #3d3d3d;
width: 198px;
height: 198px;
margin: 0 auto;
line-height: 200px;
color: #fff;
font-size: 1.8em;
border-radius: 50%;
position: relative;
cursor: pointer;
text-align: center;
>
Для текста ставим z-index: 2, таким образом текст будет на самом верхнем слое.
.circle span <
position: relative;
z-index: 2;
>
Для построения второго, зеленого круга, мы воспользуемся псевдоэлементом after – это то, что идет после блока. Обязательно прописываем пустую строчку content: » «; иначе псевдоэлемент не отобразится. Зададим ширину и высоту точно такую же, как и у первого круга и желаемый цвет при наведении.
Прописываем display: block, чтобы наш псевдо-круг вообще появился. Итак, псевдо-круг расположился ниже под первым кругом. С помощью свойств position, мы совмещаем оба круга, друг под другом, а свойство z-index: 1, слой с псевдо-кругом размещает под текстом.
Теперь необходимо сделать, чтобы при наведении зеленый круг пропадал, а вместо него появлялся черный. Поэтому мы будем делать следующее, при наведении на класс circle, псевдоэлемент after будет постепенно исчезать. Работа transition показана в строчке кода ниже.
transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;
width: 0;
height: 0;
font-size: 0;
исчезает красиво, по-центру
top: 100px;
left: 100px;
box-shadow растушёвывает края зеленого круга
.circle:hover::after <
width: 0;
height: 0;
font-size: 0;
top: 100px;
left: 100px;
box-shadow: 0 0 20px 20px #3d3d3d inset;
>
Итоги
На самом деле свойство transition очень простое, успешность его применения зависит только от ваших знаний CSS в целом.
Вы можете узнать больше, просмотрев этот видеокурс «Вёрстка сайта с нуля»
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.