Создайте анимацию переворота в CSS


Содержание материала:

CSS-анимации

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/css-animations.

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.

CSS transitions

Идея проста. Мы указываем, что некоторое свойство будет анимироваться при помощи специальных CSS-правил. Далее, при изменении этого свойства, браузер сам обработает анимацию.

Например, CSS, представленный ниже, 3 секунды анимирует свойство background-color .

Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.

При клике на эту кнопку происходит анимация её фона:

Есть всего 5 свойств, задающих анимацию:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Далее мы изучим их все, пока лишь заметим, что общее свойство transition может перечислять их все, в порядке: property duration timing-function delay , а также задавать анимацию нескольких свойств сразу.

Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

Далее мы рассмотрим свойства анимации по отдельности.

transition-property

Список свойств, которые будут анимироваться, например: left , margin-left , height , color .

Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».

transition-duration

Продолжительность анимации, задаётся в формате CSS time, то есть в секундах s или ms .

transition-delay

Задержка до анимации. Например, если transition-delay: 1s , то анимация начнётся через 1 секунду после смены свойства.

Возможны отрицательные значения, при этом анимация начнётся с середины.

Например, вот анимация цифр от 0 до 9 :

Она осуществляется сменой margin-left у элемента с цифрами, примерно так:

В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:

Можно стартовать её «с середины», с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного transition-delay .

В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:

В JavaScript это делается дополнительной строкой:

transition-timing-function

Временнáя функция, которая задаёт, как процесс анимации будет распределён во времени, например начнётся ли анимация медленно, чтобы потом ускориться или наоборот.

Самое сложное, но при небольшом изучении – вполне очевидное свойство.

У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.

Кривая Безье

В качестве временной функции можно выбрать любую кривую Безье с 4 опорными точками, удовлетворяющую условиям:

  1. Начальная точка (0,0) .
  2. Конечная точка (1,1) .
  3. Для промежуточных точек значения x должны быть в интервале 0..1 , y – любыми.

Синтаксис для задания кривой Безье в CSS: cubic-bezier(x2, y2, x3, y3) . В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.

Она указывает, как быстро развивается процесс анимации во времени.

  • По оси x идёт время: 0 – начальный момент, 1 – конец времени transition-duration .
  • По оси y – завершённость процесса: 0 – начальное значение анимируемого свойства, 1 – конечное.

Самый простой вариант – это когда процесс развивается равномерно, «линейно» по времени. Это можно задать кривой Безье cubic-bezier(0, 0, 1, 1) .

График этой «кривой» таков:

…Как видно, это просто прямая. По мере того, как проходит время x , завершённость анимации y равномерно приближается от 0 к 1 .

Поезд в примере ниже с постоянной скоростью «едет» слева направо, используя такую временную функцию:

Плавная анимация перемещения с помощью CSS

Большая часть того, что приносит нам удовольствие в анимации, связано с перемещением по экрану различных объектов. hover эффекты CSS привлекают внимание пользователей к контенту, определенной части интерфейса и улучшают общее восприятие ресурса.

Перемещение может быть немного сумасшедшим, как это:

Your browser does not support inline frames or is currently configured not to display inline frames.

Перемещение может быть и не таким явным. Например, таким, которое возникает при наведении курсора мыши на один из квадратов на рисунке ниже:

Your browser does not support inline frames or is currently configured not to display inline frames.

В приведенных примерах перемещение реализовано с помощью CSS . И анимация, и переходы CSS позволяют чрезвычайно просто перейти от статики к движению. Но, несмотря на эту простоту, есть определенные нюансы, которые нужно учитывать, чтобы CSS hover эффект при наведении работал плавно. В этой статье я расскажу именно о них.

Преобразование с помощью translate3d()

При перемещении элемента изменяется его вертикальная и горизонтальная позиции. Существуют несколько свойств CSS , которые применяются для этого. Но я хочу порекомендовать вам использовать функцию translate3d свойства transform вместо привычных margin , padding , left , top , потому что она обеспечивает более плавную анимацию.

Функция translate3d принимает три аргумента, но сначала рассмотрим те, которые отвечают за перемещение содержимого по горизонтали и вертикали:

