Разное

Css3 animation: CSS3-анимация (свойство animation)

11.04.2021

Содержание

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

Experimental

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

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

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

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

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

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

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

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

В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют percentage, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to.

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

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

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

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

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

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

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

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

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

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

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

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

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

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

Давайте добавим другие ключевые кадры в предыдущий пример.

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

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}
p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }
}
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

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

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

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

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

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

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

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

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

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

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

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

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

p {
  animation: 3s infinite alternate slidein;
}

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

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

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

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

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

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

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

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

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

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

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

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

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

Добавление CSS

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

.slidein {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -moz-animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-moz-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
   margin-left: 0%;
   width: 100%;
 }
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
   margin-left: 0%;
   width: 100%;
 }
}
Добавление обработчика события анимации

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

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";

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

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

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

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

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

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

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

  • 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

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

<body>
  <h2>Watch me move</h2>
  <p>This example shows how to use CSS animations to make <code>p</code> elements
  move across the page.</p>
  <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
  <ul>
  </ul>
</body>

Анимация Animations CSS уроки для начинающих академия



Анимация CSS

CSS анимация позволяет анимацию большинства HTML элементов без использования JavaScript или Flash!

CSS


Поддержка браузеров для анимаций

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

Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.

Свойство
@keyframes 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

Что такое анимация CSS?

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

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

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

Ключевые кадры держат какие стили элемент будет иметь в определенное время.


Правило @keyframes

При указании стилей CSS внутри @keyframes правило, анимация будет постепенно меняться от текущего стиля к новому стилю в определенное время.

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

В следующем примере анимация «example» привязывается к элементу <div>. Анимация будет длиться 4 секунды, и она будет постепенно менять цвет фона элемента <div> от «Red» на «желтый»:

Пример

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Примечание: Свойство animation-duration определяет, сколько времени должно занять анимация для завершения. Если свойство animation-duration не задано, анимация не будет выполняться, так как значение по умолчанию равно 0 секундам.

В приведенном выше примере мы указали, когда стиль изменится с помощью ключевых слов «from» и «to» (который представляет 0% (Start) и 100% (полный)).

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

В следующем примере изменяется цвет фона элемента < div > при завершении анимации на 25%, завершении 50% и повторном завершении анимации на 100%:

Пример

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

В следующем примере изменяется как цвет фона, так и положение элемента <div> при завершении анимации на 25%, завершении 50% и снова при завершении анимации 100%:

Пример

/* The animation code */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}



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

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

Следующий пример имеет задержку в 2 секунды перед началом анимации:

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

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

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

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: -2s;
}


Установить, сколько раз анимация должна выполняться

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

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

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

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

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}


Запуск анимации в обратном направлении или альтернативные циклы

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

Свойство «направление анимации» может иметь следующие значения:

  • normal — Анимация воспроизводится как обычная (вперед). Это значение по умолчанию
  • reverse — Анимация воспроизводится в обратном направлении (назад)
  • alternate — Анимация сначала разыгрывается вперед, затем назад
  • alternate-reverse — Анимация сначала воспроизводится назад, а затем пересылается

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

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-direction: reverse;
}

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

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate;
}

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

Пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction: alternate-reverse;
}


Укажите кривую скорости анимации

Свойство animation-timing-function определяет кривую скорости анимации.

Свойство «анимация-время-функция» может иметь следующие значения:

  • ease — Указывает анимацию с медленным запуском, а затем быстро, а затем закончить медленно (это по умолчанию)
  • linear — Задает анимацию с одинаковой скоростью от начала до конца
  • ease-in — Задает анимацию с медленным запуском
  • ease-out — Задает анимацию с медленным концом
  • ease-in-out — Задает анимацию с медленным началом и концом
  • cubic-bezier(n,n,n,n) — Позволяет определить собственные значения в функции кубической Безье

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

Пример

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}


Задание режима заливки для анимации

Анимация CSS не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство «анимация-режим заполнения» может переопределить это поведение.

Свойство animation-fill-mode задает стиль для целевого элемента, если анимация не воспроизводится (до начала, после завершения или и того и другого).

Свойство «анимация-режим заполнения» может иметь следующие значения:

  • none — Значение по умолчанию. Анимация не будет применять стили к элементу до или после выполнения
  • forwards — Элемент сохранит значения стиля, заданные последним ключевым кадром (зависит от анимации-направления и анимации-количество итераций)
  • backwards — Элемент получит значения стиля, заданные первым ключевым кадром (в зависимости от направления анимации), и сохранит это во время анимации-период задержки
  • both — Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях

Следующий пример позволяет элементу <div> сохранять значения стиля из последнего ключевого кадра при завершении анимации:

Пример

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

Следующий пример позволяет элементу <div> получить значения стиля, заданные первым ключевым кадром до начала анимации (во время периода задержки анимации):

Пример

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}

Следующий пример позволяет элементу <div> получить значения стиля, заданные первым ключевым кадром до начала анимации, и сохранить значения стилей из последнего ключевого кадра при завершении анимации:

Пример

div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: both;
}


Анимация Сокращенное свойство

В приведенном ниже примере используются шесть свойств анимации:

Пример

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Такой же эффект анимации, как и выше, можно достичь с помощью сокращенного animation Свойства:

Пример

div {
    animation: example 5s linear 2s infinite alternate;
}


Свойства анимации CSS

В следующей таблице перечислены правила @keyframes и все свойства анимации CSS:

Свойство Описание
@keyframes Указывает код анимации
animation Сокращенное свойство для задания всех свойств анимации
animation-delay Указывает задержку начала анимации
animation-direction Указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах
animation-duration Указывает, сколько времени должно занять анимация для завершения одного цикла
animation-fill-mode Задает стиль элемента, если анимация не воспроизводится (до начала, после завершения или и то, и другое)
animation-iteration-count Указывает, сколько раз должна воспроизводиться анимация
animation-name Указывает имя анимации @keyframes
animation-play-state Указывает, запущена ли анимация или приостановлена
animation-timing-function Задает кривую скорости анимации

CSS3 | Анимация

Анимация

Последнее обновление: 06. 11.2016

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

Анимация опирается на последовательню смену ключевых кадров (keyframes). Каждый ключевой кадр определяет один набор значений для анимируемых свойств. И последовательная смена таких ключевых кадров фактически будет представлять анимацию.

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

В целом объявление ключевого кадра в CSS3 имеет следующую форму:


@keyframes название_анимации {
	from {
		/* начальные значения свойств CSS */
	}
	to {
		/* конечные значения свойств CSS */
	}
}

После ключевого слова @keyframes идет имя анимации. Затем в фигурных скобках определяются как минимум два ключевых кадра. Блок после ключевого слова from объявляется начальный ключевой кадр, а после клюевого слова to в блоке определяется конечный ключевой кадр. Внутри каждого ключевого кадра определяется одно или несколько свойств CSS, подобно тому, как создается обычный стиль.

Например, определим анимацю для фонового цвета элемента:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Анимация в CSS3</title>
		<style>
			@keyframes backgroundColorAnimation {
				from {
					background-color: red;
				}
				to {
					background-color: blue;
				}
			}
			div{
				width: 100px;
				height: 100px;
				margin: 40px 30px;
				border: 1px solid #333;
				
				background-color: #ccc;
				animation-name: backgroundColorAnimation;
				animation-duration: 2s;
			}
		</style>
    </head>
    <body>
		<div></div>
    </body>
</html>

В данном случае анимация называется backgroundColorAnimation. Анимация может иметь произвольное название.

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

