Примеры css3 transition: Свойство CSS transition: подробно с примерами – CSS Transition (linear, ease). . html

Плавный переход в CSS — transition на примерах

Эффект плавного перехода в CSS часто применяется при наведении курсора на какой-нибудь элемент, например для кнопки. Когда при наведении курсора, кнопка меняет свой цвет, процесс замены происходит очень быстро и резко, то хочется это действие замедлить.

Добиться эффекта плавного перехода можно с помощью CSS свойства – transition, где
all – эффект замедления применяется ко всем возможным переходам
1s – время выполнения плавного перехода
ease – способ выполнения плавного перехода

transition: all 1s ease;

Анимация кнопки при наведении

Демонстрация работы анимации кнопки, верхий рисунок: демо

Свойство transition следует прописать к элементу, в нашем случае это кнопка button, а не к его состоянию, то есть псевдоэлементу hover. Тогда плавный переход будет работать не только при наведении, но и при снятии курсора с элемента.

<h3>Плавный переход transition CSS. Кнопка</h3>
    <div>
      <a href="#">Заказать работу</a>
    </div>
.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 с текстом.

<h3>Плавный переход transition CSS. Круг</h3>
    <div>
        <span>Иконка</span>
    </div>


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{
    content: " ";
    width: 202px;
    height: 202px;
    background: #2bc6a4;
    position: absolute;
    display: block;
    border-radius: 50%;
    top: -1px;
    left: -1px;
    box-shadow: 0 0 0 0 #3d3d3d inset;
    transition: width 1s ease-in-out, height 1s ease-in-out, top 1s ease-in-out, left 1s ease-in-out;
}


Теперь необходимо сделать, чтобы при наведении зеленый круг пропадал, а вместо него появлялся черный. Поэтому мы будем делать следующее, при наведении на класс 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 в целом.

Вы можете узнать больше, просмотрев этот видеокурс «Вёрстка сайта с нуля»

• Создано 25.04.2018 09:55:00
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Transitions Переходы CSS уроки для начинающих академия

---

Переходы CSS

Переходы CSS позволяют изменять значения свойств плавно (от одного значения к другому) за заданную длительность.

Пример: Наведите указатель мыши на элемент ниже, чтобы увидеть эффект перехода CSS:

---

Поддержка браузеров для переходов

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.

Свойство
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

---

Как использовать CSS переходы?

Чтобы создать эффект перехода, необходимо указать две вещи:

• свойство CSS, к которому требуется добавить эффект
• Длительность эффекта

Примечание: Если часть Duration не указана, переход не будет иметь эффекта, так как значение по умолчанию равно 0.

В следующем примере показан элемент 100px * 100px Red <div>. Элемент <div> также указал эффект перехода для свойства Width с длительностью 2 секунды:

Пример

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

Эффект перехода начнется, когда указанное значение свойства CSS (Width) изменится.

Теперь давайте ука

Переходы в CSS | Учебные курсы

Переходы в CSS позволяют плавно перейти от одного состояния элемента к другому. Работает это так, что отдельные свойства анимируются от начального состояния до конечного.

Вы можете определить:

• transition-property: какие свойства анимируются;
• transition-duration: как долго длится анимация;
• transition-timing-function: как вычисляются промежуточные состояния;
• transition-delay: анимация начинается через некоторое время.

Вы можете установить каждое свойство CSS по отдельности или использовать сокращённую версию: transition. В этом случае, только transition-duration является обязательным.

Имейте в виду, что переход представляет собой специфический вид анимации, где есть только начальное и конечное состояние.

Быстрый пример

Переходы часто используются для состояния :hover.

a { background: lightgrey; color: grey; }
a:hover { background: yellow; color: red; }
a.with-transition { transition: 1s; }

Вместо мгновенного применения правил CSS при наведении, фон и цвет текста меняются медленно.

transition-duration

transition-duration является единственным стилевым свойством, необходимым для создания перехода. Оно может быть установлено либо в секундах (2s), либо в миллисекундах (100ms).

Если вы хотите, чтобы ваш переход длился полсекунды, то можете написать 0.5s или 500ms. В зависимости от того, насколько быстро вы хотите, чтобы длился переход, может быть проще и/или быстрее писать одну единицу.

a { background: lightgrey; color: grey; }
a:hover { background: yellow; color: red; }
a.with-fast-transition { transition: 0.5s; }
a.with-slow-transition { transition: 3s; }

transition-property

Только треть свойств CSS может быть анимирована. На сайте Mozilla есть полный список свойств.

По умолчанию у свойства transition-property значение all, это просто означает, что будут анимироваться все возможные свойства.

Вы можете разрешить анимацию только одного или нескольких свойств.

a { background: lightgrey; color: grey; }
a:hover { background: yellow; border: 5px solid blue; color: green; }
a.with-background-transition { transition-duration: 2s; transition-property: background; }
a.with-all-transition { transition: 2s; }

Свойство border полностью анимируется и позволяет легко наблюдать медленный переход (2 секунды).

transition-timing-function

Функция времени определяет, как вычисляется значение каждого свойства во время перехода.

По умолчанию переход равен ease: он ускоряется в начале и замедляется в конце.

Вы можете решить, что переход будет происходить с постоянной скоростью. Функция времени может ускорить или замедлить переход.

Самый простой способ визуализации функций времени заключается в изменении свойств позиционирования, вроде left.

CSS

div { left: 0; position: relative; transition: 1s; }
main:hover div { left: 200px; }
.ease { transition-timing-function: ease; } /* Поведение по умолчанию */
.linear { transition-timing-function: linear; } /* Постоянная скорость */
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }

HTML