Аргумент Х задает перемещение по горизонтали, Y — по вертикали. Например, если вы хотите переместить содержимое на 20 пикселей вправо и вверх, функция translate3d должна выглядеть следующим образом:

Третий аргумент, который определяет перемещение по оси Z , мы рассматривать не будем. Так как нас интересует 2d-hover эффекты CSS .

Как видите, функция translate3d не особенно сложная. Далее мы рассмотрим, как использовать ее в анимации CSS для создания движения.

Переход

Чтобы использовать это свойство в переходе, нужно выполнить два этапа. Сначала необходимо указать transform в качестве свойства, которое должно отслеживать переход:

Определив переход, вы можете задать свойство transform с функцией translate3d :

Как показано в примере, приведенном в начале статьи, CSS hover эффект при наведении курсора мыши на любой из элементов приводит к смещению изображения вверх на 150 пикселей.

Анимация

В случае анимации, убедитесь, что ключевые кадры в @keyframes содержат свойство transform с translate3d :

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

Не забывайте о префиксах

Чтобы разметка работала в различных браузерах, обязательно используйте для свойства transform вендорные префиксы или библиотеку — prefix-free .

Переходы с помощью JavaScript

Также можно создавать анимацию перемещения в JavaScript . Те же правила действуют и здесь. Сначала нужно установить позицию, используя transform translate3d , но в JavaScript это немного сложнее.

Фрагмент кода, который нужен для этого, выглядит следующим образом:

Этот код кажется сложным потому, что мы используем префиксы и проверяем соответствие используемой версии функции transform .

Почему нам не подходит установка позиции с помощью margin , top , left и т.д.?

Если у вас нет на то особой причины, не используйте для создания hover эффектов CSS свойства margin , padding , top , left , bottom или right . Хотя это может показаться противоречащим здравому смыслу. Позвольте мне пояснить…

Ненужные вычисления

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

Вы можете задать для position элемента, который вы перемещаете, значение fixed или absolute . Это избавит браузер от необходимости вычислять макет для всего документа. Но в этом случае браузер все равно выполняет вычисления для элемента, который перемещается. И результат применения translate3d не обязательно будет идентичен результату, получаемому при использовании margin , padding и т.д. Более того, как вы увидите в следующем разделе, они не будут на 100% идентичны.

Аппаратное ускорение

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

GPU предназначен только для обработки задач, связанных с отображением на экране. В то же время процессор параллельно обрабатывает огромное количество разнообразных задач. И для того, чтобы ваша анимация отображалась плавно, нельзя пренебрегать этой закономерностью. Разница в плавности отображения анимации может быть не сильно заметна на мощном стационарном компьютере или ноутбуке, но явно проявится на мобильных устройствах. Из личного опыта могу сказать, что на этих устройствах анимация с использованием CPU проигрывается более прерывисто, чем та, которая использует GPU .

А как обеспечить, чтобы анимация в режиме аппаратного ускорения использовала GPU ? Применить translate3d ! При преобразовании элемента с помощью translate3d он обрабатывается через GPU в Webkit-браузерах , таких как Chrome и Safari ( которые установлены на iPhone и iPad ), в Internet Explorer 9/10 , а также в последних версиях Firefox . Это дает translate3d явные преимущества.

Как насчет JavaScript?

Что касается hover эффектов CSS , созданных на JavaScript , где все интерполяции обрабатывается кодом, я на самом деле не знаю, является ли использование GPU таким продуктивным. Но для установки с помощью JavaScript переходов и анимации CSS со свойством translate3d используется GPU .

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

Боже, благослови преобразования!

Причина, по которой transform является более производительным, заключается в том, что оно не затрагивают никакие другие элементы. Любые действия, которые вы выполняете, применяются только к одному элементу, и браузеру не нужно перестраивать все окно. Он модифицирует только ту часть экрана, которая содержит перемещающийся контент. Это не зависит от того, задействован GPU или нет.

Поэтому при использовании translate3d вы получаете преимущества локальной перестройки экрана. Но кроме этого, вы получаете дополнительные преимущества, так как вся работа выполняется GPU .

