Переходы в CSS

Оцените материал
(0 голосов)

Здравствуйте! От трансформаций в CSS перейдем к переходам да простят меня за тавтологию. Переход (transition) представляет анимацию от одного стиля к другому в течение определенного периода времени.

Для создания перехода необходимы прежде всего два набора свойств CSS: начальный стиль, который будет иметь элемент в начале перехода, и конечный стиль - результат перехода. Так, рассмотрим простейший переход:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Переход в CSS3</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                margin: 40px 30px;
                border: 1px solid #333;
                 
                background-color: #ccc;
                transition-property: background-color;
                transition-duration: 2s;
            }
            div:hover{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Просмотреть  пример

 

 Итак, здесь анимируется свойство background-color элемента div. При наведении указателя мыши на элемент он будет менять цвет с серого на красный. А при увеении указателя мыши с пространства элемента будет возвращаться исходный цвет. Чтобы указать свойство как анимируемое, его название передается свойству transition-property

transition-property: background-color;

Вообще анимировать можно множество разных свойств, такие как color, background-color, border-color. Полный список свойств CSS, которые поддаются анимации, можно найти по адресу www.w3.org/TR/css3-transitions/#animatable-properties. Далее идет установка времени перехода в секундах с помощью свойства transition-duration:

transition-duration: 2s;

Кроме секунд можно устанавливать значения в миллисекундах, например, 500 миллисекунд:

transition-duration: 500ms;

И в конце нам надо определить инициатор действия и финальное значение анимируемого свойства background-color. Инициатор представляет действие, которое приводит к изменению одного стиля на другой. В CSS для запуска перехода можно применять псевдоклассы. Например, здесь для создания перехода используется стиль для псевдокласса :hover. То есть при наведении указателя мыши на элемент div, будет срабатывать переход. Кроме псевдокласса :hover можно использовать и другие псевдоклассы, например, :active (ссылка в нажатом состоянии) или :focus (получение элементом фокуса). Также для запуска перехода можно использовать код JavaScript.

Анимация набора свойств

При необходимости мы можем анимировать сразу несколько свойств CSS. Так, в выше приведенном примере изменим стили следующем образом:

div{
    width: 100px;
    height: 100px;
    margin: 40px 30px;
    border: 1px solid #333;
    background-color: #ccc;
     
    transition-property: background-color, width, height, border-color;
    transition-duration: 2s;
}
div:hover{
    background-color: red;
    width: 120px;
    height: 120px;
    border-color: blue;
}

Здесь анимируются сразу четыре свойства. Причем анимация для них всех длится 2 секунды, но мы можем для каждого свойства задать свое время:

transition-property: background-color, width, height, border-color;
transition-duration: 2s, 3s, 1s, 2s;

Подобно тому как в свойстве transition-property через запятую идет перечисление анимируемых свойств, в свойстве transition-duration идет перечисление через запятую временных периодов для анимации этих свойств. Причем сопоставление времени определенному свойству идет по позиции, то есть свойство width будет анимироваться 3 секунды.

Кроме перечисления через запятую всех анимируемых свойств мы можем просто указать ключевое слово all:

transition-property: all;
transition-duration: 2s;

Теперь будут анимироваться все необходимые свойства, которые меняют значения в стиле для псевдокласса :hover.

Функции анимации

Свойства transition-timing-function позволяет контролировать скорость хода и выполнение анимации. То есть данное свойство отвечет за то, как и в какие моменты времени анимация будет ускоряться или замедляться.

В качестве значения это свойство может принимать одну из функций:

  • linear: линейная функция плавности, изменение свойства происходит равномерно по времени

  • ease: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

  • ease-in: функция плавности, при которой происходит только ускорение в начале

  • ease-out: функция плавности, при которой происходит только ускорение в начале

  • ease-in-out: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

  • cubic-bezier: для анимации применяется кубическая функция Безье

Применим функцию ease-in-out:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Переход в CSS3</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                margin: 40px 30px;
                border: 1px solid #333;
                 
                background-color: #ccc;
                transition-property: background-color, width;
                transition-duration: 2s, 10s;
                transition-timing-function: ease-in-out;
            }
            div:hover{
                background-color: red;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Просмотреть  пример

Для использования кубической Безье в функцию cubic-bezier необходимо передать ряд значений:

transition-timing-function: cubic-bezier(.5, .6, .24, .18);

Задержка перехода

Свойство transition-delay позволяет определить задержку перед выполнением перехода:

transition-delay: 500ms;

Временной период также указывается в секундах (s) или миллисекундах (ms).

Свойство transition

Свойство transition представляет сокращенную запись выше рассмотренных свойств. Например, следующее описание свойств:

transition-property: background-color;
transition-duration: 3s;
transition-timing-function: ease-in-out;
transition-delay: 500ms;

Будет аналогично следующей записи:

transition: background-color 3s ease-in-out 500ms;

Прочитано 693 раз Последнее изменение Суббота, 08 октября 2016 18:57
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+