CSS эффект переворачивания с использованием анимации WebKit


Содержание

Анимация 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`ы.

Плавная анимация перемещения с помощью 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 явные преимущества.

Цукерберг рекомендует:  Тур по сайту с помощью jQuery

Как насчет JavaScript?

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

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

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

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

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

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

Использование CSS-анимации

На этой странице

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

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

Есть три преимущества CSS-анимации перед традиционными способами:

  1. Простота использования для простых анимаций; Вы можете создать анимацию, не зная JavaScript.
  2. Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .
  3. Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.

Конфигурирование анимации

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

Свойство animation имеет следующие подсвойства:

animation-name Определяет имя @keyframes , настраивающего кадры анимации. animation-duration Определяет время, в течение которого должен пройти один цикл анимации. .»> animation-timing-function Настраивает ускорение анимации. animation-delay Настраивает задержку между временем загрузки элемента и временем начала анимации . animation-iteration-count Определяет количество повторений анимации; Вы можете использовать значение infinite для бесконечного повторения анимации. animation-direction Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию. animation-fill-mode Настраивает значения, используемые анимацией, до и после исполнения. animation-play-state Позволяет приостановить и возобновить анимацию.

Определение последовательности анимации с помощью ключевых кадров

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

В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как width, height, margin, padding, и font-size.»> percentage , чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to .

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

Примеры

Скольжение текста

Этот простой пример анимирует скольжение текста в элементе представляет собой абзац.»>

от правого края окна браузера.

Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство overflow : hidden .

с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для @keyframes , описывающей саму анимацию, определено как «slidein».

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

Kлючевые кадры определяются с помощью правила @keyframes . В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации ( from ). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок представляет собой абзац.»>

находится за пределами правого края окна браузера .

Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок представляет собой абзац.»>

приплывает к левому краю окна браузера.

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

Добавление других ключевыч кадров

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

Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

Настройка повторения

Чтобы настроить повторение, нужно добавить свойство animation-iteration-count и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение infinite для бесконечного повторения:

Движение текста вправо и влево

Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова «запрыгивает» за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству animation-direction значения alternate :

Использование шорткодов

Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:

можно заменить на:

Внимание: подробнее об этом на странице раздела animation

Установка нескольких значений свойствам анимации

CSS cвойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.

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

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

В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px — 5s. Значения продолжительности закончились, теперь они берутся сначала — bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.

Использование событий анимации

Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью событий анимации. Эти события, представленные объектом AnimationEvent , можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.

Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть, как она работает.

Добавление CSS

Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться «sl > animation-direction установлено alternate . В ключевых кадрах @keyframes установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

Цукерберг рекомендует:  Firefox - нужна помощь с браузером firefox

Добавление обработчика события анимации

Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

Это довольно стандартный код; Вы можете получить дополнительную информацию в документации element.addEventListener() . Последнее, что делает этот код — это установка класса «slidein» для анимируемого элемента; мы делаем это, чтобы запустить анимацию.

Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса «slidein» для анимируемого элемента.

Регистрация событий

События будут передаваться функции listener() , показанной ниже.

Этот код также очень прост. Этот код следит за event.type , чтобы определить тип события, и добавляет элемент , чтобы залогировать произошедшее событие.

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

  • Started: elapsed time is 0
  • New loop started at time 3.01200008392334
  • New loop started at time 6.00600004196167
  • Ended: elapsed time is 9.234000205993652

Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие animationiteration ; вместо него посылается событие animationend .

Ради полноты картины приведем код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

Функция 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-трансформаций позволяет создавать красивые динамические эффекты.

8 простых эффектов CSS3, которые произведут впечатление на ваших пользователей

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

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

Все эти эффекты (один прямоугольник) управляются с помощью свойства transition. Таким образом, чтобы видеть, как эти эффекты работают, мы создали div в HTML странице:

Сделав это, установите его ширину и высоту (чтобы он имел размеры), его цвет фона (чтобы мы могли видеть его) и свойства его эффекта.

Свойство transition имеет три значения: свойства по переходу (в нашем случае все из них) скорость перехода (в нашем случае 0,3 секунды) и третье значение, которое позволяет изменять как рассчитывается ускорение и замедление, но мы продержимся настройки по умолчанию, оставляя это поле пустым.

Теперь все, что нужно сделать, это менять свойства, и они будут создавать анимацию для нас.

Если вы хотите продолжить самостоятельно, то для вас демо-файлы здесь.

1. Затемнение

Сделать эффекты затемнения – это довольно распространённая просьба клиентов. Это отличный способ подчеркнуть функциональность или обратить внимание на призыв к действию.

Эффект кодируются в два этапа: сначала, вы установите начальное состояние; далее установите изменение, например, при наведении мыши:

(Убедитесь, что вы присвоили вашему div класс «fade», чтобы увидеть, как это работает.)

2. Смена цвета

Раньше анимация изменения цвета был невероятно сложным делом, с вовлечением математики, участвующей в расчете отдельные значения RGB, а затем рекомбинации их. Теперь мы просто устанавливаем div’у класс «color» и задаём цвет, какой хотим, в CSS:

3. Увеличение и ужатие

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

Установите класс вашего div, на «grow», а затем добавьте этот код в ваш стиль блока:

Ужать элемент так же просто, как увеличить его. Чтобы увеличить элемент мы указываем значение, большее 1, чтобы уменьшить его, мы указать значение меньше, чем 1:

4. Кручение элементов

CSS предусматривает ряд трансформаций, и одна из лучших – это кручение элемента. Присвойте вашему div’у класс «rotate» и добавьте следующие строки в ваш CSS:

5. Превращение квадрата в круг

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

Присвойте вашему div’у класс «circle» и добавить эти строки к вашим таблицам стилей:

6. 3D тень

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

Этот эффект достигается путем добавления прямоугольника тени, а затем перемещая элемент на оси х с помощью изменения свойству transform и translate таким образом, что кажется, будто элемент растёт из экрана.

Присвойте вашему div’у класс «threed», а затем добавьте следующий код в ваш CSS:

7. Качание

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

В этом случае, мы сначала определим CSS анимации в стилях. Вы заметите, что из-за проблем реализации, мы должны использовать @-webkit-keyframes, а также @keyframes (да, Internet Explorer действительно лучше, чем Chrome, в этом отношении, по крайней мере).

8. Вставка границы

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

Дайте вашему дел класс «border» и добавьте следующий CSS для ваших стилей:

-webkit-animation

Свойство -webkit-animation — сокращенный способ задать свойства анимации -webkit-animation-name, -webkit-animation-duration, -webkit-animation-timing-function, -webkit-animation-delay, -webkit-animation-iteration-count, -webkit-animation-direction, позволяет одновременно задать имя анимации, время анимации, способ определения промежуточных значений изменяющихся параметров, задержку анимации, количество циклов анимации и возможность ее проигрывания в обратную сторону.

Допустимые значения

    допустимые значения смотрите в свойствах -webkit-animation-name, -webkit-animation-duration, -webkit-animation-timing-function, -webkit-animation-delay, -webkit-animation-iteration-count, -webkit-animation-direction
Значение по умолчанию none
Применимо к блочным и строчным элементам
Наследование нет
Поддерживается браузерами
  • Safari 4.0 и выше
  • Chrome 3.0 и выше
Цукерберг рекомендует:  Mysql - Нужен ли еще и индекс для поля

Пример

Заметки

Safari 4.0 и выше Chrome 3.0 и выше поддерживают возможность определить список анимаций с помощью ключевого слова @-webkit-keyframes.

В спецификации CSS3 есть аналогичное свойство animation.

8 простых эффектов с использованием свойства CSS3 Transition

Здравствуйте, уважаемые читатели XoZbloga! CSS3 внёс бесчисленные количество новшеств для дизайнеров, и большинство из них очень легки в применении. Достаточно описать пару строк кода, что даст вам удивительный анимационный эффект, который будет на загляденье всем посетителям и поспособствует их активности на сайте. В этой статье рассмотрим 8 простых эффектов с использованием CSS3 свойства — Transition. Если вам нужен красивый и функциональный сайт, сделанный с использованием современных технологий, то не задумывайтесь — обратитесь к специалистам http://stfalcon.com/en/services/web-development. Они помогут вам реализовать любой сложный проект.

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

На текущий момент CSS3 Transition поддерживается множеством браузеров. Более подробно Вы можете узнать об этом здесь.

Подготовка

Все далее описанные анимационные эффекты выполнены на блоке DIV. Итак, для начала опишем базовые свойства для блока:

Значение свойства Transition состоит и 3 составляющих: transition-property — all, transition-duration — 0.3s и третьей величины, transition-timing-function — ease, также есть еще одна составляющая ( transition-delay далее в таблице).

Наименование Описание Значение
transition-property Свойство, к которому применяем анимацию Практически любое свойство CSS: color, background, width, font-size и т.д. all — все свойства.
transition-duration Длительность анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-function Временная функция, используемая для анимации ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay Задержка анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Теперь переходим к эффектам.

1. Затемнение

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

Создаём 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 это правило выглядит следующим образом:

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 .

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

11 анимированных CSS3 эффектов при наведении на изображение

Привет дорогой друг!
Сегодня я публикую первый пост в этом блоге. Надеюсь он Вам будет полезен.
Css3 технология уже давно проникла в повседневную жизнь каждого верстальщика. Мы стараемся сделать наши сайты интересней для посетителя и используем различные css3 и Jquery эффекты. Еще года три назад это сводилось на нет из-за огромного количества юзеров с устаревшими браузерами. Сейчас времена изменились. Практически каждый эффект можно поставить на свой сайт и не думать о последствиях. Но запомните, всего должно быть в меру! Не переусердствуйте анимацией. Иногда это смотрится глупо.
Итак. К вашему вниманию 11 анимированных эффектов при наведении на изображение с использованием технологии css3.

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