Топ-пост этого месяца:  Новая версия Angular 5.1, а также CLI 1.6 и Material поддержка Service Worker и другие улучшения

Данная публикация представляет собой перевод статьи « Animating Movement Smoothly Using CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

Функция rotate в CSS: двумерное вращение элемента

Функция rotate() в CSS осуществляет над элементом двумерную трансформацию вращения вокруг неподвижного центра. Блок при этом не деформируется и не влияет на положение соседних HTML-контейнеров. Метод позволяет указать угол поворота. Кроме того, существует возможность задать произвольный центр вращения.

Трансформация блока

В CSS rotate() является функцией трансформации, поэтому она должна быть передана свойству transform элемента.

В качестве первого и единственного аргумента передается угол, на который будет повернут объект. Вращение осуществляется в двумерном пространстве. Для трехмерных трансформаций существуют функции в CSS rotateX(), rotateY(), rotateZ() и rotate3d().

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

Угол поворота

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

Центр вращения

По умолчанию вращение блока осуществляется вокруг его геометрического центра. Для изменения этой точки необходимо воспользоваться свойством transform-origin.

По стандарту оно принимает три параметра, которые определяют координаты по осям X, Y и Z. Но так как rotate() в CSS является двумерной трансформацией, достаточно будет передать только два значения.

Координата по каждой оси может быть определена в любых валидных единицах длины, процентах от размера блока или с помощью ключевых слов top, bottom, left, right. Начало координат располагается в верхнем левом углу прямоугольного контейнера.

Анимация вращения

Свойство transform хорошо поддается динамическому изменению, следовательно, CSS позволяет создать анимацию вращения элемента в двумерном пространстве.

Если требуется вращать объект в ответ на определенное пользовательское действие, например наведение курсора, можно воспользоваться CSS-свойством transition, определяющим замедленное изменение значения других свойств.

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

Более сложным способом анимации объекта является определение для него последовательности смены кадров с помощью свойств группы animation и правила @keyframes.

К указанному элементу применяется анимация rotate, определяющая полный поворот от 0 до 360 градусов в течение двух секунд. Свойство animation-iteration-count устанавливает повторение анимации до бесконечности, а animation-timing-function — плавный эффект перехода. Сочетание свойства в CSS animation с rotate-трансформаций позволяет создавать красивые динамические эффекты.

Анимация элементов в CSS. Часть 1.

Ранее в статье учебника «Переходные эффекты в CSS» мы с Вами познакомились с эффектами, которые позволяют анимировать переход от одного набора CSS свойств к другому (transition ). CSS3 предоставляет нам еще один более мощный инструмент создания анимации, который не ограничивается выполнением одного перехода, а позволяет создавать неограниченное количество таких переходов.

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

Рис. 190 Пример покадровой анимации.

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

Этапы создания анимации

Давайте рассмотрим из чего же состоит процесс создания анимации в CSS. Для начала Вам необходимо определить ключевые кадры анимации. Что из себя представляет ключевой кадр? Представьте себе элемент, который позиционируется слева от окна браузера и Вам необходимо осуществить его анимацию до середины окна и вернуть его в первоначальное положение. Для этой анимации нам потребуется три ключевых кадра:

  • Первый – определяет начальное положение элемента.
  • Второй – определяет положение элемента после смещения элемента до середины окна.
  • Третий – определяет конечную точку анимации (начальное положение элемента).

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

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

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

Прежде чем мы перейдем к созданию анимации, хочу обратить Ваше внимание на текущую поддержку свойств анимации браузерами:

Chrome

Firefox Opera Safari IExplorer Edge
43.0
4.0
-webkit-
16.0
5.0
-moz-
30.0
15.0
-webkit-
9.0
4.0
-webkit-
10.0 12.0

Определение ключевых кадров

В CSS правило @keyframes позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров в процессе анимации. Это дает возможность точнее контролировать процесс анимации вручную, задавая для нее промежуточные шаги.