Чтобы прикрепить анимацию к элементу, у него в стиле применяется свойство animation-name. Значение этого свойства — название применяемой анимации.

Также с помощью свойства animation-duration необходимо задать время анимации в секундах или миллисекундах. В данном случае время анимации — это 2 секунды.

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


@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	to {
		background-color: blue;
	}
}
div{
	width: 100px;
	height: 100px;
	margin: 40px 30px;
	border: 1px solid #333;
	background-color: #ccc;
}
div:hover{
				
	animation-name: backgroundColorAnimation;
	animation-duration: 2s;
}

Множество ключевых кадров

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


@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	25%{
		background-color: yellow;
	}
	50%{
		background-color: green;
	}
	75%{
		background-color: blue;
	}
	to {
		background-color: violet;
	}
}

В данном случае анимация начинается с красного цвета. Через 25% времени анимации цвет меняется на желтый, еще через 25% — на зеленый и так далее.

Также можно в одном ключевом кадре анимировать сразу несколько свойств:


@keyframes backgroundColorAnimation {
	from {
		background-color: red;
		opacity: 0.2;
	}
	to {
		background-color: blue;
		opacity: 0.9;
	}
}

Также можно определить несколько отдельных анимаций, но применять их вместе:


@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	to {
		background-color: blue;
	}
}
@keyframes opacityAnimation {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 0.9;
	}
}
div{
	width: 100px;
	height: 100px;
	margin: 40px 30px;
	border: 1px solid #333;
	background-color: #ccc;
	
	animation-name: backgroundColorAnimation, opacityAnimation;
	animation-duration: 2s, 3s;
}

В качестве значения свойства animation-name через запятую перечисляются анимации, и также через запятую у свойства animation-duration задается время этих анимаций. Название анимации и ее время сопоставляются по позиции, то есть анимация opacityAnimation будет длиться 3 секунды.

Завершение анимации

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

Так, свойство animation-iteration-count определяет, сколько раз будет повторяться анимация. Например, 3 повтора анимации подряд:

animation-iteration-count: 3;

Если необходимо, чтобы анимация запускалась бесконечное количество раз, то этому свойству присваивается значение infinite:

animation-iteration-count: infinite;

При повторе анимация будет начинаться снова с начального ключевого кадра. Но с помощью свойства animation-direction: alternate; противоположное направление анимации при повторе. То есть она будет начинаться с конечного ключевого кадра, а затем будет переход к начальному кадру:


animation-name: backgroundColorAnimation, opacityAnimation;
animation-duration: 2s, 2s;
animation-iteration-count: 3;
animation-direction: alternate;

При окончании анимации браузер устанавливает для анимированного элемента стиль, который был бы до применения анимации. Но свойство animation-fill-mode: forwards позволяет в качестве окончательного значения анимируемого свойства установить именно то, которое было в последнем кадре:


animation-name: backgroundColorAnimation;
animation-duration: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;

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

С помощью свойства animation-delay можно определить время задержки анимации:


animation-name: backgroundColorAnimation;
animation-duration: 5s;
animation-delay: 1s;	/* задержка в 1 секунду */

Функция плавности анимации

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

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

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

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

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

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

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

Для установки функции плавности применяется свойство animation-timing-function:


@keyframes backgroundColorAnimation {
	from {
		background-color: red;
	}
	to {
		background-color: blue;
	}
}
div{
	width: 100px;
	height: 100px;
	margin: 40px 30px;
	border: 1px solid #333;
				
	animation-name: backgroundColorAnimation;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
}

Свойство animation

Свойство animation является сокращенным способом определения выше рассмотренных свойств:


animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode

Первые два параметра, которые предоставляют название и время анимации, являются обязательными. Остальные значения не обязательны.

Возьмем следующий набор свойств:


animation-name: backgroundColorAnimation;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: 3;
animation-direction: alternate;
animation-delay: 1s;
animation-fill-mode: forwards;

Этот набор будет эквивалентен следующему определению анимации:


animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;

Создание баннера с анимацией

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


<!DOCTYPE html>
<html>
<head>
	<title>HTML-баннер</title>
	<meta charset="utf-8" />
	<style type="text/css">
	@keyframes text1
	{
		10%{opacity: 1;}
		40%{opacity: 0;}
	}  
	@keyframes text2
	{
		30%{opacity: 0;}
		60%{opacity:1;}
	}
	@keyframes banner
	{
		10%{background-color: #008978;}
		40%{background-color: #34495e;}
		80%{background-color: green;}
	}
	.banner
	{
		width: 600px;
		height: 120px;
		background-color: #777;
		margin: 0 auto;
		position: relative;
	}
	.text1,.text2
	{
		position: absolute;
		width: 100%;
		height: 100%;
		line-height: 120px;
		text-align: center;
		font-size: 40px;
		color: #fff;
		opacity: 0;
	}

	.text1
	{
		animation : text1 6s infinite;
	}

	.text2
	{
		animation : text2 6s infinite;
	}

	.animated
	{
		opacity: 0.8;
		position: absolute;
		width: 100%;
		height: 100%;  
		background-color: #34495e;
		animation: banner 6s infinite;
	}
	</style>
</head>
<body>
	<div>
		<div>
			<div>Только в этом месяце</div>
			<div>Скидки по 20%</div>
		</div>
	</div>
</body>
</html>

Здесь одновременно срабатывают три анимации. Анимация «banner» изменяет цвет фона баннера, а анимации text1 и text2 отображают и скрывают текст с помощью настроек прозрачности. Когда первый текст виден, второй не виден и наоборот. Тем самым мы получаем анимацию текста в баннере.

Свойство animation | CSS справочник

CSS свойства

Определение и применение

CSS свойство animation позволяет задать все свойства анимации в одном объявлении. Это свойство является короткой записью для следующих свойств:

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


Не забывайте в обязательном порядке указывать значение продолжительности анимации (animation-duration), иначе, анимация не будет проиграна, т.к. значение по умолчанию у этого свойства равно нулю.


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

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

CSS синтаксис:

animation:"name duration timing-function delay iteration-count direction fill-mode play-state"; /* имя анимации может быть указано в конце списка */

JavaScript синтаксис:

object.style.animation = "myAnimation 1s linear"

Значения свойства

ЗначениеОписание
animation-nameУказывает имя анимации/список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает на правило (@keyframes), которое определяет значения свойств анимации. Значение по умолчанию none.
animation-durationОпределяет, сколько секунд или миллисекунд затрачивается на выполнение одного цикла анимации. Значение по умолчанию 0.
animation-timing-functionОпределяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Кривая скорости определяет время анимации, используемое, чтобы изменить один набор стилей CSS на другой. Значение по умолчанию ease.
animation-delayОпределяет задержку для запуска анимации. Значение по умолчанию 0.
animation-iteration-countУказывает, сколько раз анимация должна быть воспроизведена. Значение по умолчанию 1.
animation-directionОпределяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. Значение по умолчанию normal.
animation-fill-modeЗадает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или когда она имеет задержку, установленную свойством animation-delay ). Значение по умолчанию none.
animation-play-stateОпределяет состояние анимации (анимация воспроизводится, либо приостановлена). Значение по умолчанию running.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример анимации на CSS</title>
<style> 
.test {
width: 100px; /* устанавливаем ширину блока */
height: 100px;  /* устанавливаем высоту блока */
position: relative;  /* элемент с относительным позиционированием */
animation: iliketomoveit 4s steps(3,start) 500ms infinite reverse; /* "name (имя анимации-как в @keyframes) duration(длительность) timing-function (кривая скорости - шаговая анимация) delay (задержка 500 миллисекунд) iteration-count (количество повторов анимации - бесконечно) direction (направление анимации - reverse(в обратном направлении) )" */ 
} 
@keyframes iliketomoveit {
	0%   {left: 0px;} /* задаем положение элемента при начале анимации */ 
	50% {left: 500px; border-radius: 50px; background: plum; } /* задаем смещение элемента относительно левого края, изменяем цвет заднего фона и определяем форму границ (скругление) */ 
	100% {left: 0px;background: green; } /* задаем первоначальное положение и задаем цвет заднего фона по завершению анимации */ 
} 
</style>
</head>
	<body>
		<div class = "test">none</div>
	</body>
</html>
Пример использования CSS свойства animation (анимация на CSS).CSS свойства

CSS3 анимация и пример ее использования, бесконечный повтор

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

ВНИМАНИЕ! Поскольку в этом уроке мы с вами разберем анимацию, на картинках я вам пример ее работы продемонстрировать не смогу, поэтому смело открывайте редактор для кода и записывайте туда код, приведенный в этот статье.

Основы создания

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

Создаются сами эффекты переходов с помощью @keyframes

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Итак, для начала нам нужно описать нужные изменения в @keyframes, давайте подробнее разберем, как с ними работать.

Синтаксис @keyframes

Собственно, мне проще будет объяснить вам все на готовом примере, пусть и очень простом. Вот он (код добавляется в css-файл):

@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;}} 100%{font-size: 50px;}}