<main>
  <p><strong>ease</strong>: медленно начинается, быстро в середине, медленно завершается</p>
  <div></div>
  <p><strong>linear</strong>: постоянная скорость</p>
  <div></div>
  <p><strong>ease-in</strong>: медленно начинается, быстро завершается</p>
  <div></div>
  <p><strong>ease-out</strong>: быстро начинается, медленно завершается</p>
  <div></div>
  <p><strong>ease-in-out</strong>: похоже на ease, но с более выраженным ускорением/замедлением</p>
  <div></div>
</main>

Имейте в виду, что все переходы занимают одинаковое время (1 секунда).

Если вы хотите получить представление, как работают другие функции времени, посмотрите эту шпаргалку.

cubic-bezier

Если все эти готовые функции времени не подходят, вы можете написать свою собственную, используя кривые Безье.

Сайт cubic-bezier.com — это простой инструмент для визуального написания своих собственных кривых.

transition-delay

transition-delay определяет задержку, т. е. как долго переход должен ждать, прежде чем начнётся на самом деле.

Как и с transition-duration вы можете использовать секунды (s) или миллисекунды (ms).

CSS

a { background: blue; color: white; transition: all 1s; }
div:hover a { background: red; }
a.with-delay { transition-delay: 1s; }

HTML

<div>
  <p>Наведите курсор на серую область</p>
  <a>Без задержки</a>
  <a>С секундной задержкой</a>
</div>

Перейти к заданиям

Свойство CSS transform — трансформация CSS | POPULYARNO.COM

Описание

Свойство CSS3 transition позволяет сделать анимационный переход от одного значения стиля элемента к другому. Свойство transition целесообразно применять в том случае, когда к элементу нужно добавить различные визуальные эффекты перехода, но требуется ограничиться лишь стилями CSS без флэш-анимации и скриптов.

transition
Значения:	нет
Начальное значение:	нет
Область применения:	все элементы, псевдоэлементы :before и :after
Наследование:	нет
Поддержка браузерами:	Internet Explorer 10+ (-ms), Chrome 1+ (-webkit), Opera 10.5+, Safari 3+ (-webkit), Firefox 1+ (-moz)
Версия CSS:	CSS 3
Примечание:

Значения

transition

Сокращенное свойства для указания значений всех четырех свойств в одно

transition-property

Определяет имя свойства CSS для которого применяется эффект

По умолчанию — all

transition-duration

Определяет длительность эффекта

По умолчанию — 0

transition-timing-function

Определяет как будет изменяться скорость во время перехода

По умолчанию — ease

transition-delay

Определяет задержку до начала эффекта

По умолчанию — 0

Синтаксис

transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

Пример

ДЕМО
Первый пример представляет плавное изменение высоты блочного элемента за 1 секунду

div {
	transition: height 1s;
	-webkit-transition: height 1s; /* Safari and Chrome */
	-moz-transition: height 1s; /* Firefox 4 */
	-o-transition: height 1s; /* Opera */
}

аналогично можно сделать и для изменения ширины

div {
	transition: width 2s;
	-webkit-transition: width 2s; /* Safari and Chrome */
	-moz-transition: width 2s; /* Firefox 4 */
	-o-transition: width 2s; /* Opera */
}

Если не указать длительность transition-duration эффекта, то переход будет мгновенным, так как значение длительности по-умолчанию 0.
А вот значение по-умолчанию для transition-property является all, так что если его не указывать, то анимации будет подвержены все изменения стилей (пример 3).
Анимация начинается только после изменения свойств объекта посредством псевдоклассов.
В приведенном ниже примере при наведении мыши на блоки (div:hover) изменяются их размеры

div {
	width:100px;
	height:100px;
	transition: width 2s;
	-webkit-transition: width 2s; /* Safari and Chrome */
	-moz-transition: width 2s; /* Firefox 4 */
	-o-transition: width 2s; /* Opera */
div:hover {
	width:200px;
}

После того как курсор мыши выходит за пределы блоков, они принимают первоначальный вид, а, значит, их свойства принимают прежние значения.
Также возможно раздельно задать параметры анимации для изменения свойств объекта и для возврата их в первоначальное состояние.
В примере ниже ширина блока при наведении на него курсора мыши увеличивается за полсекунду, а возвращается в исходное состояние за 3 секунды.

div {
	width:100px;
	height:100px;
	transition: width 3s;
	-webkit-transition: width 3s; /* Safari and Chrome */
	-moz-transition: width 3s; /* Firefox 4 */
	-o-transition: width 3s; /* Opera */
}
div:hover {
	width:200px;
	transition: width 1s;
	-webkit-transition: width 1s; /* Safari and Chrome */
	-moz-transition: width 1s; /* Firefox 4 */
	-o-transition: width 1s; /* Opera */
}

Чтобы добавить эффект перехода для более чем одного стиля, нужно просто в значении transition перечислить их все, разделяя запятыми

div {
	transition: width 2s, height 2s, background 2s;
	-moz-transition: width 2s, height 2s, background 2s;
	-webkit-transition: width 2s, height 2s, background 2s;
	-o-transition: width 2s, height 2s, background 2s;
}

И напоследок разберемся еще с оним свойством CSS3 transition, которое мы еще не применяли.
transition-timing-function — описывает, как будут рассчитываться промежуточные значения перехода от начального положения (состояния) к конечному. Или, другими словами, как будет изменяться скорость перехода в зависимости от его продолжительности.
transition-timing-function может принимать одно из следующих значений:

ease

быстрый переход;

linear

линейный переход;

ease-in

плавное начало;

ease-out

плавный конец;

ease-in-out

плавные начало и конец;

cubic-bezier

зависит от введенных вручную значений (cubic-bezier(х1,у1,х2,у2)).

На примерах 6-11 можно посмотреть все значения этого свойства в действии.