Для создания ключевых кадров необходимо придерживаться следующего синтаксиса:

    Имя анимации (animationName). Чтобы использовать ключевые кадры, создается правило @keyframes с произвольным именем анимации, которое впоследствии используется в свойстве animation-name , либо в универсальном свойстве animation для добавления списка ключевых кадров в анимацию, но об этом позднее.
    Имя анимации может состоять из латинских букв без учета регистра от A до Z, цифр от до 9, знака подчеркивания (_), и/или тире (). Обращаю Ваше внимание на то, что первый символ должен быть буквой (то есть не должен начинаться с числа, даже если перед ним ставится тире). Два тире подряд запрещены в начале имени. Кроме того, не могут использоваться специальные зарезервированные слова, такие как none , unset , initial , или inherit в любом сочетании.

Cелектор ключевого кадра ( from | to | % ) представляет из себя процент от продолжительности анимации. Допустимые значения: Каждое правило @keyframes должно содержать список стилей для селекторов ключевых кадров, каждый из которых задаёт процент для анимации, при котором происходит ключевой кадр. Указать, когда происходит смена стиля необходимо в процентах ( 0% — соответствует началу анимации, 100% — соответствует завершению анимации), или с помощью ключевых слов «from» и «to» , которые соответствуют процентным значениям 0% и 100% .
Для корректного проигрывания анимации, ключевые кадры должны содержать начало цикла и его конец (значения 0% | from и 100% | to ). Допускается использовать множество селекторов ключевого кадра, при этом перечислять ключевые кадры возможно в любом порядке, так как браузер их обрабатывает не в порядке размещения, а в зависимости от значения процента (от меньшего значения к большему). Если анимация имеет те же начальные и конечные свойства, то вы можете перечислить их через запятую: 0%, 100% <> .

  • CSS стили (css-styles) — одно или несколько допустимых (анимируемых) свойств стиля CSS. Если по какой-то причине вы решили включить в правило свойства, которые не могут быть анимированы, то они будут проигнорированы браузером, а свойства, которые могут быть анимированы будут включены в анимацию. Узнать является ли свойство анимируемым, вы можете в справочнике CSS в описании интересующего Вас свойства.
  • Свойства, указанные в ключевом кадре со значением !important игнорируются. Ранее в статье «Каскадность в CSS» (раздел «Нюансы конфликтов») мы уже с Вами затрагивали вопросы об отмене значимости стилей.

    Предположим, что нам необходимо создать анимацию увеличения элемента, при которой элемент будет изменять цвет заднего фона:

    С помощью процентных значений мы определили три ключевые кадра, где происходит изменение. Первоначально элемент к началу анимации получает значение ширины равной 50 пикселям и цвет заднего фона желтый, к 50% процентам анимации (середина анимации) он должен быть уже 100 пикселей и иметь цвет заднего фона зеленый, а к завершению анимации ширина элемента должна составлять 200 пикселей, а цвет заднего фона должен быть красный.

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

    Следующее CSS свойство, которое мы уже упоминали — animation-name , оно указывает имя анимации, или список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает (ссылается) на правило (@keyframes ), которое определяет значения свойств анимации. Но в одиночку мы не сможем рассмотреть это свойство, так как, чтобы запустить любую анимацию нам необходимо указать её продолжительность.

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

    Все свойства анимации animation-* и универсальное свойство animation , по аналогии с правилом @keyframes , требуют указания вендорных префиксов ( -moz- и –webkit- ) для поддержки более широкого круга браузеров.

    Продолжительность анимации

    Как минимум, чтобы анимация начала воспроизводиться, необходимо указать её имя, которое было указано в правиле @keyframes и задать её продолжительность. В CSS свойство animation-duration определяет, сколько секунд, или миллисекунд затрачивается на выполнение одного цикла анимации.

    После того как у нас определены минимальные требования для выполнения анимации, необходимо применить её к интересующему нас элементу, или элементам страницы. Обратите внимание, что, если просто добавить анимацию к стилю какого-либо элемента, то анимация будет воспроизведена при загрузке страницы.

    Перейдем к рассмотрению примера, в котором мы будем анимировать увеличение элементов:

    В этом примере мы создали простую анимацию, в которой происходит постепенное увеличение ширины элемента и изменение цвета заднего фона к середине и к концу цикла анимации. С использованием псевдокласса :nth-child() и свойства animation-duration мы указали различные значения продолжительности анимации для элементов

    Кроме того, для того, чтобы инициировать воспроизведение анимации, мы создали стиль, который свойством animation-name задает имя анимации для элемента

    Результат нашего примера:

    Рис. 191 Продолжительность анимации в CSS.

    Рассмотрим следующий пример в котором мы создадим несколько различных анимаций и назначим их одному элементу.

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

    Свойством animation-duration мы указали продолжительность анимации для элементов

    Результат нашего примера:

    Рис. 192 Установка нескольких анимаций у одного элемента.

    Количество анимационных циклов

    По умолчанию любая анимация в CSS будет воспроизведена только один раз. Благодаря свойству animation-iteration-count мы сможем указывать сколько раз будет проигрываться анимационный цикл, это может быть, как произвольное число раз, либо указать, что анимация будет воспроизводиться бесконечно, в некоторых случаях это очень полезно.

    Обратите внимание на то, что запрещается указывать отрицательные значения по объективным причинам, но допускается указывать не целые значения, при этом будет проигрываться только часть анимационного цикла — пропорционально указанному значению (например, значение 1.5 соответствует воспроизведению анимационного цикла полтора раза).

    Рассмотрим следующий пример:

    В этом примере мы создали простую анимацию, в которой с помощью CSS свойства top смещаем элементы с относительным позиционированием относительно верхнего края текущей позиции, изменяя при этом цвет заднего фона элемента.

    С использованием селектора класса и свойства animation-iteration-count мы указали различные значения, которые определяют количество проигрываний анимационного цикла у элементов.

    Обратите внимание, что мы разместили ссылку, которая производит перезагрузку страницы с использованием URL псевдопротокола javascript: , который позволяет выполнить код языка программирования JavaScript таким образом. Не смотря на то, что это решает нашу задачу по перезагрузке страницы, никогда не используйте URL псевдопротокол javascript: на своих страницах. Так как эта тема выходит за рамки этой статьи и изучения CSS в целом, мы не будем в настоящее время на этом останавливаться.

    Результат нашего примера:

    Рис. 193 Повторение анимации в CSS.

    Задержка анимации

    CSS свойство animation-delay определяет задержку для запуска анимации. Задержка анимации задается в секундах (s), или миллисекундах (ms).


    Значение 0s (значение по умолчанию) для свойства animation-delay , указывает, что анимация должна начаться без задержки. Если указать для анимации отрицательное значение задержки, то анимация начнет воспроизводиться без задержки, но со смещением равному указанному значению (т.е. если вы укажите -5s, то анимация будет воспроизведена без задержки и с того момента как будто она уже длится 5 секунд). Допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).

    В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элементы с относительным позиционированием относительно левого края текущей позиции, изменяя при этом цвет заднего фона элемента.

    С использованием селектора класса и свойства animation-delay мы указали различные значения, которые определяют задержку для запуска анимации.

    Результат нашего примера:

    Рис. 194 Задержка анимации в CSS.

    Скорость анимации

    По аналогии с переходными эффектами (transition ) допускается определить кривую скорости для анимации (математическая функция — кубическая кривая Безье). Кривая скорости задается с помощью свойства animation-timing-function и определяет время анимации, используемое, чтобы изменить один набор стилей CSS на другой.

    Возможные значение свойства представлены ниже в таблице:

    Значение Описание
    ease Эффект анимации начинается медленно, затем незначительно ускоряется и в конце опять замедляется. Значение эквивалентно cubic-bezier(0.25,0.1,0.25,1) . Это значение по умолчанию.
    linear Определяет эффект анимации с одинаковой скоростью от начала до конца. Значение эквивалентно cubic-bezier(0,0,1,1) . Точка 1 расположена на по оси X и по оси Y, точка 2 — на 1 по оси X и по оси Y.
    ease-in Определяет эффект анимации с медленного старта. Значение эквивалентно cubic-bezier(0.42,0,1,1) .
    ease-out Определяет эффект анимации с медленным окончанием. Значение эквивалентно cubic-bezier(0,0,0.58,1) .
    ease-in-out Определяет эффект анимации с медленного старта и медленным окончанием (симметричная кривая Безье). Значение эквивалентно cubic-bezier(0.42,0,0.58,1) . Точка 1 расположена на 0,42 по оси X и на по оси Y, точка 2 — на 0,58 по оси X и на 1 по оси Y.
    cubic-bezier(n,n,n,n) Определяет пользовательские значения в кубической функции Безье. Она допускает 4 числовых значения от до 1. Первые два значения — координаты X и Y первой точки, а вторые два значения — координаты X и Y второй точки). На данном сайте вы сможете подобрать оптимальные для Вас значения.
    steps(int,start|end) Указывает пошаговую функцию, с двумя параметрами. Первый параметр задает число интервалов в функции (целое положительное число (больше ). Второй параметр является необязательным и имеет значения «start» или «end» и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр опущен, то присваивается значение «end» . Значение «start» осуществляет переход в начале каждого шага, а «end» в конце каждого шага.
    step-start Значение эквивалентно steps(1, start) . Свойство сразу принимает конечное значение шага в ключевом кадре.
    step-end Значение эквивалентно steps(1, end) . Свойство принимает конечное значение в конце шага.

    Обратите внимание, что если для конкретного ключевого кадра вам необходимо определить собственную временную функцию, то необходимо определить её непосредственно в стилях этого кадра:

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

    Перейдем к рассмотрению примера, в котором для демонстрации рассмотрим применение к элементам различных кривых скорости:

    В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элементы с относительным позиционированием относительно левого края текущей позиции.

    С использованием селектора класса и свойства animation-timing-function мы указали различные значения, которые определяют различную скорость для анимации. Были использованы такие ключевые слова свойства как: ease , linear , ease-in , ease-out , ease-in-out и произвольные (пользовательские) значения в кубической функции Безье.

    Результат нашего примера:

    Рис. 195 Пример использования CSS свойства animation-timing-function.

    Рассмотрим пример функций пошаговой анимации:

    В этом примере мы создали простую анимацию, в которой с помощью CSS свойства left смещаем элементы с относительным позиционированием относительно левого края текущей позиции.

    С использованием селектора класса и свойства animation-timing-function мы указали, что на каждую часть ключевого кадра будет произведено 3 шага (начало точки ключевого кадра/конец точки ключевого кадра), либо 1 шаг (точки ключевого кадра/конец точки ключевого кадра) для функций step-start и step-end .

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

    Результат нашего примера:

    Рис. 196 Пример использования пошаговых функций.

    CSS перемещение, вращение, 3D

    Здравствуйте уважаемые начинающие веб-мастера.

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

    Все последующие примеры будут работать при наведении курсора, чтобы Вы могли посмотреть действие свойства transform

    За основу возьмём блок

    CSS:
    .div <
    width : 150px ;
    height : 100px ;
    border : 2px solid #333 ;
    border-radius : 5px ;
    background : #463E48 ;
    >

    В этот css код будем подставлять свойство transform с функциями (значениями) которые оно выполняет.

    Уменьшение — увеличение

    а) transform : scale(0.5) ; — масштабирует элемент по горизонтали и вертикали. Число больше единицы увеличивает; элемент, а меньше единицы — уменьшает.

    б) transform : scaleX(0.5) ; — масштабирует элемент по горизонтали;

    в) transform : scaleY(0.5) ; — масштабирует элемент по вертикали;

    Наклоны

    а) transform : skewX(30deg) ; — наклоняет элемент на заданный угол по вертикали (в данном случае на 30°). Отрцательное значение наклоняет элемент в другую сторону;

    б) transform : skewY(30deg) ; — наклоняет элемент на заданный угол по горизонтали;

    Перемещение

    а) transform : translate(50px) ; — сдвигает элемент на заданное значение по горизонтали и вертикали;

    б) transform : translateX(50px) ; — сдвигает элемент по горизонтали. Положительное значение сдвигает вправо, отрицательное влево.

    в) transform : translateY(50px) ; — сдвигает элемент по вертикали. Положительное значение сдвигает вниз, отрицательное значение вверх;

    Вращение

    а) transform : rotate(45deg) ; — поворот элемента вокруг центра (по умолчанию) на заданный угол;

    б) transform : rotateY(360deg) ; — поворот элемента вокруг вертикальной оси. Применяется в 3D и об этом ниже;

    в) transform : rotateX(360deg) ; — поворот элемента вокруг горизонтальной оси. Применяется в 3D;

    Отражение

    transform : matrix() ; — создаёт эффект отражения элемента.

    Для эффекта отражения в

    div > img src =» images/makak.jpg » alt =»»> br >
    img src =» images/makak.jpg » alt =»» class =» reflect «>
    /div >

    .reflect <
    transform : matrix(1, 0, 0, -1, 0, 0) ;
    opacity : 0.5 ;
    >

    Вид отражения можно менять изменяя комбинацию первых четырёх цифр меняя их от 1 до -1. Пятая цифра двигает элемент по оси Х, шестая по оси Y.

    transform-style : preserve-3d; — создаёт 3D эффект.

    Точка координат

    transform-origin : x y z; — задаёт координаты точки относительно центра, вокруг которой будет вращаться элемент.

    В плоскости используются два значения (x y), в 3D три значения (x y z)

    Вот примерно так всё и делается.

    Теперь Вы можете к элементу подключить анимацию с заданным временем исполнения, а затем в правиле @keyframes указать свойство transform с нужной функцией в начале и в конце цикла.

    Например: элемент будет постепенно наклоняться в течении анимации

    Девять простых примеров CSS3 анимации

    CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

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

    Для более детального ознакомления вы можете скачать архив с файлами.

    Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

    1. Изменение цвета при наведении курсора

    Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

    2. Появление рамки

    Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

    3. Свинг

    Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

    • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
    • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

    4. Затухание

    Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

    Для противоположного результата поменяйте значения местами:

    5. Увеличение

    Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

    6. Уменьшение

    Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

    7. Трансформация в круг

    Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

    8. Вращение

    Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

    9. 3D тень

    Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

    Поддержка браузерами

    На сегодняшний день свойство transition поддерживается следующими браузерами:

    Десктопные браузеры
    Internet Explorer Поддерживается версией IE 10 и выше
    Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
    Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
    Opera Поддерживается с версии 12.1
    Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
    Мобильные браузеры
    iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
    Opera Mobile Поддерживается с версии 12.1
    Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
    Chrome/Firefox для Android Поддерживается с версии 47/44
    Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
    UC Browser для Android Поддерживается с префиксом -webkit-

    Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

    Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

    Создаём CSS-анимацию без плагинов

    Приветствую вас на сайте Impuls-Web!

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

    Навигация по статье:

    Как это работает?

    В основе создания такой анимации лежит CSS-свойство animation. Благодаря которому мы можем задавать название CSS-анимации, тип, количество повторов, время и направление движения.

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

    Анимация плавного увеличение и исчезновение элемента

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

      1. Для этого нам нужно будет добавить на свой сайт какое-либо изображение или блок с текстом, или любой другой элемент, и добавить для него определенный CSS-класс. В моем случае я добавляю для этого элемента класс animate-block.

    И здесь нам необходимо убедиться в том, что у нас открыт файл «Таблица стилей style.css»
    3. Все изменения мы будем добавлять, как обычно, в самом конце этого файла.

    В файле стилей нашей темы, или же просто в файле стилей сайта, указываем наш CSS-класс, а далее в фигурных скобочках указываем CSS-свойство animation.

    На первом месте у нас стоит название анимации, его мы задаем самостоятельно. Название задается латинскими буквами, и оно может быть произвольным.
    Далее мы задаем время анимации, чем больше это время, тем более плавно будет происходить наша CSS-анимация. В данном случае время задается в секундах.
    Далее мы задаем количество повторов анимации. В данном случае используется значение infinite, что означает бесконечность. То есть наша анимация не будет иметь какое-то ограниченное количество повторений, и будет продолжаться бесконечно.
    4. После того, как мы задали название CSS-анимации и объявили ее основные параметры, нам необходимо будет использовать правило @keyframes для того, чтобы задать начальное и конечное значение нашего элемента, а так же, при необходимости, промежуточное значение. В данном примере мы будем изменять уровень прозрачности. В CSS это правило выглядит следующим образом:

    Кроссбраузерное вращение (анимация) элемента

    «GIF уже не торт»

    XXI век, CSS3, программная анимация на стороне клиента.

    В общем, будем крутить блоки, все на чистом CSS, с поддержкой максимального количества браузеров «староверов».

    Заставить элемент вращаться можно с помощью CSS3-свойств «animation«.

    Для придания кроссбраузерного вращения блока, в таблице стилей достаточно прописать следующее:

    • animation-duration — скорость врашения;
    • animation-iteration-count: infinite — отвечает за «бесконечность» вращения;

    Теперь можно просто задавать класс «.rotate» для нужного блока, и наслаждаться магией.

    rotate()

    Функция rotate(α) поворачивает элемент в двумерном пространстве вокруг точки вращения на заданный угол α. Точка вращения по умолчанию располагается в центре элемента и может быть изменена с помощью свойства transform-origin.

    Повороты на разные углы с помощью rotate(α) продемонстрированы в табл. 1.

    Табл. 1. Поворот картинки

    transform: rotate(0) Исходное изображение.
    transform: rotate(90deg) Поворот на 90° по часовой стрелке.
    transform: rotate(-90deg) Поворот на 90° против часовой стрелки.
    transform: rotate(180deg) Поворот на 180°.

    Синтаксис ?

    Обозначения

    Описание Пример
    Указывает тип значения.
    A && B Значения должны выводиться в указанном порядке. &&
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    [ ] Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [, ]*
    + Повторять один или больше раз. +
    ? Указанный тип, слово или группа не является обязательным. inset?
    Повторять не менее A, но не более B раз.
    # Повторять один или больше раз через запятую. #

    ×

    Значения

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

    Песочница

    Пример

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

    Спецификация ?

    Спецификация Статус
    CSS Transforms Module Level 1 Рабочий проект

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

    ×

    Браузеры ?

    9 12 4 11.5 3.1 3.5
    2.1 3.5 12 3.2

    Браузеры

    В таблице браузеров применяются следующие обозначения.

    • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
    • — свойство браузером не воспринимается и игнорируется;
    • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

    Число указывает версию браузера, начиная с которой свойство поддерживается.

    Анимация CSS: примеры

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

    В статье постараемся подробнее ознакомиться с возможностями анимации и ее применениями. А также приведем несколько интересных примеров с различными эффектами.

    Поддержка браузеров.

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

    Браузер Explorer Chrome Firefox Safari Opera
    Версия 10.0 4.0 16.0 4.0 15.0
    animation -webkit- -moz- -webkit- -webkit-

    Internet Explorer 10 поддерживает без префикса. Браузер Опера распознает префикс –webkit поэтому значение -o- можно не применять.

    Начальный кадр анимации.

    С помощью свойства @keyframes создается начальный кадр анимации, который необходимо привязать к определенному селектору. Затем указать по крайней мере два действия:

    — название анимации
    — продолжительность анимации

    Пример.

    HTML

    CSS

    Примечание: Если не указана продолжительность анимации, то никаких действий не произойдёт поскольку по умолчание она равна нулю.

    Как работает CSS анимация?

    Анимация дает возможность переходить с одного стиля на другой при этом плавно их меняя. Изменить можно многие элементы, а главное – неоднократно, столько раз сколько нужно. Переход анимации указывается в процентах от 0% до 100% или же ключевыми словами от «from» до «to».

    Пример.

    HTML

    CSS

    Примеры анимации в логотипе.

    Возможно, данное применение нечасто встретится в веб-дизайне разве что за исключение в промо — роликов. Но весьма будет интересным для глаз и может вдохновить на бедующее создание логотипа.

    Другие примеры анимации

    Где еще можно применить анимацию? Да где угодно, анимация способна двигать многие веб-элементы: меню, ссылки, обычный текст и т.д. Действия практически неограниченные, даже с помощью анимации возможно заменить некоторые javascript`ы.

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