@keyframes pulse{

0%{font-size: 50px;}

50%{font-size: 60px;}}

100%{font-size: 50px;}}

Итак, после ключевика @keyframes идет произвольное слово, которое будет выступать названием анимации. В нашем случае это “pulse”. Далее открываются фигурные скобки, в которых записываются нужные правила.

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

Ключевые слова from и to могут заменить процентную запись, они обозначают 0% и 100% соответственно, то есть начало и конец воспроизведения.

Применяем анимацию в действии

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

Выбрать элемент, для которого она будет применяться

Связать его с правилами, описанными через @keyframes (посредством имени), а также задать дополнительные настройки если это будет необходимо.

Пробуем

В своем html-файле я создал блок с классом shadow, в котором располагается простая строка текста. Наша цель – применить анимационные эффекты, описанные нами ранее, к этому текстовому элементу.

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

Итак, помимо тех стилей, что уже есть у нашего блока, добавляем новые:

animation-name: pulse; animation-duration: 2s;

animation-name: pulse;

animation-duration: 2s;

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

Чтобы управлять количеством повторений, существует еще одно свойство:

animation-iteration-count: 4;

animation-iteration-count: 4;

Таким образом, все повториться 4 раза, после чего прекратиться. Как вы понимаете, вместо четырех можно вписать любое число.

Бесконечная анимация в css3

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

animation-iteration-count: infinite;

animation-iteration-count: infinite;

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

Задержка перед началом

По умолчанию воспроизведение начинается после полной загрузки страницы. Этим поведением можно управлять с помощью свойства animation-delay. Его значение задается в секундах.

Направление

Еще одно интересное свойство – animation-direction. По умолчанию стоит как нормальное, если поставить reverse, то все описанные кадры будут выполняться в обратном направлении. Давайте проверим, в чем разница. Для этого я немного изменил эффект, добавив еще один кадр.

@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;} 70%{font-size: 80px;} 100%{font-size: 50px;}}

@keyframes pulse{

0%{font-size: 50px;}

50%{font-size: 60px;}

70%{font-size: 80px;}

100%{font-size: 50px;}}

Итак, при нормальном направлении в первой половине анимации размер шрифта увеличиться до 60 пикселей, потом он резко увеличиться еще раз, уже до 80-ти, после чего вернется в исходное положение.

Рис. 2. Исходный размер текста

Рис. 3. Размер шрифта почти в конце анимации, перед резким возвращением к исходному состоянию.

Теперь задаем:

animation-direction: reverse;

animation-direction: reverse;

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

Форма анимации

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

animation-timing-function: ease;

animation-timing-function: ease;

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

Сокращенная запись

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

animation: имя|длительность|форма|задержка|направление|число повторов

animation: имя|длительность|форма|задержка|направление|число повторов

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

animation | CSS справочник

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

12.0+ 10.0+ 16.0+ 43.0+ 30.0+ 9.0+

Описание

CSS свойство animation позволяет установить несколько или все значения свойств анимации в одном объявлении.

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

Значение по умолчанию: none 0 ease 0 1 normal
Применяется: ко всем элементам и псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.animation=»mymove 5s infinite»

Синтаксис

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Значения свойства

