Переходы и Анимация

CSS3 позволяет веб-разработчикам создавать переходы и анимации. Две взаимосвязанные функции переходы и анимации, дают веб-разработчикам декларативный способ добавить на веб страницу свою анимацию. Почти все новые возможностей CSS3 переходы и анимация на основе стандартов реализованные с same markup.

Оглавление:
  1. Переходы
  2. Анимация

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627

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

Переходы

Функция перехода CSS3 очень проста: плавно изменить значение свойства CSS, со старого на новое значение. Кроме того в CSS для элемента или псевдокласса также работают переходы.

Рассмотрим следующую разметку:

img {
opacity: 1;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 0s;
transition-timing-function: linear;
}
img:hover {
opacity: 0;
}

В результате, когда пользователь наводит свой курсор на изображение, изображение будет исчезать плавно в течении 2 секунд, и начнёт сразу же появятся другое изображение.

HTML

<div id="imageWrapper">
<img id="backImage" src="imageB.jpg" alt="" />
<img id="frontImage" src="imageA.jpg" alt="" />
</div>

CSS

#imageWrapper {
display: inline-block;
width: 400px;
height: 267px;
box-shadow: 2px 2px 5px 0px gray;
position: relative;
}
#imageWrapper img {
width: 400px;
height: 267px;
position: absolute;
transition-property: opacity;
transition-duration: 2s;
transition-timing-function: linear;
}
#imageWrapper #frontImage, #imageWrapper:hover #backImage {
opacity: 1;
}
#imageWrapper:hover #frontImage, #imageWrapper #backImage {
opacity: 0;
}

Результат
Переместите курсор на изображение, чтобы поменять его на другое изображение.


Ending image of fade one image to another example
Starting image of fade one image to another example

Простые переходы легко смоделировать в JavaScript. Преимущества переходов CSS3 в том, что они легче чем JavaScript, и они плавно работают по крайней мере в IE10.

К началу

Анимация

Анимации CSS3 похожа на переходы CSS3 в том, что они работают плавно в течении времени.

Различия:

  • А — указывает свойства для анимации
  • Б — из триггеров анимации
  • С — сложность анимации

Вы определяете анимации с помощью кадров в свойствах CSS. Свойства простых кадров, которое соответствует fade out поведение перехода будет.

CSS непрозрачность:

@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

CSS анимации:

img {
animation-duration: 2s;
animation-delay: 0s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
img:hover {
animation-name: fadeOut;
}

Новые свойства

  • animation-fill-modeforwards значение этого свойства означает сохранить значения свойств to, из конца анимации к началу во времени. Значение по умолчанию этого свойства none, что приводит к началу не анимационных значений в конце свойств анимации. (Это можно сделать в CSS без использования animation-fill-mode. Просто добавьте opacity: 0; для img:hover правила для конечный непрозрачности 0.)
  • animation-name – установка свойства animation-name триггеров анимации. Когда задано свойство animation-name, animation-delay время начинает обратный отсчет. Когда animation-delay достигает нуля, анимация начинается и продолжается в течение длительности анимации. Animation-timing-function работает так же, как и описанный выше переход timing-function.

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

Анимация CSS3 (отскок)

#bouncingImage {
width: 400px;
height: 267px;
box-shadow: 2px 2px 5px 0px gray;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}

#bouncingImage:hover {
animation-name: zoomInBounce;
}

@keyframes zoomInBounce {

from {
transform: scale(1);
}
30% {
transform: scale(1.4);
}
40% {
transform: scale(1.15);
}
50% {
transform: scale(1.35);
}
60% {
transform: scale(1.2);
}
70% {
transform: scale(1.3);
}
80% {
transform: scale(1.225);
}
90% {
transform: scale(1.275);
}
to {
transform: scale(1.25);
}
}

Наведите курсор на изображение, чтобы увеличить его с эффектом отскока.

Image used in the zoom in with bounce example

Демонстрация работает во всех браузерах, которые поддерживают CSS3 анимацию, в том числе в Internet Explorer 10 — 11

54321
(0 голосов, в среднем: 0 из 5)