Плавный переход от одного состояния к другому обеспечивает свойство Transition CSS, управляя скоростью анимации при изменении значений стилей. Без этого свойства на сайте все менялось бы мгновенно, что не очень приятно для человеческого глаза. Сравнить это можно с резким включением яркого освещения ночью. Человек по своей природе не привык к такому эффекту, поэтому, чтобы управлять скоростью изменения стилей, используют Transition, который смягчает для восприятия эти переходы.
Инициировать CSS Transitions можно непосредственно псевдоклассами ":hover" (активируется при перемещении мыши по элементу), ":focus" (активируется, когда пользователь нажимает на элемент) или ":active" (когда пользователь нажимает на элемент ввода).
Тени в CSS: box-shadow и text-shadow под управлением transition
Вам будет интересно:HTTPS - как сделать точные настройки в Apache, nginx и robots.txt при установке бесплатного SSL-сертификата Let's Encrypt на облачный Linux
Очень часто на сайтах используют свойства CSS text-shadow и box-shadow. Обычно они выполнены почти незаметно, только для того, чтобы посетитель смог понять, что блок или текст "кликабельны". Тени чаще всего не делают яркими и "крикливыми", поэтому следующий пример применим на большинстве проектов.
Вам будет интересно:Pcalua exe - что это за программа в Windows
Слева блок без теней, а справа, после события "hover", появляется тень вокруг блока (box-shadow) и тень вокруг текста (text-shadow).
box-shadow: 3px 4px 10px #ddd; text-shadow: 1px 1px 2px currentColor;
Цвет тени текста указан универсальный - "текущий" ("currentColor"), но вы можете сделать тень текста любого другого цвета.
.text-shadow{ display:block; position: relative; margin-top: 50px; padding-top: 50px; text-align: center; left: 50%; top: 50px; width: 200px; height: 150px; transition: all 1s; } .text-shadow:hover{ box-shadow: 3px 4px 10px #ddd; } .text-shadow span{ color: #ccc; font-size: 3em; } .text-shadow:hover span{ text-shadow: 1px 1px 2px currentColor; }
HTML:
Плавная смена цвета фона и непрозрачности в CSS
Чтобы цвет фона при наведении курсора на блок изменился, нужно определить стили для состояния "static" и для состояния "hover":
Вам будет интересно:Будьте осторожны с PHP empty при ее использовании в шорткодах Wordpress
Для псевдокласса "hover" при наведении курсора на div назначим другой цвет фона:
.background:hover{ background-color: #BE3E82; }
Плавный переход от одного цвета фона к другому происходит благодаря CSS Transition: background в течение 5 секунд. Добавим смену цвета шрифта:
.background span{ color: #BE3E82; font-size: 2em; transition: color 5s; } .background:hover span{ color: #80D39B; }
Сделаем блок полупрозрачным с помощью CSS Transition opacity. Добавим в стили класса ".background" следующие строки:
.background{ opacity: 0.5; background-color: #80D39B; transition: background-color 5s, opacity 5s; }
Обратите внимание, что все CSS Transitions записаны в одну строку через запятую, только так они могут работать корректно.
Эту запись можно заменить на аналогичную:
transition-property: background-color, opacity; transition-duration: 5s;
В данном случае оба свойства будут изменяться в течение 5 секунд, но если необходимо установить разное время, тогда это будет выглядеть так:
transition-duration: 5s, 10s;
Теперь цвет фона меняется за 5 секунда, а непрозрачность - за 10.
Если нужна задержка старта анимации, применяем свойство transition-delay. Записывать его нужно после transition:
transition: background-color 5s, opacity 5s; transition-delay: 10s;
Весь блок стал полупрозрачным, т.е. свойство opacity применяется и к фону и к тексту (3 вариант на картинке). Если текст не должен быть полупрозрачным (4 вариант), тогда opacity нужно применять только к фону:
.background{
background-color:rgba(128, 211, 155,0.5);
}
Все вместе будет выглядеть так:
.background{ display:block; position: relative; margin-top: 50px; padding-top: 50px; text-align: center; left: 50%; top: 50px; width: 200px; height: 150px; background-color:rgba(128, 211, 155,0.5); transition: background-color 5s, opacity 5s; } .background:hover{ background-color:rgba(190, 62, 130,1); } .background span{ color: #BE3E82; font-size: 2em; transition: color 5s; } .background:hover span{ color: #80D39B; }
Анимация аккордеона с помощью CSS Transitions
Ни один аккордеон или слайдер на чистом CSS не обходится без CSS Transitions.
Рассмотрим простой пример аккордеона на основе input radio, где псевдокласс "hover" будет инициировать переход стилей из одного состояния в другое. При наведении курсора на блок высота (height) этого блока будет увеличиваться, так как это тип radio, то остальные блоки будут закрываться:
HTML:
Для начала уберем с видимой области экрана кружочки input radio:
Вам будет интересно:Программа Bonjour Service - что это такое и как ее удалить?
input[id^="number"]{ position: absolute; left: -9999px; }
CSS для блока с необходимым минимальным набором стилей:
.slider{ display: block; position: relative; width: 200px; height: 50px; text-align: center; padding-top: 50px; font-size: 3em; transition: all 1s; } label[for^="number"]:hover .slider{ background: #b2ebf2; height: 200px; }
При наведении курсора на div происходит смена цвета фона и увеличение высоты. Если вам необходимо, чтобы в блоке помещался весь текст, тогда используйте max-height 100% вместо height 200px.
Добавим тень на все блоки, чтобы при наведении курсора были видны границы аккордеона:
.wrap{ position: absolute; margin-left: 50%; margin-top: 50px; width: 200px; transition: box-shadow 1s; } .wrap:hover{ height: 550px; box-shadow: 3px 4px 10px #ddd; }
Событие "hover" инициирует смену стилей аккордеона и мы видим его размер благодаря свойству box-shadow, также увеличивается высота блока (height или max-height) и изменяется background-color.
Fade-out text: Затухание текста в CSS
На новостных сайтах, где колонок с анонсами статей очень много, можно увидеть текст, который постепенно становится почти прозрачным. Чтобы добиться такого эффекта, на большинстве ресурсов по обучению веб-программированию предлагают использовать свойство linear-gradient, но в этом случае необходимо указывать цвет градиента. А если мы заранее не знаем этот цвет? Допустим вы пишете дополнительный функционал не для одного сайта, а для CMS или Фреймворков, и вы не знаете, какой цвет шрифта или фона будет на этих сайтах. Давайте рассмотрим подходящий вариант для таких случаев.
Результат, что мы получим:
На картинке черный и желтый текст исчезают на пестром фоне и при этом мы в файле стилей не указываем эти цвета для градиента:
CSS:
.fadeout{ position: relative; -webkit-mask-size: 100% 100%; -webkit-mask: -webkit-gradient(linear, right bottom, right top, color-stop(1.00, rgba(0,0,0,1)), color-stop(0.30, rgba(0,0,0,0.7)), color-stop(0.20, rgba(0,0,0,0.5)), color-stop(0.05, rgba(0,0,0,0.1)), color-stop(0.01, rgba(0,0,0,0.09)) ); -webkit-mask-position: left bottom; -webkit-transition: -webkit-mask-position 5s ease; }
HTML:
Пестрые картинки или просто цветной background вы можете выбрать другой.
Класс "fadeout" определяет стиль текста в файле CSS с помощью свойства mask: -webkit-gradient, в результате текст плавно исчезает.
CSS Transitions - это самый простой способ выполнить анимацию. Вы можете создавать переходы от одного стиля к другому, либо с помощью сокращенного transition, либо с transition-property. Преимущество использования свойств CSS - это их надежность и неконфликтность с другими языками программирования и скриптами. Вы всегда можете быть уверены, что анимация, которая запускается с помощью transition, стабильно работает.