Значение Описание
animation-name Указывает имя правила @keyframes.
animation-duration Определяет сколько секунд или миллисекунд понадобится, чтобы закончить 1 цикл анимации.
animation-timing-function Определяет кривую скорости для анимации.
animation-delay Определяет, когда запустится анимация.
animation-iteration-count Определяет сколько раз анимация должна будет проигрываться.
animation-direction Указывает будет ли анимация проигрываться в реверсе на альтернативных циклах.
animation-fill-mode Задаёт стиль для элемента, когда анимация не проигрывается (до её запуска, во время остановки или после её окончания).
animation-play-state Указывает будет анимация проигрываться или будет в режиме паузы.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    div.primer {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: mymove 5s infinite;
    }
    @keyframes mymove {
      from { left:0px; }
      to { left:540px; }
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

Результат данного примера в окне браузера:

CSS animation generator: 15 лучших инструментов CSS3-анимации

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


Magic CSS3 Animations — это пакет CSS3-анимаций со спецэффектами, которые вы можете свободно использовать для любых веб-проектов. Просто включите стиль CSS magic.css или минимизированную версию magic.min.css.
CSS3 Animation Cheat Sheet представляет собой набор предустановленной plug-and-play анимации для веб-проектов. Для его использования нужно добавить стили на сайт и применить подготовленные классы CSS к элементам, которые вы хотите анимировать. CSS3 Animation Cheat Sheet использует правило @keyframes и работает во всех последних версиях браузеров (в том числе в IE 10).
CSS3 Keyframes Animation Generator представляет собой онлайн-инструмент, который позволяет создавать анимацию с помощью правила @keyframes.
Включает в себя многие эффекты CSS. Эффекты рассортированы по нескольким категориям (магия, перспектива, вращение, мерцание, статика, слайды, CSS3 анимация при наведении), и все они довольно красивые. Каждый из них имеет свои собственные классы. Самый простой способ применить их — добавить эти классы к целевым элементам через JavaScript.
Animate.css предоставляет набор кросс-браузерных эффектов CSS3-анимации. Эффекты могут использоваться для привлечения внимания, создания анимации на основе появления и исчезновения элементов.
Это JavaScript-библиотека для создания динамической анимации. Просто добавьте компонент и выберите пресет. После этого вы можете получить короткий URL-адрес или экспортировать анимацию CSS3 из примеров.
Hover.CSS — полезная коллекция эффектов на CSS3, которые могут применяться для призыва к действию, кнопкам, логотипам, специальным изображениям и так далее. Для использования коллекции достаточно скопировать и вставить код эффекта в CSS или разместить ссылку на его файл стилей.
AniJS — это декларативная библиотека для создания CSS-анимации, которая позволяет ускорить и обогатить разработку. Она полностью документирована и проста в использовании.
ProgressJs — это JavaScript и CSS3 библиотека, которая помогает разработчикам создавать и управлять индикаторами загрузки (прогресс-барами). Вы можете создать собственный шаблон для прогресс-бара или легко настроить готовый.
Keyframer — это удобный инструмент, который поможет вам создать CSS3 анимацию. Кeyframer довольно прост в использовании. Чтобы добавить ключевой кадр, вам нужно только кликнуть по шкале времени, а затем нажать на круглую кнопку, чтобы применить CSS-стили для анимации. Или кнопку с крестиком, чтобы удалить текущий кадр.
Инструмент для простого создания CSS3-анимации. Нужно настроить анимацию с помощью графика, изменить ее, получить сгенерированный CSS-код и все готово!
CSSketch — это Sketch 3 плагин, который позволяет быстро изменять дизайн, вкладывая таблицы стилей. Он поддерживает язык стилей {less}. Благодаря этому вы сможете использовать в таблице стилей функции и переменные. CSSketch — это программное обеспечение с полностью открытым исходным кодом, так что вы можете внести свой вклад в его развитие.
JQuery-плагин для создания анимированной подсветки и CSS3 анимации фона. Вы можете настроить анимацию (скорость и размер), эффект (цвет, прозрачность и размытие) и задать конкретную продолжительность или отключить таймер полностью.
Это средство для тестирования отказоустойчивости (постепенной деградации) кода CSS3. С его помощью вы сможете увидеть, как веб-страница будет отображаться в IE 6-8 версии.
GFX — это библиотека 3D CSS3 анимации, которая расширяет JQuery несколькими полезными функциями для программного создания CSS3 переходов, которые управляются с помощью метода setTimeout.

Данная публикация является переводом статьи «15 Best CSS3 Animation Tools for Developers» , подготовленная редакцией проекта.

CSS-анимаций


CSS-анимации

CSS позволяет анимировать элементы HTML без использования JavaScript или Flash!

CSS

В этой главе вы узнаете о следующих свойствах:

  • @keyframes
  • название анимации
  • продолжительность анимации
  • задержка анимации
  • количество итераций анимации
  • направление анимации
  • функция синхронизации анимации
  • режим заливки анимации
  • анимация

Браузер Поддержка анимации

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

Имущество
@keyframes 43,0 10,0 16,0 9,0 30,0
название анимации 43,0 10,0 16,0 9,0 30.0
продолжительность анимации 43,0 10,0 16,0 9,0 30,0
задержка анимации 43,0 10,0 16,0 9,0 30,0
количество итераций анимации 43,0 10,0 16.0 9,0 30,0
анимация-направление 43,0 10,0 16,0 9,0 30,0
функция синхронизации анимации 43,0 10,0 16,0 9,0 30,0
режим заливки анимации 43.0 10,0 16,0 9,0 30,0
анимация 43,0 10,0 16,0 9,0 30,0

Что такое CSS-анимация?

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

Вы можете изменять столько свойств CSS, сколько захотите, сколько угодно раз.

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

Ключевые кадры содержат стили, которые элемент будет иметь в определенное время.


Правило @keyframes

Когда вы указываете стили CSS внутри @keyframes Правило, анимация будет постепенно меняться от текущего стиля к новому стилю в определенное время.

Чтобы анимация работала, необходимо привязать анимацию к элементу.

В следующем примере «пример» анимации привязывается к элементу

.Анимация будет длиться 4 секунды, и постепенно изменится цвет фона элемента
от «красного» до «желтого»:

Пример

/ * Код анимации * /
Пример @keyframes {
из {background-color: red;}
к {background-color: yellow;}
}

/ * Элемент, к которому применяется анимация * /
div {
width: 100px;
высота: 100 пикселей;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}

Попробуй сам »

Примечание: Свойство animation-duration определяет, сколько времени должно занять анимация.Если свойство animation-duration не указано, анимации не будет, потому что значение по умолчанию — 0 с (0 секунд).

В приведенном выше примере мы указали, когда стиль изменится, используя ключевые слова «от» и «до» (что означает 0% (начало) и 100% (завершено)).

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

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

элемент, когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:

Пример

/ * Код анимации * /
пример @keyframes {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/ * Элемент, к которому применяется анимация * /
div {
ширина: 100 пикселей;
высота: 100 пикселей;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}

Попробуй сам »

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

элемент, когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:

Пример

/ * Код анимации * /
пример @keyframes {
0% {background-color: red; слева: 0px; top: 0px;}
25% {цвет фона: желтый; слева: 200 пикселей; top: 0px;}
50% {цвет фона: синий; слева: 200 пикселей; top: 200px;}
75% {цвет фона: зеленый; слева: 0px; top: 200px;}
100% {цвет фона: красный; слева: 0px; top: 0px;}
}

/ * Элемент, к которому применяется анимация * /
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}

Попробуй сам »

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

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

В следующем примере перед запуском анимации задана задержка в 2 секунды:

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 секунды;
задержка анимации: 2 с;
}

Попробуй сам »

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

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

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 секунды;
анимация-задержка: -2 с;
}

Попробуй сам »

Установить, сколько раз анимация должна запускаться

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

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

Пример

div {
width: 100px;
высота: 100 пикселей;
позиция: относительная;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 3;
}

Попробуй сам »

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

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: бесконечный;
}

Попробуй сам »

Анимация запуска в обратном направлении или с чередованием циклов

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

Свойство анимации-направление может иметь следующие значения:

  • normal — Анимация воспроизводится как обычно (нападающие). Это значение по умолчанию
  • reverse — Анимация воспроизводится в обратное направление (назад)
  • альтернативный — Воспроизводится анимация сначала вперед, затем назад
  • альтернативно-обратный — Анимация воспроизводится сначала назад, затем вперед

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

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 секунды;
анимация-направление: обеспечить регресс;
}

Попробуй сам »

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

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 2;
анимация-направление: альтернативный;
}

Попробуй сам »

В следующем примере значение «alternate-reverse» используется для создания анимации. сначала бежать назад, затем вперед:

Пример

div {
width: 100px;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 2;
анимация-направление: альтернативно-реверсивный;
}

Попробуй сам »

Укажите кривую скорости анимации

Свойство функции синхронизации анимации определяет кривую скорости анимация.

Свойство функции-времени-анимации может иметь следующие значения:

  • легкость — задает анимацию с медленным началом, затем быстрым, а затем медленным завершением (по умолчанию)
  • linear — Задает анимацию с одинаковой скоростью от начала до конца
  • easy-in — Определяет анимацию с медленным запуском
  • easy-out — Определяет анимацию с медленным концом
  • easy-in-out — Определяет анимацию с медленным началом и концом
  • cubic-bezier (n, n, n, n) — Позволяет вам определять свои собственные значения в кубической функции Безье

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

Пример

# div1 {функция-время-анимации: линейная;}
# div2 {функция-анимации: легкость;}
# div3 {функция-синхронизации-анимации: easy-in;}
# div4 {функция-тайминга-анимации: easy-out;}
# div5 {анимация-тайминги-функция: легкость входа;}

Попробуй сам »

Укажите режим заливки для анимации

CSS-анимация не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра.Свойство animation-fill-mode может переопределить это поведение.

Свойство animation-fill-mode определяет стиль для целевого элемента, когда анимация не воспроизводится (до этого начинается, после окончания или и то, и другое).

Свойство animation-fill-mode может иметь следующие значения:

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

В следующем примере элемент

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

Пример

