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

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

В отличие от функций, таких как радиус границ, тени-блока, и тени-текста, которые являются частью стабильной спецификации W3C, переходы и анимации все еще находятся на стадии развития. Таким образом, в данном случае, same markup должен быть квалифицирован с единой разметкой, за исключением поставщиков префиксов. Я уже писал о этих функциях в статье « Инструменты оформления HTML5 CSS3 ». Пользователям желающие поэкспериментировать в разных браузерах, необходимо скопировать пример и добавить по мере необходимости -webkit- to -ms- , -moz- , или -o- .

Переходы CSS3

Функция перехода 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=
http://pixelcom.crimea.ua/"imageB.jpg" alt="" />
<img id="frontImage" src=
http://pixelcom.crimea.ua/"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 похожа на переходы 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-mode forwards значение этого свойства означает сохранить значения свойств 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 анимацию, в том числе в IE10 11

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>