Переходы
Чтобы переход имел место, элемент должен получить изменение состояния и для каждого состояния должны быть определены разные стили. Самый простой способ задать стили для различных состояний — это воспользоваться псевдоклассами:hover,:focus,:active и:target.
Есть четыре свойства, связанных с переходами в целом, это transition-property, transition-duration, transition-timing-function и transition-delay. Не все они обязательны для создания перехода, наиболее популярны первые три.
В приведённом ниже примере блок изменит цвет фона в течение одной секунды в линейном виде.
Трансформация
Вместе с CSS3 появились новые способы позиционирования и изменения элементов. В настоящее время основные техники вёрстки могут быть пересмотрены с альтернативными методами для размера, положения и изменения элементов. Все эти новые техники стали возможными благодаря свойству transform.
Свойство transform поставляется в двух разных наборах — двумерных и трёхмерных. В каждом из них есть свои индивидуальные свойства и значения.
Использование значения scale в свойстве transform позволяет изменить визуальный размер элемента. Значение масштаба по умолчанию равно 1, поэтому любое значение от.99 до.01 визуально уменьшает элемент, в то время как любое значение больше или равное 1.01 визуально увеличивает элемент.
| HTML <figure class="box-1">Блок 1</figure> <figure class="box-2">Блок 2</figure> | CSS .box-1 { transform: scale(.75); } .box-2 { transform: scale(1.25); } |
Анимация
Переходы выполняют большую работу по созданию визуальных взаимодействий из одного состояния в другое и идеально подходят для этих видов одиночных изменений состояния. Тем не менее, когда требуется больший контроль, для переходов необходимо несколько состояний. С этого момента переходы уходят, а в дело вступает анимация.
Ключевые кадры анимации
Чтобы установить несколько точек, в которых элемент должен совершать переход, используется правило @keyframes. Это правило включает имя анимации, любое число контрольных точек, а также свойства, предназначенные для анимации.
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
left: 244px;
top: 100px;
}
100% {
left: 488px;
top: 0;
}
}
Анимация выше называется slide, состояния начинаются сразу же после открытия правила @keyframes. Разные контрольные точки ключевых кадров задаются помощью процентов, начиная с 0% и работая до 100%, с промежуточной точкой на 50%. При желании вместо 0% и 100% могут быть использованы ключевые слова from и to. Кроме 50% также могут быть указаны дополнительные контрольные точки. Свойства элементов для анимации перечислены внутри каждой контрольной точки, left и top в приведённом выше примере.
Важно отметить, как и с переходами, могут быть анимированы только отдельные свойства. Подумайте, как вы могли бы переместить элемент сверху вниз, например. Попытка анимировать от top: 0 до bottom: 0 не будет работать, потому что анимация может применять только переход в пределах одного свойства, а не от одного свойства к другому. В этом случае элемент необходимо анимировать от top: 0 до top: 100%.
ВЫПОЛНЕНИЕ ЗАДАНИЯ ПО ОБРАЗЦУ:
Задание 1 (Переходы)
В примере блок должен изменить цвет фона в течение одной секунды в линейном виде
| HTML <div class="box">Блок</div> | CSS body { color: #fff; font: 600 24px; } .box { background: #2db34a; border-radius: 6px; cursor: pointer; height: 95px; line-height: 95px; text-align: center; transition-property: background; transition-duration: 1s; transition-timing-function: linear; width: 95px; } .box:hover { background: #ff7b29; } |
Результат
 
| 
|
Задание 2 (Переходы)
В примере блок меняет свою форму:
| HTML <div class="box">Блок</div> | CSS body { color: #fff; font: 600 24px; } .box { background: #2db34a; border-radius: 6px; cursor: pointer; height: 95px; line-height: 95px; text-align: center; transition-property: background; transition-duration: 1s; transition-timing-function: linear; width: 95px; } .box:hover { background: #ff7b29; } |
| Результат
| 
|
Задание 3 (Трансформация)
Вращение блоков:
| HTML div class="original"> <div class="spin"> <figure class="box box-1">Блок 1</figure> </div> </div> <div class="original"> <div class="spin"> <figure class="box box-2">Блок 2</figure> </div> </div> <div class="original"> <div class="spin"> <figure class="box box-3">Блок 3</figure> </div> </div> | CSS body { color: #fff; font: 600 14px; } figure { margin: 0; } .original, .box { border-radius: 6px; } .original { background: #eaeaed; border: 1px dashed #cecfd5; float: left; margin: 12px 15px; } .box { background: #2db34a; height: 95px; line-height: 95px; text-align: center; width: 95px; } .spin { cursor: pointer; transform-style: preserve-3d; } .spin:hover { animation: spin 5s linear infinite; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .box-1 { transform: translateX(-10px); } .box-2 { transform: translateY(25%); } .box-3 { transform: translate(-10px, 25%); } |
Задание 4 (Трансформация)
Переворачивающаяся карточка
| HTML <div class="card-container"> <div class="card"> <div class="side"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/jimmy.jpg" alt="Jimmy Eat World"></div> <div class="side back">Jimmy Eat World</div> </div> </div> | CSS body { font: 600 14px; } .card-container { cursor: pointer; height: 150px; perspective: 600; position: relative; width: 150px; } .card { height: 100%; position: absolute; transform-style: preserve-3d; transition: all 1s ease-in-out; width: 100%; } .card:hover { transform: rotateY(180deg); } .card.side { backface-visibility: hidden; border-radius: 6px; height: 100%; position: absolute; overflow: hidden; width: 100%; } .card.back { background: #eaeaed; color: #0087cc; line-height: 150px; text-align: center; transform: rotateY(180deg); } |
Задание 5 (Анимация)
При наведении курсора на шарик происходит анимация.
| HTML <div class="stage"> <figure class="ball"></figure> </div> | CSS @keyframes slide { 0% { left: 0; top: 0; } 50% { left: 244px; top: 100px; } 100% { left: 488px; top: 0; } } .stage { background: #eaeaed; border-radius: 6px; height: 150px; position: relative; min-width: 538px; } .stage:hover.ball { animation-name: slide; animation-duration: 2s; animation-timing-function: ease; animation-delay:.5s; } .ball { background: #2db34a; border-radius: 50%; height: 50px; position: absolute; width: 50px; } figure { margin: 0; } |
САМОСТОЯТЕЛЬНОЕ ВЫПОЛНЕНИЕ
ЗАДАНИЕ 1 (Переходы)
Проверить правильность выполнения можно в онлайн редакторе (https://webref.ru/practice/2657)
ЗАДАНИЕ 2 (Трансформация)
Проверить правильность выполнения можно в онлайн редакторе (https://webref.ru/practice/2658)
ЗАДАНИЕ 3 (Анимация)
Переместить объект с помощью правила @keyframes.
Домашнее задание
Выполненную работу оформить как отчет по учебной практике (с описанием выполнения задания+скриншоты) и отправить отдельным файлом (электронный документ) на электронную почту мастеру п/о (ol.sklyarova2015@gmail.com). В случае возникновения вопросов по работе звоните мастеру п/о.
Если такой возможности нет, отчет предоставить в распечатанном (электронном) виде после возобновления занятий.