div {
width: 100px;
высота: 100 пикселей;
фон: красный;
позиция: относительная;
имя-анимации: пример;
продолжительность анимации: 3 с;
режим заливки-анимации: вперед;
}

Попробуй сам »

В следующем примере элемент

получает значения стиля, установленные первый ключевой кадр перед запуском анимации (в течение периода задержки анимации):

Пример

div {
width: 100px;
высота: 100 пикселей;
фон: красный;
позиция: относительная;
имя-анимации: пример;
продолжительность анимации: 3 с;
задержка анимации: 2 с;
Animation-fill-mode: backwards;
}

Попробуй сам »

Следующий пример позволяет элементу

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

Пример

div {
width: 100px;
высота: 100 пикселей;
фон: красный;
положение: относительное;
имя-анимации: пример;
продолжительность анимации: 3 секунды;
задержка анимации: 2 с;
Animation-fill-mode: both;
}

Попробуй сам »

Свойство сокращения анимации

В приведенном ниже примере используются шесть свойств анимации:

Пример

div {
имя-анимации: пример;
продолжительность анимации: 5 с;
функция времени анимации: линейная;
задержка анимации: 2 с;
количество итераций анимации: бесконечно;
направление анимации: альтернативное;
}

Попробуй сам »

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


Проверьте себя упражнениями!


Свойства анимации CSS

В следующей таблице перечислены правило @keyframes и все свойства анимации CSS:



CSS Подсказка


Создавайте всплывающие подсказки с помощью CSS.


Демо: примеры подсказок

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


Базовая подсказка

Создать всплывающую подсказку, которая появляется, когда пользователь наводит указатель мыши на элемент:

Пример


/ * Контейнер подсказки * /
.tooltip {
position: relative;
дисплей: встроенный блок;
нижняя граница: 1 пиксель с точками чернить; / * Если вы хотите, чтобы под парящим текстом появлялись точки * /
}

/ * Текст всплывающей подсказки * /
.всплывающая подсказка .tooltiptext {
видимость: скрыто;
ширина: 120 пикселей;
цвет фона: черный;
цвет: #fff;
выравнивание текста: по центру;
отступ: 5px 0;
радиус границы: 6 пикселей;

/ * Поместите текст всплывающей подсказки — см. Примеры ниже! * /
позиция: абсолютная;
z-индекс: 1;
}

/ * Показать текст всплывающей подсказки при наведении курсора на контейнер всплывающей подсказки * /
.tooltip: hover .tooltiptext {
видимость: видимая;
}

Наведение надо мной
Подсказка текст

Попробуй сам »

Объяснение примера

HTML: Используйте элемент контейнера (например,

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

Текст всплывающей подсказки помещается внутри встроенного элемента (например, ) с class = "tooltiptext" .

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

Класс tooltiptext содержит фактический текст всплывающей подсказки.это по умолчанию скрыт и будет отображаться при наведении курсора (см. ниже). Мы также добавили некоторые основные стили к нему: ширина 120 пикселей, черный цвет фона, белый цвет текста, текст по центру и отступ 5 пикселей сверху и снизу.

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

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

с помощью class = "tooltip" .



Всплывающие подсказки для позиционирования

В этом примере всплывающая подсказка размещается справа ( слева: 105% ) от «hoverable» текст (

). Также обратите внимание, что top: -5px используется для размещения его в середине элемента контейнера. Мы используем число 5 , потому что текст всплывающей подсказки имеет верхнюю и нижняя обивка 5 пикселей. Если вы увеличите его заполнение, также увеличьте значение свойства top до убедитесь, что он остается посередине (если вы этого хотите).Такой же применяется, если вы хотите, чтобы всплывающая подсказка располагалась слева.

Правая подсказка

.tooltip .tooltiptext {
top: -5px;
оставили: 105%;
}

результат:

Наведите надо мной Текст всплывающей подсказки

Попробуй сам »

Левая подсказка

.tooltip .tooltiptext {
top: -5px;
верно: 105%;
}

результат:

Наведите надо мной Текст всплывающей подсказки

Попробуй сам »

Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, см. Примеры ниже.Обратите внимание, что мы используем свойство margin-left со значением минус 60. пикселей. Это нужно для того, чтобы центрировать всплывающую подсказку над / под парящим текстом. Установлено до половины ширины всплывающей подсказки (120/2 = 60).

Верхняя подсказка

.tooltip .tooltiptext {
width: 120px;
внизу: 100%; Осталось
: 50%;
левое поле: -60 пикселей; / * Используем половину ширины (120/2 = 60), чтобы центрировать всплывающую подсказку * /
}

результат:

Наведите надо мной Текст всплывающей подсказки

Попробуй сам »

Нижняя подсказка

.всплывающая подсказка .tooltiptext {
width: 120px;
верх: 100%; Осталось
: 50%;
левое поле: -60 пикселей; / * Используем половину ширины (120/2 = 60), чтобы центрировать всплывающую подсказку * /
}

результат:

Наведите надо мной Текст всплывающей подсказки

Попробуй сам »

Стрелки всплывающей подсказки

Чтобы создать стрелку, которая должна появляться с определенной стороны всплывающей подсказки, добавьте «пустой» содержание после всплывающая подсказка с классом псевдоэлемента :: после вместе с содержимым свойство.Сама стрелка создается с помощью границ. Это сделает всплывающую подсказку выглядят как речевой пузырь.

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

Стрелка снизу

.tooltip .tooltiptext :: after {
content: «»;
позиция: абсолютная;
верх: 100%; / * Внизу всплывающей подсказки * /
слева: 50%;
левое поле: -5 пикселей;
ширина границы: 5 пикселей;
стиль границы: сплошной;
цвет границы: черный прозрачный прозрачный прозрачный;
}

результат:

Наведите надо мной Текст всплывающей подсказки

Попробуй сам »

Объяснение примера

Поместите стрелку внутри всплывающей подсказки: вверху: 100% поместит стрелку в внизу всплывающей подсказки. слева: 50% будет центрировать стрелку.

Примечание: Свойство border-width определяет размер стрелка. Если вы измените это, также измените значение margin-left на то же самое. Этот стрелка будет в центре.

Цвет границы используется для преобразования содержимого в стрелку. Мы устанавливаем верхняя граница становится черной, а остальная часть — прозрачной. Если бы все стороны были черными, ты в итоге получится черный квадрат.

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

Верхняя стрелка

.tooltip .tooltiptext :: after {
content: «»;
позиция: абсолютная;
низ: 100%; / * Вверху всплывающей подсказки * /
осталось: 50%;
левое поле: -5 пикселей;
ширина границы: 5 пикселей;
стиль границы: сплошной;
цвет границы: прозрачный прозрачный черный прозрачный;
}

результат:

Наведите надо мной Текст всплывающей подсказки

Попробуй сам »

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

Стрелка влево

.tooltip .tooltiptext :: after {
content: «»;
позиция: абсолютная;
верх: 50%;
справа: 100%; / * Слева от всплывающей подсказки * /
margin-top: -5px;
ширина границы: 5 пикселей;
стиль границы: сплошной;
цвет границы: прозрачный черный прозрачный прозрачный;
}

результат:

Наведите надо мной Текст всплывающей подсказки

Попробуй сам »

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

Стрелка вправо

.tooltip .tooltiptext :: after {
content: «»;
позиция: абсолютная;
верх: 50%;
осталось: 100%; / * Справа от всплывающая подсказка * /
margin-top: -5px;
ширина границы: 5 пикселей;
стиль границы: сплошной;
цвет границы: прозрачный прозрачный прозрачный черный;
}

результат:

Наведите надо мной Текст всплывающей подсказки

Попробуй сам »

Появление всплывающих подсказок (анимация)

Если вы хотите, чтобы текст всплывающей подсказки исчезал, когда он вот-вот станет видимым, вы можно использовать свойство CSS transition вместе с непрозрачностью свойство, и перейти от полностью невидимого к 100% видимому за определенное количество секунд. (1 секунда в нашем примере):

Пример

.всплывающая подсказка .tooltiptext {
непрозрачность: 0;
переход: непрозрачность 1 с;
}

.tooltip: hover .tooltiptext {
непрозрачность: 1;
}

Попробуй сам »

Использование анимации CSS — CSS: каскадные таблицы стилей

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

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

  1. Их легко использовать для простой анимации; вы можете создавать их, даже не зная JavaScript.
  2. Анимация работает хорошо даже при средней загрузке системы. Простые анимации часто плохо работают в JavaScript. Механизм рендеринга может использовать пропуск кадров и другие методы, чтобы поддерживать производительность как можно более плавной.
  3. Разрешение браузеру управлять последовательностью анимации позволяет браузеру оптимизировать производительность и эффективность, например, уменьшая частоту обновления анимаций, запущенных на вкладках, которые в настоящее время не отображаются.

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

Подсвойства свойства анимации :

имя-анимации
Задает имя at-правила @keyframes , описывающего ключевые кадры анимации.
продолжительность анимации
Задает продолжительность одного цикла анимации.
функция синхронизации анимации
Настраивает время анимации; то есть, как анимация переходит через ключевые кадры, устанавливая кривые ускорения.
задержка анимации
Настраивает задержку между временем загрузки элемента и началом анимационной последовательности.
количество итераций анимации
Задает количество повторов анимации; вы можете указать infinite , чтобы повторять анимацию бесконечно.
направление анимации
Определяет, должна ли анимация менять направление при каждом прохождении последовательности или сбрасываться до начальной точки и повторяться.
режим заливки анимации
Задает значения, применяемые анимацией до и после ее выполнения.
состояние воспроизведения анимации
Позволяет приостановить и возобновить последовательность анимации.

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

Поскольку синхронизация анимации определяется в стиле CSS, который конфигурирует анимацию, ключевые кадры используют <процент> , чтобы указать время во время последовательности анимации, в которой они происходят.0% указывает на первый момент последовательности анимации, а 100% указывает на конечное состояние анимации. Поскольку эти два времени так важны, у них есть специальные псевдонимы: от и до . Оба варианта не обязательны. Если от / 0% или до / 100% не указано, браузер запускает или завершает анимацию, используя вычисленные значения всех атрибутов.

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

Примечание: Некоторым старым браузерам (до 2017 года) могут потребоваться префиксы; живые примеры, которые вы можете просмотреть в своем браузере, включают синтаксис с префиксом -webkit .

Создание скольжения текста по окну браузера

Этот простой пример стилизует элемент

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

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

  п {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
}

@keyframes slidein {
  из {
    маржа слева: 100%;
    ширина: 300%;
  }

  к {
    маржа слева: 0%;
    ширина: 100%;
  }
}
  

В этом примере стиль для элемента

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

Если бы мы хотели, чтобы какой-либо пользовательский стиль для элемента

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

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

Второй (и последний) ключевой кадр находится на уровне 100% (с использованием псевдонима от до ). Левое поле установлено на 0%, а ширина элемента установлена ​​на 100%. Это приводит к тому, что заголовок заканчивает свою анимацию вплотную к левому краю области содержимого.

  

Гусеница и Алиса некоторое время молча смотрели друг на друга: наконец Гусеница вынула кальян изо рта и обратилась к ее вялым, сонным голосом.

Примечание : Обновите страницу, чтобы увидеть анимацию, или нажмите кнопку CodePen, чтобы просмотреть анимацию в среде CodePen.

Добавление еще одного ключевого кадра

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

  75% {
  размер шрифта: 300%;
  маржа слева: 25%;
  ширина: 150%;
}
  

Полный код теперь выглядит так:

  п {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
}

@keyframes slidein {
  из {
    маржа слева: 100%;
    ширина: 300%;
  }

  75% {
    размер шрифта: 300%;
    маржа слева: 25%;
    ширина: 150%;
  }

  к {
    маржа слева: 0%;
    ширина: 100%;
  }
}
  
  

Гусеница и Алиса некоторое время молча смотрели друг на друга: наконец Гусеница вынула кальян изо рта и обратилась к ее вялым, сонным голосом.

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

Примечание : Обновите страницу, чтобы увидеть анимацию, или нажмите кнопку CodePen, чтобы просмотреть анимацию в среде CodePen.

Создание повторения

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

  п {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
  количество итераций анимации: бесконечно;
}
  

Добавляем к существующему коду:

  @keyframes slidein {
  из {
    маржа слева: 100%;
    ширина: 300%;
  }

  к {
    маржа слева: 0%;
    ширина: 100%;
  }
}
  
  

Гусеница и Алиса некоторое время молча смотрели друг на друга: наконец Гусеница вынула кальян изо рта и обратилась к ее вялым, сонным голосом.

Заставляет его двигаться вперед и назад

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

.
  п {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
  количество итераций анимации: бесконечно;
  направление анимации: альтернативное;
}
  

А остальной код:

  @keyframes slidein {
  из {
    маржа слева: 100%;
    ширина: 300%;
  }

  к {
    маржа слева: 0%;
    ширина: 100%;
  }
}
  
  

Гусеница и Алиса некоторое время молча смотрели друг на друга: наконец Гусеница вынула кальян изо рта и обратилась к ее вялым, сонным голосом.

Использование сокращения анимации

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

  п {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
  количество итераций анимации: бесконечно;
  направление анимации: альтернативное;
}
  

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

  п {
  анимация: 3 секунды бесконечное чередование слайдов;
}
  

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

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

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

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

  имя-анимации: fadeInOut, moveLeft300px, bounce;
продолжительность анимации: 3 секунды;
количество итераций анимации: 1;  

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

  имя-анимации: fadeInOut, moveLeft300px, bounce;
продолжительность анимации: 2,5 с, 5 с, 1 с;
количество итераций анимации: 2, 1, 5;  

В этом третьем случае заданы три анимации, но только две длительности и количество итераций. В таких случаях, когда недостаточно значений для присвоения отдельного значения каждой анимации, значения циклически меняются от начала до конца.Так, например, fadeInOut получает длительность 2,5 секунды, а moveLeft300px — 5 секунд. Теперь мы подошли к концу доступных значений продолжительности, поэтому мы снова начинаем с самого начала — поэтому длительность отскока составляет 2,5 секунды. Счетчики итераций (и любые другие значения свойств, которые вы укажете) будут назначены таким же образом.

  имя-анимации: fadeInOut, moveLeft300px, bounce;
продолжительность анимации: 2,5 с, 5 с;
количество итераций анимации: 2, 1;  

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

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

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

Добавление CSS

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

  .slidein {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
  количество итераций анимации: 3;
  направление анимации: альтернативное;
}

@keyframes slidein {
  из {
    маржа слева: 100%;
    ширина: 300%
  }

  к {
    маржа слева: 0%;
    ширина: 100%;
  }
}  
Добавление слушателей событий анимации

Мы будем использовать код JavaScript для прослушивания всех трех возможных событий анимации.Этот код настраивает наши прослушиватели событий; мы вызываем его при первой загрузке документа для настройки.

  var element = document.getElementById ("watchme");
element.addEventListener ("запуск анимации", слушатель, ложь);
element.addEventListener ("animationend", слушатель, ложь);
element.addEventListener ("анимация", слушатель, ложь);

element.className = "слайд";
  

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

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

Прием событий

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

  прослушиватель функции (событие) {
  var l = document.createElement ("ли");
  switch (event.type) {
    case "animationstart":
      l.textContent = `Начато: прошедшее время $ {event.elapsedTime}`;
      перемена;
    case "animationend":
      l.textContent = `Завершено: прошедшее время $ {event.elapsedTime}`;
      перемена;
    case "animationiteration":
      l.textContent = `Новый цикл начался в момент $ {event.elapsedTime}`;
      перемена;
  }
  document.getElementById («вывод»). appendChild (l);
}
  

Этот код тоже очень простой.Он смотрит на event.type , чтобы определить, какое событие анимации произошло, а затем добавляет соответствующее примечание в

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

    Результат, когда все сказано и сделано, выглядит примерно так:

    • Начато: истекшее время 0
    • Новый цикл начался в момент времени 3.01200008392334
    • Новый цикл начался в момент времени 6.00600004196167
    • Завершено: истекшее время 9.234000205993652

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

    HTML

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

      

    Смотри, как я двигаюсь

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

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

    А вот и живой вывод.

    Примечание : Обновите страницу, чтобы увидеть анимацию, или нажмите кнопку CodePen, чтобы просмотреть анимацию в среде CodePen.

    animation — CSS: Cascading Style Sheets

    Это свойство является сокращением для следующих свойств CSS:

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

    Каждая отдельная анимация указывается как:

    • ноль или одно вхождение следующих значений:
    • необязательное имя для анимации, которое может быть none , или
    • ноль, один или два <время> значений

    Порядок значений в каждом определении анимации важен: первое значение, которое может быть проанализировано как <время> , назначается для длительности анимации , а второе назначается для анимации-задержки .

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

    Значения

    <количество одинарных анимаций>
    Количество воспроизведений анимации. Значение должно быть одним из доступных в animation-iteration-count .
    <направление одной анимации>
    Направление, в котором воспроизводится анимация. Значение должно быть одним из доступных в animation-direction .
    <режим одиночной анимации>
    Определяет, как стили должны применяться к цели анимации до и после ее выполнения.Значение должно быть одним из доступных в animation-fill-mode .
    <состояние одиночной анимации>
    Определяет, воспроизводится анимация или нет. Значение должно быть одним из доступных в состоянии воспроизведения анимации .

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

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

    Глаз Сайлона

      
    Прослушивание отправлений
      .polling_message {
      цвет белый;
      плыть налево;
      маржа-право: 2%;
    }
    
    .view_port {
      цвет фона: черный;
      высота: 25 пикселей;
      ширина: 100%;
      переполнение: скрыто;
    }
    
    .cylon_eye {
      цвет фона: красный;
      background-image: linear-gradient (вправо,
          rgba (0, 0, 0, .9) 25%,
          rgba (0, 0, 0, .1) 50%,
          rgba (0, 0, 0, 0,9) 75%);
      цвет белый;
      высота: 100%;
      ширина: 20%;
    
      -webkit-animation: 4 с, линейный 0, бесконечный альтернативный move_eye;
              анимация: 4 с линейные 0 с бесконечные альтернативные move_eye;
    }
    
    @ -webkit-keyframes move_eye {from {margin-left: -20%; } на {маржа-слева: 100%; }}
            @keyframes move_eye {from {margin-left: -20%; } на {маржа-слева: 100%; }}
      

    Дополнительные примеры см. В разделе Использование анимации CSS.

    Таблицы BCD загружаются только в браузере

    Примечания Quantum CSS

    • В Gecko есть ошибка, из-за которой, когда вы анимируете закадровый элемент на экране, но указываете задержку, Gecko не перерисовывается на некоторых платформах, например Windows (ошибка 1383239). Это было исправлено в новом параллельном движке CSS Firefox (также известном как Quantum CSS или Stylo, который планируется выпустить в Firefox 57).
    • Другая ошибка Gecko означает, что элементы
      не могут быть открыты по умолчанию с помощью атрибута open , если для них активна анимация (ошибка 1382124).Quantum CSS исправляет это.
    • Еще одна ошибка означает, что на анимацию с использованием em-единиц не влияют изменения размера шрифта в родительском элементе анимированного элемента, тогда как они должны быть (ошибка 1254424). Quantum CSS исправляет это.

    анимация | CSS-уловки

    Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как color , background-color , height или width .Каждую анимацию необходимо определить с помощью at-правила @keyframes , которое затем вызывается с помощью свойства animation , например:

      .element {
      анимация: пульс 5с бесконечный;
    }
    
    @keyframes pulse {
      0% {
        цвет фона: # 001F3F;
      }
      100% {
        цвет фона: # FF4136;
      }
    }  

    Каждое @keyframes at-правило определяет, что должно происходить в определенные моменты во время анимации. Например, 0% — это начало анимации, а 100% — конец.Эти ключевые кадры затем могут управляться либо сокращенным свойством animation , либо его восемью под-свойствами, чтобы дать больше контроля над тем, как эти ключевые кадры должны управляться.

    Субобъекты

    • имя-анимации : объявляет имя @keyframes at-правила, которым нужно управлять.
    • продолжительность анимации : время, необходимое для завершения одного цикла анимации.
    • Функция синхронизации анимации : устанавливает предустановленные кривые ускорения, такие как легкость или линейная .
    • animation-delay : время между загрузкой элемента и началом анимационной последовательности (классные примеры).
    • animation-direction : устанавливает направление анимации после цикла. Его значение по умолчанию сбрасывается в каждом цикле.
    • счетчик-итераций-анимации : количество раз, когда должна быть выполнена анимация.
    • animation-fill-mode : устанавливает, какие значения применяются до / после анимации.
      Например, вы можете установить последнее состояние анимации, чтобы оно оставалось на экране, или вы можете настроить его так, чтобы оно возвращалось к предыдущему состоянию, когда анимация началась.
    • состояние воспроизведения анимации : приостановить / воспроизвести анимацию.

    Эти подсвойства можно использовать следующим образом:

      @keyframes stretch {
      / * здесь объявляем действия анимации * /
    }
    
    .element {
      имя-анимации: растянуть;
      продолжительность анимации: 1,5 с;
      анимация-функция-тайминг: замедление;
      задержка анимации: 0 с;
      направление анимации: альтернативное;
      количество итераций анимации: бесконечно;
      режим заливки анимации: нет;
      состояние воспроизведения анимации: работает;
    }
    
    / *
      такой же как:
    * /
    
    .element {
      анимация:
        протяжение
        1,5 с
        облегчение
        0 с
        чередовать
        бесконечный
        никто
        Бег;
    }  

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

    функция синхронизации анимации легкость, легкость выхода, легкость входа, легкость входа, линейная, кубическая кривая Безье (x1, y1, x2, y2) (например, кубическая кривая Безье (0,5 , 0,2, 0,3, 1,0))
    продолжительность анимации Xs или Xms
    задержка анимации Xs или Xms
    количество итераций анимации X
    animation-fill-mode вперед, назад, оба, нет
    animation-direction normal, альтернативный
    animation-play-state paused, running , работает

    Несколько шагов

    Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0% и 100% внутри @keyframes :

      @keyframes pulse {
      0%, 100% {
        цвет фона: желтый;
      }
      50% {
        цвет фона: красный;
      }
    }  

    Несколько анимаций

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

      .element {
      анимация:
        импульс 3 с ослабление бесконечное чередование,
        nudge 5s линейный бесконечный альтернативный;
    }  

    Производительность

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

    • transform: translate ()
    • transform: scale ()
    • transform: rotate ()
    • opacity

    Какие свойства можно анимировать?

    MDN имеет список свойств CSS, которые можно анимировать.Анимируемые свойства имеют тенденцию к цвету и числам. Примером неанимируемого свойства является background-image .

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

    Настольный
    Chrome Firefox IE Edge Safari
    4 * 5 * 10 12 5.1 *
    Мобильный / Мобильный
    Android Chrome Android Firefox Android iOS Safari
    89 86 4 * 6.0-6,1 *

    Дополнительная информация

    CSS3 Animate It Примеры — Анимация элементов при прокрутке

    Секвенирование

    Если вы хотите, чтобы набор анимаций запускался одну за другой, вы можете установить время последовательности в мс с помощью «data-sequence», а затем определить порядок с помощью «data-id».

    Работает!

    Эта анимация начнется через 500 мсек после

    Эта анимация начнется через 500 мсек после

    Смещение

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

    
    

    Это работает!

Анимировать один раз

Добавление этого гарантирует, что элемент будет анимирован только один раз и не будет сброшен, когда он покинет область просмотра.

Это работает!

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

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

Это работает!

Задержка (новый)

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

Это работает!

Переключение при нажатии


Это работает!

По щелчку с секвенированием

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


Работает!

Это работает!

Исправление IE

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

Поместите это под анимацией.css в заголовке вашего файла.

      

 

30 классных примеров анимации CSS для создания потрясающих анимационных сайтов

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

Однако дизайн веб-сайта с анимацией CSS / CSS3 — непростая задача для дизайнеров и разработчиков.

Ищете вдохновение в лучших и новейших примерах CSS-анимации 2019 года?

Вот 30 самых креативных и вдохновляющих примеров анимации CSS / CSS3 для создания потрясающего анимированного веб-сайта:

Во-первых, что такое CSS-анимация?

CSS-анимация — это предлагаемый модуль для Cascading Style Sheets , который позволяет дизайнерам и разработчикам добавлять анимацию, редактируя код CSS своих веб-сайтов, вместо непосредственной загрузки изображений в формате GIF или Flash.

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

Выберите правильные инструменты для создания прототипов, прежде чем создавать лучшие анимационные веб-сайты.

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

25 классных примеров анимации CSS для вашего вдохновения

Давайте взглянем на 25 лучших и новейших примеров анимации CSS / CSS3 для вашего вдохновения:

1. Flying Birds

Рейтинг: ★★★★★

Летящая птица в этом примере CSS-анимации очень естественная и яркая, что делает весь веб-сайт интересным и ярким.

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

Просмотреть код CSS

2. Анимация куба морфинга

Рейтинг: ★★★★★

В этом примере создается великолепная веб-анимация для дизайнеров и разработчиков, отображающая наиболее важный или интересный контент. привлечь пользователей. Эффекты 3D очень привлекательны.

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

3. Анимация загрузки дракона

Рейтинг: ★★★★★

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

Посмотреть код CSS

4. Падающий снег

Рейтинг: ★★★★

Падающий снег очень привлекает внимание.

Этот пример анимации можно использовать на веб-сайтах, которые планируют запускать зимние / рождественские / новогодние акции.

Просмотреть код CSS

5. Анимация круга плаката

Рейтинг: ★★★★

Эта вращающаяся анимация CSS — еще один хороший выбор для дизайнеров и разработчиков для отображения наиболее важного веб-содержимого.

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

6. CSS3 Image Accordion

Рейтинг: ★★★★★

Аккордеон с анимированными изображениями был очень модным в последние годы.

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

Просмотр кода CSS3

7. CSS3 Анимация наведения

Рейтинг: ★★★

Отличная анимация наведения или взаимодействие — простой способ сделать веб-сайты выдающимися.Этот пример анимации наведения предлагает дизайнерам и разработчикам серию эффектов наведения на выбор в зависимости от их собственных потребностей.

Это идеальный выбор для улучшения вашего веб-сайта.

Просмотреть код CSS3

8. Анимация загрузки магазина

Рейтинг: ★★★★★

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

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

Просмотреть код CSS

9. Анимация глаз при входе

Рейтинг: ★★★★★

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

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

10. Шаговая 3D-анимация перехода

Рейтинг: ★★★★

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

Просмотр кода CSS

11. Адаптивная анимация навигации по содержимому CSS3

Рейтинг: ★★★★

Этот пример анимации показывает плавный процесс навигации. (При необходимости вы можете изучить 9 лучших принципов разработки меню навигации веб-сайта.)

Это хороший ресурс для вас, если вы случайно ищете хороший дизайн навигатора, сделанный на CSS3.

Просмотр кода CSS3

12. Анимированная карта CSS

Рейтинг: ★★★★

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

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

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

13. Анимация меню с разделенным текстом перспективы

Рейтинг: ★★★★★

Интересная анимация шрифтов может помочь улучшить веб-дизайн.

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

Просмотр кода CSS

14. Аккордеонное меню в стиле ретро

Рейтинг: ★★★★

Это интерактивное аккордеонное меню очень удобно. Хороший выбор для дизайнеров / разработчиков создать минималистичный веб-сайт с лучшим пользовательским интерфейсом.

Загрузить код CSS

15. Анимация загрузки CSS Ghost

Рейтинг: ★★★★

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

Просмотреть код CSS

Проверить другие дизайны анимации CSS:

16. Сложная анимация наведения CSS

Рейтинг: ★★★

Просмотреть код CSS3

17. Анимация кнопки

Рейтинг: ★★★★

Просмотр кода CSS3

18. Переходная анимация

Рейтинг: ★★★★★

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

19.Анимация навигации

Рейтинг: ★★★★★

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

20. Расширяющееся сеточное меню

Рейтинг: ★★★★

Просмотр кода CSS 9

21. Добавить анимацию файла

Рейтинг: ★★★

Просмотр кода CSS

22. Анимация радиокнопок

Рейтинг: ★★★

Просмотр кода CSS

23.Анимация кнопок соцсетей

Рейтинг: ★★★

Просмотр кода CSS

24. Анимация наведения инфокарты

Рейтинг: ★★★

Просмотр кода CSS 38

Необычная анимация кнопок

Рейтинг: ★★★★

Посмотреть код CSS

Это все свежие примеры анимации CSS / CSS3, которые мы собрали для вас. Мы надеемся, что они могут вас вдохновить.

5 лучших примеров веб-сайтов с анимацией CSS

В поисках лучшей анимации CSS мы нашли несколько креативных примеров анимированных веб-сайтов.

Мы хотели бы поделиться 5 из лучших примеров веб-сайтов с CSS-анимацией для вашего вдохновения:

26. Анимация героев

Рейтинг: ★★★★★

Просмотреть веб-сайт онлайн

27. CSS Proof Drinks

Рейтинг: ★★★★

Посмотреть веб-сайт онлайн

28.Gamifiled Web Animation

Рейтинг: ★★★★

Просмотр веб-сайта онлайн

29. Марионеточная анимация

Рейтинг: ★★★★

9 Просмотр веб-сайта онлайн 30. 3D в сочетании с 2D-анимацией

Рейтинг: ★★★★★

Просмотр веб-сайта онлайн

Заключение

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

.

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

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