Css animations: animation-fill-mode — CSS | MDN

Содержание

animation-fill-mode — CSS | MDN

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

CSS свойство animation-fill-mode определяет, как нужно применять стили к объекту анимации до и после её выполнения.

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;



animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Значения

none

Стили анимации не будут применены к элементу до и после её выполнения.

forwards

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

`animation-direction`	`animation-iteration-count`	последний ключевой кадр
`normal`	любое	`100%` или `to`
`reverse`	любое	`0%` или `from`
`alternate`	чётное	`0%` или `from`
`alternate`	нечётное	`100%` или `to`
`alternate-reverse`	чётное	`100%` или `to`
`alternate-reverse`	нечётное	`0%` или `from`

backwards

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

`animation-direction`	первый ключевой кадр
`normal` или `alternate`	`0%` или `from`
`reverse` или `alternate-reverse`	`100% или` `to`

both

Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.

Формальный синтаксис

Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.

HTML

<p>Наведите курсор мыши на серый блок</p>
<div>
  <div>Этот просто растёт</div>
  <div>Этот растёт и остаётся большим</div>
</div>

CSS

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
@-webkit-keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
.demo:hover .grows {
    animation-name: grow;
    animation-duration: 3s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

BCD tables only load in the browser

Transitions vs Animations — CSS Animation

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

Что такое Transitions?

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

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

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

Когда использовать

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

Переход будет работать хорошо, когда кто-то навет мышку/нажмет на кнопку:

Shiny effect

Или при добавлении элемента на страницу:

Add a list item

Что такое Animations?

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

Если transition устанавливает переход только от А до B, то animation может и A, и B, и C и даже D. Или любое другое количество этапов по мере необходимости.

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

Когда использовать

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

Например: нужна анимация на странице, которая начинает работать по прошествии определенного периода времени, как этот эффект мигания персонажа Baymax:

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

Иногда это не очевидно

В недавним посте начал с анимации, но затем стал использовать transitions.

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

По мере использования JavaScript, становилось понятно что с выбором ошибся и transitions лучше подходит. Когда JavaScript изменяет положение стрелки, CSS transition обрабатывает изменение (из состояния А в состояние В) более элегантно, чем при помощи анимации.

Чтобы получить больше информации кликни по уроку CSS часы.

Заключение

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

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

CSS — CSS-анимация — CSS Animations — это модуль CSS, который позволяет анимировать значения свойств

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

Reference

CSS-свойства

правила CSS Ат

Guides

Обнаружение поддержки анимации CSS: Описывает методику определения,поддерживает ли браузер CSS-анимацию.
Использование CSS анимации: Пошаговое руководство о том,как создавать анимации с помощью CSS.Эта статья описывает каждое соответствующее свойство CSS и ат-правило и объясняет,как они взаимодействуют друг с другом.
советы и хитрости по CSS-анимации: Советы и трюки,которые помогут вам получить максимальную отдачу от CSS-анимации.В настоящее время предлагается метод воспроизведения анимации,который уже прошел до конца,который API не поддерживает по своей сути.

Specifications

Совместимость с браузерами

Desktop Mobile

Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Хромовый Android Firefox для Android Опера Андроид Safari на IOS Samsung Интернет

	Desktop	Mobile
`CSS_Animations`	43 3	12 12	16 49 44 5	10	30 15 12.1-15 12-15	9 4	43 2 Свойство `animation-fill-mode` не поддерживается в браузерах Android ниже 2.3.	43 18	16 49 44 5	30 14 12.1-14 12-14	9 3.2	4.0 1.0

CSS_Animations

12.1-15

12-15

Свойство animation-fill-mode не поддерживается в браузерах Android ниже 2.3.

12.1-14

12-14

3.2

4.0

1.0

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

См.также

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

CSS Animations — описание и примеры использования

Что такое CSS Animations?

Уже довольно давно поддержка анимированных эффектов на web-страницах осуществлялась либо за счет средств HTML (пресловутый тег blink и marquee), либо, если надо было добиться чего-то большего — при помощи комбинирования CSS и JavaScript. Кроме того, оставались варианты с Flash и SVG. Однако все последние варианты достаточно сложны (требуют программирования), и предъявляют определенные требования к платформе (Flash, мало того, что «тормозит» и «зависает», так еще и не дружит с iOS).

Но около 2-х лет назад в рамках W3C было предложено дополнить спецификацию CSS 3 еще двумя модулями — CSS Animations и CSS Transitions. При помощи CSS Animations и CSS Transitions можно задать, скажем, начальное и конечное состояние объекта и способ перехода от одного состояния к другому. И вот, с выходом 5-й версии Firefox, уже можно сказать, что существенная часть современных браузеров поддерживает CSS-анимацию. Собственно говоря, кроме браузеров на движке Gecko выше 2.0 (Firefox 5, SeaMonkey 2.2), это браузеры на движке WebKit 53x (Safari 4, Chrome). Таким образом, учитывая сложившиеся тенденции, уже в ближайшее время свыше половины пользователей будут иметь программы просмотра веб-страниц, поддерживающие CSS animation/transition (последний, кстати был реализован еще раньше — в Safari 3 и Firefox 4).

Различие между CSS Animations и CSS Transitions состоит в том, что Animations представляет больше возможностей по управлению трансформацией объекта. Правда, при этом, опять-таки потребуется применение сценариев JavaScript. Иначе говоря, Animations — для программистов, а Transitions — для всех. Скажем, если вам нужно просто сделать кнопку, плавно меняющую цвет фона при наведении мышки, то можно ограничиться Transitions. Если же надо добиться более сложного выполнения — скажем, определить число повторов, а так же способ возвращения к исходной позиции между циклами, либо определить ключевые кадры (keyframes), то следует использовать Animations.

Всего в CSS3 предусмотрено 8 свойств для CSS-анимации (перечислены в таблице ниже) и объединяющее свойство animation для перечисления сразу нескольких параметров (подобно border, background и т.п.).

Свойства CSS Animations
Свойство	Допустимые значения	Описание
animation-delay	(время)	Определяет задержку между появлением элемента на странице (загрузкой) и началом анимации. Чаще всего определяется в секундах (s).
animation-direction	normal \| alternate	Определяет, должна ли анимация при каждой итерации начинаться со стартовой позиции (normal) или возвращаться к стартовой позиции, выполняя с обратном порядке все указанные эффекты (alternate).
animation-duration	(время)	Указывает продолжительность одного цикла (обычно в секундах — s)
animation-iteration-count	infinite \| (число)	Определяет число повторов циклов анимации. Если указано infinite (принято по умолчанию), то анимация будет происходить бесконечно, если же указано число, то повторится указанное число раз.
animation-name	строка-идентификатор	Задает имя @-правила keyframe, в котором описаны параметры анимации.
animation-play-state	running \| paused	Позволяет «ставить на паузу» выполнение анимации (paused) и запускать её снова (running).
animation-timing-function	ease \| linear \| ease-in \| ease-out \| ease-in-out \| cubic-bezier(x1,x2,x3,x4)	Определяет то, должно ли быть ускорение/замедление выполнения анимационного эффекта в начале и/или конце.
animation-fill-mode	none \| forwards \| backwards \| both	Определяет порядок применения определенных в @keyframes стилей к объекту — до анимации (backwards), после анимации (forwards), в обоих крайних позициях (both), или же не следует их применять вообще (none, по умолчанию).
animation	—	Короткий вариант синтаксиса (объединяет animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction)

Следует учитывать, что вплоть до текущего момента CSS Animation является экспериментальным свойством, а спецификация CSS3 по нему имеет статус Working Draft (черновик). Поэтому в бразуерах оно поддерживается с префиксом -webkit- (для Chrome/Safari) и -moz- (для Firefox/SeaMonkey). То же самое касается и дескриптора @keyframes.

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

h3 { background: yellow; /* начальное значение */ -moz-animation-name: blinked; /* имя используемого @-правила анимации */ -moz-animation-duration: 2s; /* продолжительность эффекта - 2 секунды */ -moz-animation-iteration-count: infinite; /* повторять бесконечно */ -moz-animation-direction: alternate; /* при повторе постепенно возвращаться к начальному состоянию */ /* далее - все то же самое для Chrome и Safari */ -webkit-animation-name: blinked; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } /* правило для браузеров Mozilla */ @-moz-keyframes blinked { to {background: green;} } /* правило для браузеров Chrome и Safari */ @-webkit-keyframes blinked { to {background: green;} }

Таким образом, любой заголовок h3, имеющийся на странице, для которой определена такая таблица стилей, будет постепенно изменять цвет своего фона с желтого на зеленый и обратно в браузерах Firefox 5, Safari 4 и Chrome 3 или выше. Во всех остальных он будет постоянно на желтом фоне.

А теперь усложним задачу: пусть заголовок выезжает из нижней части экрана и двигается наверх, при этом изменяя свой цвет с зеленого на желтый. Для этого нам надо, во-первых, установить абсолютное позиционирование элемента, а во-вторых — задать значения top для начального и конечного кейфреймов. Так же следует изменить число повторов с бесконечности на 1, увеличить продолжительность анимации до, скажем, 5 секунд и удалить за ненадобностью определение вида повтора. В итоге мы получаем следующее:

Теперь разберемся с паузой. Пусть наша CSS-анимация приостанавливается, если пользователь «поймает» указателем мышки заголовок в момент его перемещения. Для этого можно воспользоваться псевдоклассом hover для h3, в котором надо будет определить animation-play-state:

h3:hover { -moz-animation-play-state: paused; /* при наведении курсора приостановить анимацию */ -webkit-animation-play-state: paused; }

До этого момента мы определяли только начальное и конечное значения. Но вся прелесть CSS Animations (в отличие от Transitions) состоит в том, что можно указывать промежуточные положения. Определяют их в процентах от времени выполнения. Так, пусть наш заголовок после того, как поднимется вверх, переедет на пол экрана вправо. Тогда надо определить нужные положения в соответствующие моменты. Так, раз наш «ролик» длится 5 секунд, то на поднятие выделим 4 секунды, а на перемещение вправо — 1. Соответственно, это составляет 80% и 20% от 5 секунд. Получаем для Firefox:

@-moz-keyframes blinked { from { top: 99%; left: 0%; background: green; } 80% { top: 1%; left: 0%; } to { top: 1%; left: 50%; background: yellow; } }

Для Chrome – аналогично. Однако, проблема в том, что после завершения анимции блок «скачком» вернется влево, на свою начальную позицию. Решить эту проблему можно двумя способами. Во-первых, можно указать left: 50% в основном определении для h3. Кроме того, состояние объекта до и после анимации можно контролировать при помощи animation-fill-mode. По-хорошему, надо бы использовать оба этих способа. Ну а если мы хотим. Чтобы выполнение анимации началось не сразу, а через секунду после загрузки страницы, до следует указать это при помощи свойства animation-delay. В результате мы получим следующий CSS-код:

h3 { background: yellow; /* начальное (и конечное) значение */ position: absolute; top: 1%; -moz-animation-name: blinked; /* имя используемого @-правила анимации */ -moz-animation-duration: 5s; /* продолжительность эффекта - 5 секунд */ -moz-animation-iteration-count: 1; /* выполнить 1 раз */ -moz-animation-delay: 1s; /* начало анимации — через 1 секунду после загрузки */ -moz-animation-fill-mode: both; /* применить определенные в @-правила к объекту и до и после анимации */ -webkit-animation-name: blinked; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: 1; -webkit-animation-delay: 1s; /* начало анимации — через 1 секунду после загрузки */ -webkit-animation-fill-mode: both; } h3:hover { -moz-animation-play-state: paused; /* при наведении курсора приостановить анимацию */ -webkit-animation-play-state: paused; } @-moz-keyframes blinked { from { top: 99%; left: 0%; background: green; } 80% { top: 1%; left: 0%; } to { top: 1%; left: 50%; background: yellow; } } @-webkit-keyframes blinked { from { top: 99%; background: green; } 80% { top: 1%; left: 0%; } to { top: 1%; left: 50%; background: yellow; } }

Остается рассмотреть последнее свойство — animation-timing-function. Оно определяет скорость выполнения эффекта при помощи кривых Безье. При этом можно как использовать функцию cubic-bezier, устанавливая свои значения, так и использовать один из 5 пресетов:

ease соответствует cubic-bezier(0.25, 0.1, 0.25, 1.0).

linear соответствует cubic-bezier(0.0, 0.0, 1.0, 1.0).

ease-in соответствует cubic-bezier(0.42, 0.0, 1.0, 1.0).

ease-out соответствует cubic-bezier(0.0, 0.0, 0.58, 1.0).

ease-in-out соответствует cubic-bezier(0.42, 0.0, 0.58, 1.0).

Чтобы лучше разобраться, попробуйте установить для -moz-animation-timing-function и -webkit-animation-timing-function те или иные значения. В результате скорость выполенения будет то возрастать в начале и уменьшаться в конце, то наоборот. Указывать эти свойства можно как в общем определении, так и для отдельный кейфреймов. Например:

from { top: 99%; left: 0%; background: green; -moz-animation-timing-function: linear; }

В итоге подъем заголовка будет происходить с равной скоростью, без постепенного замедления, как задается в принятом по умолчанию ease.

2011-07-12 // Есть вопросы, предложения, замечания? Вы можете
обсудить это на форуме
!

Обнаружение поддержки анимации CSS — CSS: каскадные таблицы стилей

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

Этот код проверяет, доступна ли поддержка CSS-анимации:

  var animation = false,
    animationstring = 'анимация',
    keyframeprefix = '',
    domPrefixes = 'Webkit Moz O ms Khtml'.расколоть(' '),
    pfx = '',
    elem = document.createElement ('div');

если (elem.style.animationName! == undefined) {animation = true; }

if (animation === false) {
  for (var i = 0; i

Для начала определим несколько переменных.Мы предполагаем, что анимация не поддерживается, установив для animation значение false . Мы устанавливаем animationstring на animation , это свойство, которое мы хотим установить позже. Мы создаем массив префиксов браузера для перебора и устанавливаем pfx в пустую строку.

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

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

По завершении выполнения этого кода значение анимации будет false , если поддержка анимации CSS недоступна, или true . Если истинно , тогда и имя свойства анимации, и префикс ключевого кадра будут правильными.Таким образом, если вы используете новый Firefox, свойство будет MozAnimation и префикс ключевого кадра -moz- , а в Chrome это будет WebkitAnimation и -webkit- . Обратите внимание, что браузеры не упрощают переключение между camelCase и переносом.

Теперь, когда вы знаете, поддерживается ли CSS-анимация или нет, мы можем анимировать.

  if (animation === false) {

  

} еще {
  elem.style [animationstring] = 'бесконечный линейный поворот на 1 секунду';

  var keyframes = '@' + keyframeprefix + 'ключевые кадры вращаются {' +
                    'from {' + keyframeprefix + 'transform: rotate (0deg)}' +
                    'to {' + keyframeprefix + 'transform: rotate (360deg)}' +
                  '}';

  если (документ.styleSheets && document.styleSheets.length) {

      document.styleSheets [0] .insertRule (ключевые кадры, 0);

  } еще {

    var s = document.createElement ('стиль');
    s.innerHTML = ключевые кадры;
    document.getElementsByTagName ('голова') [0] .appendChild (s);

  }

}

Этот код смотрит на значение анимации ; если это false , мы знаем, что нам нужно использовать наш резервный код JavaScript для выполнения нашей анимации. В противном случае мы можем использовать JavaScript для создания желаемых эффектов анимации CSS.

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

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

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

Если таблица стилей еще не существует, создается новый элемент

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

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

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

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

) и добавьте
  "всплывающая подсказка"  класс к нему. Когда пользователь наводит курсор на этот, отображается
 текст всплывающей подсказки.
 Текст всплывающей подсказки помещается внутри встроенного элемента (например, ) с  class = "tooltiptext" .  CSS:  Класс  подсказки  использует позицию : относительный ,
 который необходим для позиционирования текста всплывающей подсказки (позиция : абсолютная ).
  Примечание:  См. Ниже примеры размещения всплывающей подсказки.
 Класс  Tooltiptext  содержит фактический текст всплывающей подсказки. это
 по умолчанию скрыт и будет отображаться при наведении курсора (см. ниже). Мы также добавили
 некоторые основные стили к нему: ширина 120 пикселей, черный цвет фона, белый цвет текста,
 текст по центру и отступ 5 пикселей сверху и снизу.
 Свойство CSS  border-radius  используется для добавления закругленных углов к всплывающей подсказке.
 текст.
 Селектор : hover  используется для отображения текста всплывающей подсказки, когда пользователь перемещает
 наведите указатель мыши на
 с  class = "tooltip" .
 Подсказки позиционирования 
 В этом примере всплывающая подсказка помещается справа ( слева: 105% ) от "зависшего"
 текст (
). Также обратите внимание, что  top: -5px  используется для размещения его в середине элемента контейнера.Мы используем номер  5 , потому что текст всплывающей подсказки имеет верхнюю и
 нижняя обивка
 5 пикселей. Если вы увеличите его заполнение, также увеличьте значение свойства  top  до
 убедитесь, что он остается посередине (если вы этого хотите). Одинаковый
 применяется, если вы хотите, чтобы всплывающая подсказка располагалась слева.
 Правая подсказка 
 .tooltip .tooltiptext {
 top: -5px; 
 левый:
 105%; 
}
 Результат:
 Наведите надо мной
 Текст всплывающей подсказки
Попробуй сам "
 Левая подсказка 
 .всплывающая подсказка .tooltiptext {
 top: -5px; 
 Правильно:
 105%; 
}
 Результат:
 Наведите надо мной
 Текст всплывающей подсказки
Попробуй сам "
 Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, см. Примеры
 ниже. Обратите внимание, что мы используем свойство  margin-left  со значением минус 60.
 пикселей. Это нужно для того, чтобы центрировать всплывающую подсказку над / под парящим текстом. Установлено
 до половины ширины всплывающей подсказки (120/2 = 60).
 Верхняя подсказка 
 .всплывающая подсказка .tooltiptext {
 width: 120px; 
 внизу: 100%; Осталось 
:
 50%; 
 margin-left: -60 пикселей; / * Используем половину ширины
 (120/2 = 60), чтобы центрировать подсказку * / 
}
 Результат:
 Наведите надо мной
 Текст всплывающей подсказки
Попробуй сам "
 Нижняя подсказка 
 .tooltip .tooltiptext {
 width: 120px; 
 верх: 100%; Осталось 
:
 50%; 
 margin-left: -60 пикселей; / * Используем половину ширины
 (120/2 = 60), чтобы центрировать подсказку * / 
}
 Результат:
 Наведите надо мной
 Текст всплывающей подсказки
Попробуй сам "
 Стрелки всплывающей подсказки 
 Чтобы создать стрелку, которая должна появляться с определенной стороны всплывающей подсказки, добавьте «пустой»
 содержание после
 всплывающая подсказка с классом псевдоэлемента  :: after  вместе с содержимым  
 имущество.Сама стрелка создается с помощью границ. Это сделает всплывающую подсказку
 выглядят как речевой пузырь.
 В этом примере показано, как добавить стрелку в нижнюю часть всплывающей подсказки:
 Стрелка снизу 
 .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 секунда в нашем примере):
 Пример 
.tooltip .tooltiptext {
 opacity: 0; 
 переход: непрозрачность 1 с; 
}
 .tooltip: hover
 .tooltiptext {
 непрозрачность: 1; 
}
Попробуй сам "
 Полное руководство по анимации в CSS 
 Анимации могут быть мощным инструментом для привлечения и восхищения посетителей вашего сайта. Они могут сделать процесс загрузки более интересным, направить взгляд посетителя на важный элемент на странице и повысить удобство использования.
 Хотя рендеринг анимации в Интернете не новость, сам процесс.Раньше для анимации требовался JavaScript, который считается одним из самых сложных языков программирования для изучения, или Flash, продукт Adobe, за использование которого нужно платить ежемесячную плату. В последнее десятилетие многие разработчики перешли от JavaScript и Flash к использованию CSS для анимации. Большинство из них уже знают CSS - плюс это бесплатно!
 Чтобы помочь вам понять эту тенденцию веб-дизайна, мы рассмотрим, что такое CSS-анимация, различные типы CSS-анимации и примеры анимации, используемой на действующих сайтах.
 Что такое CSS-анимация? 
 Допустим, вы хотите использовать несколько конфигураций стилей CSS - например, разные цвета, уровни непрозрачности, радиусы границ и т. Д. - на одном элементе страницы. Чтобы элементы постепенно переходили от одного стиля к другому, вы можете создать CSS-анимацию.
 Есть десятки анимированных свойств CSS, из которых вы можете выбирать. У вас может быть индикатор выполнения, показывающий, насколько быстро загружается ваш сайт, кнопка меняет цвет, когда посетитель наводит на нее курсор, а ваш логотип отражается в левой части экрана.Вы даже можете анимировать область заполнения элемента для перехода между цветами. Подобные анимации могут помочь сделать ваш веб-дизайн более связным и запоминающимся.
 Давайте рассмотрим некоторые конкретные типы анимации ниже.
 Типы CSS-анимации 
 С помощью CSS-анимации элементы можно перемещать, вращать, наклонять, сжимать, вращать и растягивать на странице. Их можно перемещать по странице и взаимодействовать друг с другом разными интересными способами.
 Поскольку существуют тысячи типов CSS-анимации, мы ограничимся одними из самых распространенных - и самых крутых! - типы, которые вы увидите в Интернете.
 Анимация текста CSS 
 Анимированная типографика может сразу привлечь внимание ваших посетителей. Из множества способов анимации текста на сайте с помощью CSS, наиболее распространенными являются добавление эффекта радуги, тени, эффекта сбоя и липкого эффекта.
 Ниже приведен пример анимации рукописного ввода, в которой посетитель наблюдает за текстом, написанным на странице.
 Источник
 Цветовая анимация CSS 
 Вы часто будете видеть анимированный фон веб-страницы с чередованием цветов, как в примере ниже.
 Источник
 Цветовая анимация
 CSS также может применяться к тексту, кнопкам, границам и другим элементам на странице, что делает их идеальными для привлечения внимания посетителя к определенной точке на странице.
 Вставная анимация 
 Используя эту CSS-анимацию, вы можете заставить элемент скользить сверху, снизу, слева или справа от экрана, чтобы привлечь внимание посетителя. Вы также можете комбинировать вставную анимацию с другими эффектами для дальнейшей настройки вашего дизайна. В приведенном ниже примере анимация вставки сочетается с эффектом размытого текста, так что название компании постепенно попадает в фокус.
 Источник
 Анимация поворота CSS 
 Вы можете использовать CSS для поворота элемента в 2D или 3D пространстве. Эта анимация часто сочетается с другими анимациями, чтобы показать элементы в движении. Возьмем, к примеру, ракету ниже. Он не только перемещается из нижнего левого угла экрана в верхний правый в течение трех секунд, но и поворачивается на 70 градусов по часовой стрелке в течение первых двух секунд.
 Источник
 Волновая анимация CSS 
 Анимация CSS Wave - уникальный вариант использования анимации поворота.Чтобы создать волновую анимацию CSS, вам необходимо создать несколько HTML-объектов для представления ваших волн. Затем вы примените анимацию поворота к каждой волне с разными цветами фона и значениями для свойства анимации-времени. Вы также можете поэкспериментировать с непрозрачностью.
 Эффект будет выглядеть примерно так, как в демонстрации ниже.
 Источник
 Анимация свечения CSS 
 CSS-анимации свечения могут способствовать созданию атмосферы на вашем сайте. Например, чтобы продвигать мероприятие на своем сайте, вы можете добавить неоновый светящийся текст на темном фоне, чтобы создать праздничное настроение.Вы также можете использовать эффект свечения для кнопок, границ, анимации загрузки, анимации наведения и т. Д.
 В приведенном ниже примере кнопка градиента светится, когда пользователь наводит на нее курсор, поэтому нажатие на нее кажется более привлекательным.
 Источник
 CSS Анимация отскока 
 Допустим, вы не хотите, чтобы элемент скользил внутрь. Вы хотите, чтобы он отскакивал для более грандиозного входа. В этом случае вы можете использовать анимацию отказов CSS. Кодирование этой анимации требует настройки нескольких подсвойств анимации, в том числе функции синхронизации и задержки, чтобы отскок элемента казался более естественным.
 Эта анимация особенно часто встречается при загрузке страниц, как показано в примере ниже.
 Источник
 CSS-анимация постепенного появления 
 Используя CSS, вы можете добавить плавную анимацию к изображениям и тексту на вашем сайте. Ниже вы увидите изображение, постепенно появляющееся в верхней части экрана. Эта анимация особенно эффективна с этим изображением, потому что она имитирует движение лодки, лениво плывущей по реке.
 Источник
 Для большей интерактивности вы можете создать изображение или текст так, чтобы они появлялись при наведении курсора мыши на элемент или при прокрутке посетителем.Обратите внимание, что для последнего потребуются как CSS, так и Javascript, потому что он более сложный.
 CSS-анимация наведения 
 Чтобы повысить интерактивность своего сайта, вы можете создать анимацию наведения курсора CSS. Этот тип анимации происходит, когда посетитель сайта наводит курсор на элемент на странице. Вы можете масштабировать элементы, переворачивать, вращать или даже останавливать воспроизведение при наведении курсора. В приведенном ниже примере кнопка CTA изменяется в размере и дает искры при наведении курсора.
 Источник
 Бесконечная анимация загрузки 
 При посещении некоторых сайтов вы можете наблюдать, как они медленно загружаются: обычно сначала идет заголовок, затем идет обычный текст, затем изображения и так далее.На других сайтах этот процесс будет скрыт, и вместо него вы увидите анимацию.
 Анимация бесконечной загрузки - это лишь одна из пяти анимаций загрузки веб-сайтов, которые вы можете создать с помощью CSS, чтобы помочь уменьшить ожидание пользователя. Поскольку этот тип анимации позволяет посетителям узнать, что сайт загружается, не указывая, сколько времени им придется ждать, это идеально, когда время загрузки неизвестно.
 Вот креатив дизайнера Хоанг Нгуена.
 Прокрутка с параллаксом 
 Параллаксная прокрутка - это визуальная техника, при которой элементы фона перемещаются с другой скоростью, чем передний план при прокрутке.Это создает иллюзию глубины или «искусственного трехмерного эффекта», который призван сделать работу вашего посетителя более интересной.
 Источник
 Теперь, когда мы знакомы с различными типами анимации CSS, давайте рассмотрим процесс ее создания. Прежде чем мы углубимся в руководство, давайте подробнее рассмотрим фундаментальный элемент CSS-анимации: @keyframes at-rule.
 Ключевой кадр CSS 
 В CSS ключевые кадры используются для определения того, как анимированный элемент должен выглядеть на протяжении всего цикла анимации.
 Как минимум один ключевой кадр должен быть определен в CSS-анимации, но чаще всего встречается как минимум два. Обычно они описывают начало и конец анимации. Дополнительные ключевые кадры могут быть определены для описания любых промежуточных шагов между началом и концом цикла анимации.
 Ключевые кадры указываются с помощью правила @keyframes. Давайте посмотрим на синтаксис этого правила.
 @keyframes в правиле 
 Ат-правило @keyframes записывается следующим образом:
  
 @keyframes имя-анимации { <процент> {
 свойство: значение 
} 
  <процент> {
 свойство: значение 
} 
 } 
 
  
 Обратите внимание, что правило @keyframes должно иметь то же значение, что и свойство animation-name.Это позволяет браузеру сопоставлять анимацию с объявлением ключевых кадров.
 Правило должно содержать по крайней мере один ключевой кадр, чтобы описать, как анимированный элемент должен отображаться в данный момент во время последовательности анимации. Селекторы ключевых кадров могут использовать проценты, чтобы указать, когда они происходят в цикле анимации. Если они указывают 0% (начало цикла анимации) или 100% (конец цикла анимации), то вместо этого они могут использовать ключевые слова  от  или от  до .
 Давайте посмотрим на пример. Скажем, анимированный элемент - это div, его имя анимации - «слайд-вправо», а цикл его анимации составляет четыре секунды.
 Вот CSS для анимированного div:
  
 div {
 название-анимации: слайд-вправо; 
 продолжительность анимации: 4 с; 
}  
 Для управления тем, как div будет отображаться в определенный момент во время последовательности анимации, вы можете добавить @keyframes at-правило с двумя или более селекторами ключевых кадров.
 Допустим, вы хотите добавить три селектора ключевых кадров.Первый селектор определяет, что в начале анимации левое поле div составляет 0 пикселей. Второй селектор определяет, что в середине цикла анимации (или через 2 секунды) левое поле составляет 100 пикселей. Третий селектор определяет, что в конце анимации (или через 4 секунды поле составляет 200 пикселей. Вот как написано это правило:
  
 @keyframes slide-right { from {
 margin-left: 0px; 
} 
  50% {
 поле слева: 100 пикселей; 
} 
  до {
 поле слева: 200 пикселей; 
} 
 } 
 
  
 Вот результат:
 См. Ручку от HubSpot (@hubspot) на CodePen.
 Учебное пособие по CSS-анимации 
 Вы можете создавать CSS-анимацию с нуля, используя лишь немного кода.
 CSS-анимация состоит из двух частей: ключевых кадров и свойств анимации. Итак, чтобы создать CSS-анимацию, вы должны определить ее ключевые кадры и свойства анимации. Давайте посмотрим, как это делается ниже.
 Шаг 1. Определите ключевые кадры анимации. 
 Первая часть CSS-анимации - это набор ключевых кадров. Поскольку ключевые кадры указывают начало и конец анимации, а также любые промежуточные шаги, они используют проценты.Эти проценты показывают, в какой момент последовательности анимации они имеют место.
 Допустим, вы хотите стилизовать элемент так, чтобы он выдвигался с правой стороны окна браузера, вот так.
 Но предположим, что вы хотите, чтобы анимированный элемент был абзацем (элементом
), как в примере от Mozilla. Для этой вставной анимации есть всего два ключевых кадра.
 Первое происходит в 0% или в первый момент анимационной последовательности. И левое поле, и ширина элемента
 настраиваются таким образом, чтобы он отрисовывался от правого края браузера.Второй ключевой кадр находится на 100% (то есть в последний момент анимационной последовательности). Левое поле и ширина элемента
 настраиваются таким образом, чтобы после завершения анимации абзац прилегал к левому краю области содержимого.
 Взгляните на приведенный ниже код.
 
  
  п {
  продолжительность анимации: 3 с; 
  имя-анимации: слайдин; 
 } 
  
  @keyframes slidein {
  из {
  маржа слева: 100%; 
  ширина: 300%; 
 } 
  
 С  по {
  маржа слева: 0%; 
  ширина: 100%; 
 } 
 } 
  
 Гусеница и Алиса некоторое время молча смотрели друг на друга: наконец Гусеница вынула кальян изо рта и обратилась к ней вяло-сонным голосом.
 
  
  
 Допустим, мы хотим, чтобы элемент
 выполнял какие-либо действия между началом и концом анимации. Мы могли бы, например, добавить еще один ключевой кадр, чтобы размер шрифта абзаца увеличивался при перемещении справа налево, а затем уменьшался до исходного размера к концу последовательности.
 В этом случае код будет выглядеть так:
 
  
  п {
  продолжительность анимации: 3 с; 
  имя-анимации: слайдин; 
 } 
  
  @keyframes slidein {
  из {
  маржа слева: 100%; 
  ширина: 300%; 
 } 
  
  75% {
  размер шрифта: 300%; 
  маржа слева: 25%; 
  ширина: 150%; 
 } 
  
 С  по {
  маржа слева: 0%; 
  ширина: 100%; 
 } 
 } 
  
  
 Гусеница и Алиса некоторое время молча смотрели друг на друга: наконец Гусеница вынула кальян изо рта и обратилась к ней вяло-сонным голосом.
 
  
  
  
 Теперь анимация будет выглядеть следующим образом.
 Теперь, когда мы лучше понимаем ключевые кадры, мы можем обратить наше внимание на вторую часть, которая составляет CSS-анимацию: свойства анимации.
 Шаг 2: Определите свои свойства animation-name и animation-duration. 
 Свойства анимации назначают ключевые кадры конкретному элементу и определяют способ его анимации.
 Вы могли заметить, что приведенные выше фрагменты кода включают следующие два свойства:
 продолжительность анимации
 имя-анимации
 Эти два свойства необходимы для того, чтобы анимация начала действовать.Мы кратко обсудим это ниже.
 Имя анимации 
 Свойство animation-name определяет имя ключевого кадра. Вот почему в приведенных выше примерах значение свойства animation-name - slidein - соответствует имени после @keyframes.
 При названии анимации вы можете использовать буквы от a до z, цифры от 0 до 9, подчеркивания и тире.
 Если у вас есть несколько ключевых кадров, описывающих анимацию, применяемую к элементу, вам необходимо определить несколько значений для свойства animation-name.Вы можете разделить их пробелом и запятой.
 Продолжительность анимации 
 Свойство animation-duration указывает продолжительность анимационной последовательности. Хотя анимация может воспроизводиться в цикле бесконечно, для завершения одного цикла должно потребоваться столько секунд или миллисекунд, сколько указано в свойстве animation-duration.
 Свойство может быть определено с нулевым или любым положительным значением. Отрицательные значения недопустимы. Ниже приведены некоторые примеры.
 Источник
 Шаг 3. Определите другие необходимые вам свойства анимации.
 Помимо свойств animation-name и animation-duration есть другие свойства анимации, которые можно использовать для создания более сложных и настраиваемых анимаций. Давайте определим каждого ниже.
 Время анимации 
 Функция синхронизации анимации устанавливает темп анимации. Чтобы указать время анимации, вы можете использовать предопределенные значения  легкость ,  линейная ,  легкость входа ,  легкость выхода  и  легкость выхода .Вы также можете создавать собственные значения, используя кубическую кривую Безье для более продвинутых параметров синхронизации.
 Ослабление анимации CSS 
 Если другое значение не назначено, функция будет установлена на  легкость  по умолчанию. Легкость начинается медленно, затем ускоряется, затем замедляется. Ниже приведен пример.
 Источник
 Установите значение  linear , анимация будет иметь одинаковую скорость от начала до конца. С легкостью  в  анимация запускается медленно. С легкостью   он имеет медленное завершение. Ease-in-out  означает, что анимация имеет медленный старт и медленный конец.
 Задержка анимации 
 Используя функцию задержки анимации, вы можете указать, когда начинается анимация. Допускаются миллисекунды и секунды, а также положительные и отрицательные значения. Положительное значение задержит последовательность анимации, тогда как отрицательное значение запустит анимацию немедленно, как если бы это время уже прошло.
 Если вы установите значение, например, на 2 секунды, то анимация начнется через 2 секунды после загрузки.Если вы установите значение -2 с, то анимация начнется через две секунды цикла анимации.
 В приведенном ниже примере отрицательная задержка анимации заставляет каждый круг немедленно начинаться в другом состоянии в цикле анимации.
 Источник
 Счетчик итераций анимации 
 Свойство animation-iteration-count указывает, сколько раз будет воспроизводиться анимация. Вы можете использовать числовое значение, чтобы оно повторялось определенное количество раз.
 Вы можете установить его на , начальное , чтобы использовать значение по умолчанию (1), что означает, что анимация будет проигрывать свою последовательность один раз.Вы можете установить для него значение , наследовать , чтобы использовать то же значение, что и его родительский элемент. Или вы можете установить его на  бесконечный , чтобы он повторялся бесконечно. Любая CSS-анимация, в которой для параметра animation-iteration-count установлено значение  infinite , считается циклической CSS-анимацией.
 Взгляните на демонстрацию ниже, в которой показаны три версии одной и той же анимации, каждая из которых имеет свойство animation-iteration-count, установленное на разные значения.
 Источник
 Направление анимации 
 Свойство animation-direction определяет направление анимации.Если вы используете обычное значение или значение по умолчанию, анимация будет воспроизводиться вперед. Если вы используете  reverse , он будет воспроизводиться в обратном направлении.
 Чтобы анимация меняла направление в каждом цикле, вы можете использовать альтернативное значение   (анимация будет воспроизводиться сначала вперед, затем назад) или альтернативно-обратное   (анимация будет сначала воспроизводиться назад, а затем вперед).
 Взгляните на демонстрацию, показывающую каждое направление ниже.
 Источник
 Режим заполнения анимации 
 Используя функцию animation-fill-mode, вы можете применить стили анимации до или после воспроизведения анимации.
 Есть четыре возможных значения, которые вы можете установить для этой функции:
 Если вы установите для свойства значение  normal , то стили будут применяться только к анимированному элементу при его воспроизведении.
 Если вы установите его на  и переадресовать , то анимированный элемент сохранит свои значения стиля, определенные последним ключевым кадром.
 Если вы установите его на  назад , то элемент примет значения стиля, определенные первым ключевым кадром, прежде чем он начнет воспроизведение.
 Если вы установите  и , значения стиля анимации будут применяться до и после воспроизведения анимации.
 Ниже приведен пример анимации со свойством animation-fill-mode, установленным на , пересылает  и значение по умолчанию ( normal ).
 Источник
 Состояние воспроизведения анимации 
 С помощью свойства animation-play-state можно приостанавливать и возобновлять последовательность анимации. По умолчанию это свойство установлено на  при выполнении , но вы можете установить значение свойства на  приостановлено .При возобновлении приостановленной анимации будет воспроизводиться анимация с того места, где она была приостановлена, а не начинаться заново.
 Источник
 Теперь, когда вы лучше понимаете различные части, составляющие анимацию, вы можете создать свою собственную с нуля или использовать инструмент, который поможет упростить процесс.
 Генератор анимации CSS 
 Генератор CSS-анимации может помочь упростить - и даже автоматизировать - части процесса создания CSS-анимации. Использование одного из них по-прежнему потребует некоторого знакомства с ключевыми кадрами и свойствами анимации, но это снизит сложность и потребует написания меньше кода.
 Давайте рассмотрим самые изящные и простые в использовании варианты.
 Animista 
 Animista - это бесплатное приложение, которое позволяет настраивать предварительно разработанные анимации CSS. Вы можете щелкнуть тип анимации в верхней части экрана (это будет ваше имя анимации), а затем указать все вспомогательные свойства анимации на левой боковой панели. Большинство из них представляют собой раскрывающиеся меню, чтобы максимально упростить настройку анимации. Когда вы будете готовы, вы можете щелкнуть значок «Создать код» и вставить его на свои веб-страницы или проекты.
 Генератор CSS-анимаций 
 Подобно Animista, генератор анимации CSS позволяет настраивать вспомогательные свойства анимации для анимированного элемента (но не ключевые кадры). Когда вы будете готовы, вы можете скопировать код для анимированного элемента и @keyframes at-rule и вставить его на свои веб-страницы или проекты.
 Приложение "Ключевые кадры" 
 Разработанный, чтобы выглядеть и функционировать как программное обеспечение для редактирования видео, Keyframes - это еще одно бесплатное приложение, которое позволяет создавать базовые или сложные анимации по ключевым кадрам с помощью визуального редактора шкалы времени.Вы можете добавлять «шаги», используя временную шкалу внизу экрана, и определять различные анимируемые свойства на правой боковой панели - это будут ваши ключевые кадры. Вы также можете изменить продолжительность, количество итераций и другие вспомогательные свойства в нижней части экрана. Затем, когда вы будете готовы, вы можете нажать кнопку «Получить CSS» и вставить этот код в свои веб-страницы или проекты.
 Готовы создавать CSS-анимацию с нуля или с помощью одного из перечисленных выше генераторов? В этом случае вы можете столкнуться с некоторыми проблемами.Давайте рассмотрим некоторые способы устранения неполадок, если ваша анимация работает не так, как вы ожидаете.
 Анимация CSS не работает 
 Начинающие разработчики и опытные разработчики могут столкнуться с проблемами при создании анимации CSS. Если ваша анимация не работает совсем или не так, как вы планировали, попробуйте проверить эти распространенные проблемы.
 1. Свойство имя-анимации не определено. 
 Свойство имя-анимации является обязательным. В противном случае анимация не будет отображаться.
 2. Свойство длительности анимации не определено.
 Свойство анимации-длительности также должно быть установлено. В противном случае значение по умолчанию установлено на ноль секунд, поэтому анимация не будет отображаться.
 3. Ат-правило @keyframes не определено. 
 Анимации выполняются только при применении свойств анимации, поэтому они требуют явных значений для анимируемых свойств. Эти значения указываются с помощью ключевых кадров. Если они не указаны в @keyframes at-правиле, анимация не будет выполняться.
 4. Имя вашего @keyframes at-правила не соответствует имени вашей анимации.
 Имя at-правила @keyframes должно соответствовать значению свойства animation-name. В противном случае браузер не сможет сопоставить анимацию с объявлением ключевых кадров, и анимация не будет отображаться.
 5. Свойство animation-fill-mode не установлено. 
 По умолчанию CSS-анимация возвращает элемент обратно в его предварительно анимированное состояние после завершения цикла анимации. Это может привести к нарушению анимации. Чтобы избежать этого, вы можете определить режим заливки анимации.
 6. Свойство CSS, которое вы пытаетесь анимировать, нельзя анимировать. 
 Некоторые свойства CSS не могут быть анимированы, что означает, что их нельзя использовать в анимации (или переходах). Ознакомьтесь с нашим списком анимируемых свойств CSS для свойства, которое вы пытаетесь анимировать. Если его там нет, вам нужно будет использовать другое свойство CSS для достижения аналогичного эффекта.
 7. CSS-анимация не поддерживается в вашей версии браузера. 
 Если ваша CSS-анимация не работает, возможно, проблема в вашем браузере, а не в коде.В то время как CSS-анимация работает в большинстве современных мобильных и настольных браузеров, старые браузеры или старые версии браузеров - нет. В этом случае вам нужно будет сменить или обновить браузер.
 8. Значения сокращенного свойства CSS указаны в неправильном порядке. 
 Сокращение
 CSS идеально подходит для написания более чистого CSS, но его может быть сложнее написать, поскольку порядок значений имеет значение. Нет строгого порядка для каждого отдельного объекта собственности, но некоторые имеют значение. Например, первое значение time будет присвоено свойству animation-duration, а второе - свойству animation-delay, поэтому не следует путать эти значения.Вот типичный порядок значений для сокращенного свойства анимации: имя-анимации, продолжительность, функция времени, задержка, количество итераций, направление, режим заполнения, состояние воспроизведения.
  Чтобы получить полный список причин, по которым ваши анимации могут не работать вообще или не так, как вы планировали (плюс примеры!), Ознакомьтесь с CSS-анимациями, которые не работают? Попробуйте эти исправления. 
 Теперь, когда мы знаем, как создавать CSS-анимацию с нуля или с помощью генератора и как устранять любые проблемы, давайте для вдохновения рассмотрим несколько примеров.
 Примеры анимации CSS 
 7up Lemon Lemon
 2016 Kikk Festival
 Apple iPad Pro
 Кусками
 Джинсы для беженцев
 Чехов жив
 МОЙ / СТАТИЧЕСКИЙ / САМОСТОЯТЕЛЬНЫЙ
 Порция
 Travelshift
 Solentanche Bachy
 Ember House
 Локомотив
 Вулкан
 Широкий глаз
 Annatwelve
 1.7up Лимонный Лимон 
 В 2017 году PepsiCo выпустила новый напиток под названием 7up Lemon Lemon. Чтобы продвигать игристый лимонад премиум-класса, сайт 7up был переработан с использованием CSS-анимации. Объединив анимацию постепенного появления и колебания, разработчики сделали страницу «шипящей», как напиток. С тех пор страница была переработана.
 2. Фестиваль Kikk 2016 
 Ежегодно агентство dogstudio проводит ребрендинг веб-сайта фестиваля Kikk. В 2016 году dogstudio изменила дизайн сайта, используя CSS-анимацию, чтобы создать сбои в изображениях и страницах, которые олицетворяли фестивальную тему «вмешательства».”
 3. Apple iPad Pro 
 Для продвижения iPad Pro в 2019 году Apple сделала интересный поворот в области параллакс-прокрутки. Прокручивая по горизонтали, а не по вертикали, вы могли наблюдать, как текст, изображения и другие визуальные элементы перемещаются с разной скоростью. Эти CSS-анимации привлекали посетителей, когда они прокручивали страницу, чтобы узнать больше о продукте. С тех пор страница была переработана.
 4. По частям 
 Брайан Джеймс, дизайнер из Великобритании, создал интерактивную выставку под названием «Pieces», в которой представлены 30 исчезающих видов.Используя CSS-анимацию, Джеймс спроектировал сайт так, чтобы те же 30 частей выстраивались и перестраивались в форму каждого животного, когда вы просматриваете выставку.
 5. Джинсы для беженцев 
 Jeans for Refugees - это глобальная инициатива по сбору средств, созданная художником Johny Darde для помощи беженцам по всему миру. Агентство Lilo на общественных началах создало сайт «Джинсы для беженцев», чтобы поддержать эту инициативу. Агентство использовало CSS-анимацию, чтобы элементы, похожие на мазки краски, формировались и преобразовывались в слова на странице.
 6. Чехов жив 
 Используя цвет и постепенное появление, среди многих других CSS-анимаций, разработчики смогли воплотить в жизнь 30 самых известных персонажей Антона Чехова. Первоначально созданный для того, чтобы пользователи могли пройти прослушивание для участия в прямой трансляции рассказов Чехова в Google в 2015 году, этот личностный тест позволил людям узнать, на какого чеховского персонажа они больше всего похожи. Он больше не живет.
 7. МОЙ / СТАТИЧЕСКИЙ / САМОСТОЯТЕЛЬНЫЙ 
 Домашняя страница личного портфолио Джона Яковиелло является свидетельством его навыков как отмеченного наградами программиста.Хотя эффект сбоя, примененный к центральному объекту (это стереосистема? Жесткий диск?), Является наиболее очевидным, вы также можете заметить, что используются анимация отскока и поворота.
 8. Порция 
 Portion - это ведущая онлайн-площадка, где художники и коллекционеры могут подключиться и легко и безопасно продавать или покупать произведения искусства с использованием технологии Blockchain. Хотя дизайн всего веб-сайта демонстрирует цель и ценности компании - возьмем, к примеру, прозрачный аукционный дом на главной странице - это впечатление создается сразу благодаря анимации загрузки CSS.Эта анимация логотипа бренда Portion - четкая и простая структура связанных линий, которая выглядит как перевернутая корона - вызывает идеи царственности, взаимосвязанности и блокчейна.
 9. Travelshift 
 Как туристический веб-сайт Travelshift имеет уникальную систему навигации с горизонтальной прокруткой, несколькими переходами и параллаксными секциями. Эти анимации и эффекты заставляют читателя почувствовать себя погруженным в изображения, чтобы он почувствовал вкус приключений, которые они могли бы получить, если бы забронировали поездку с Travelshift.
 10. Soletanche Bachy 
 На веб-сайте Solentanche Bachy представлен проект строительства новой станции метро в Сигнапоре. Вставка CSS и анимация поворота, среди прочих эффектов, превращают веб-сайт в интерактивный план для тех, кто интересуется местоположением, дизайном и конструкцией этой станции.
 11. Ember House 
 Когда два года назад Ember House изменила дизайн своего сайта, они хотели показать, что отличаются от других финансовых консалтинговых компаний, потому что заботятся о благополучии своих клиентов.Чтобы передать эту идею, агентство Behance сосредоточило внимание на идее тлеющего угля как отправной точки для хорошего костра. Используя комбинацию анимации скольжения, волн и вращения, они сделали вид, будто угли плавают по экрану. Они также использовали текстовую анимацию CSS, чтобы подчеркнуть ключевые элементы сообщения, такие как «чувствую себя хорошо» и «согревает ваше богатство».
 12. Локомотив 
 Locomotive - канадское агентство, которое стремится продвигать новые идеи и выделяться среди других агентств, не относясь к себе слишком серьезно.Это воплощается в использовании CSS-анимации, в частности анимации отскока, на своем веб-сайте. Верх его веб-страниц выглядит почти как текст, написанный на линованной бумаге, но с игривым изгибом. Строки подпрыгивают, чтобы заинтересовать читателей, пока загружается остальной контент на странице.
 13. Вулкан 
 Несколько эффектов прокрутки удерживают посетителей на сайте Volcan. Один из них - это текстовая анимация CSS, которая запускается при прокрутке страницы вниз. Похоже, что абзац встряхивают, как полотенце, а затем кладут плашмя на страницу.
 14. Широкий глаз 
 Wide Eye - это креативное агентство, которое работает с теми, кто меняет изменения, и провидцами, чтобы создавать дизайн, брендинг и цифровые продукты, которые помогут им принести наибольшую пользу. Это сочетание социальной активности и инновационного дизайна демонстрируется текстовой анимацией на его домашней странице. Текст сначала появляется слева. Затем появляются и исчезают новые слова, завершая предложение. Эффект захватывающий, эмоциональный и привлекающий внимание - три е, которые Wide Eye надеется уловить в каждом цифровом опыте.
 15. Annatwelve 
 На веб-сайте
 Annatwelve представлена коллекция из девяти роскошных ароматов, предназначенных для тех, кто устал от «очевидного» и хочет «чего-то большего». Чтобы привлечь внимание этой аудитории, на сайте есть уникальное горизонтальное меню навигации, в котором каждый из ароматов в качестве основного варианта навигации повернут на 90 градусов влево. Когда вы наводите указатель мыши на один из ароматов, остальные переходят от сплошного белого к гораздо более прозрачному белому. В результате наведения курсора и цветовой анимации создается впечатление, что на название аромата, над которым вы наводите курсор, падает луч прожектора.
 Теперь, когда мы проверили несколько примеров анимации CSS на реальных веб-сайтах, вы сможете найти другие примеры в Интернете. Чтобы избежать распространенного заблуждения, давайте различать переходы CSS и анимацию.
 CSS-переход против анимации 
 Хотя анимация CSS часто сгруппирована, она отличается от переходов CSS. Одно из основных отличий заключается в том, что переходы CSS требуют триггера - например, как посетитель, щелкнувший элемент.С другой стороны, анимация не требует запуска. По умолчанию анимация автоматически начинает свою последовательность при загрузке страницы. (Важно отметить, что некоторые разработчики будут использовать jQuery или реализовывать другой способ запуска анимации, но в этом нет необходимости).
 Еще одно важное отличие состоит в том, что переходы могут перемещаться только из начального состояния в конечное состояние. Вы не можете указать какие-либо промежуточные точки, как при анимации.
 Также у вас не может быть цикла перехода или повторения в обратном направлении.Это потому, что, хотя у анимации есть свойство animation-iteration-count и animation-direction, у переходов нет свойств, которые указывают, сколько раз они могут выполняться или в каком направлении они могут выполняться. В результате переход выполняется только один раз, когда срабатывает.
 Теперь, когда мы лучше понимаем, что такое CSS-анимация (а это , а не ), давайте взглянем на конкретное подмножество, называемое трехмерными преобразованиями.
 CSS 3D-анимация 
 CSS 3D-анимация - обычно называемая 3D-преобразованием - открывает новую сферу графического дизайна.С помощью трехмерных преобразований интерфейсные разработчики могут добавить новое измерение к традиционным веб-сайтам, чтобы улучшить их дизайн.
 Например, рассмотрим функцию перевода. Translate перемещает элемент из точки A в B. В 2D вы можете использовать translate для перемещения элемента по горизонтальной оси X или вертикальной оси Y. В приведенном ниже примере черный шар перемещается по оси X.
 Источник
 Однако с помощью функции трехмерного преобразования вы можете расположить элемент вдоль оси Z.Поскольку эта ось проходит спереди назад в трехмерном пространстве, вы можете переместить элемент ближе к зрителю, а затем дальше. Взгляните на пример ниже.
 Источник
 Как и любая анимация, 3D-преобразования должны быть больше, чем просто конфеткой для глаз. При разумном использовании они могут решить проблемы интерфейса и улучшить впечатления посетителей. При использовании без стратегической цели они могут отвлекать и загромождать ваш интерфейс.
 Оживление вашего сайта 
 Анимация - от тонких переходов до полностью иллюстрированного сайта - сегодня можно найти на большинстве веб-сайтов.Включение 3D-эффектов и интерактивных деталей в вашу стратегию веб-дизайна может улучшить впечатления посетителей и выделить ваш сайт среди конкурентов.
  Примечание редактора: этот пост был первоначально опубликован в марте 2020 года и был обновлен для полноты. 
 CSS-анимаций из CodeCanyon 
 CSS-анимации и способы их использования 
  CSS-анимации появляются повсюду . Кажется, что на каждом посещаемом вами веб-сайте есть крутые
 эффект возникает, когда вы прокручиваете страницу вниз или наводите указатель мыши на логотип.Независимо от того, какой
 бизнес или веб-сайт, всегда есть возможность добавить CSS-анимацию для некоторого дополнительного вау-фактора. А вы
 знаете что - добавить эти маленькие кусочки стиля на ваш сайт не должно быть сложно! Фактически, вы даже можете получить
 они уже написаны для вас.
 Однако подобрать правильную CSS-анимацию для вашего проекта - это искусство. Если вы создаете веб-сайт для
 в больнице, у вас определенно будут другие требования, чем в детском клубе после уроков. Используйте код,
 относится к вашему проекту : легко добавить 20 различных анимаций на сайт и просто изменить класс
 элемент, на который нацелена конкретная анимация. Но добавление нерелевантного кода может серьезно замедлить работу вашего сайта.
 а также повлияют на другие области. Кроме того, нам не нужно говорить вам, что вращающийся логотип может отлично выглядеть, если вы
 создание веб-сайта для детского аттракциона… Но не так уж и хорошо, если это для юридической фирмы.
 Но не волнуйтесь -  мы можем помочь .Просмотрите категории и подкатегории и получите
 вдохновение - есть на что посмотреть! И хотите узнать что-то действительно интересное о CSS-анимации? У них  кроссбраузерностей
 дружелюбный . CSS работает во всех веб-браузерах, больших и малых. Нет риска, что код не появится
 правильно - при условии, что вы воспользуетесь парой уловок, чтобы убедиться, что Internet Explorer играет в мяч;)
 Итак, , зачем вам использовать CSS-анимацию?  Проще говоря, они добавляют на ваш сайт немного больше, чем просто
 изменение цвета шрифта или размера текста.Элемент интерфейса исчезает, предлагая начало
 процесса или добавление цвета к изображению при наведении указателя мыши, может иметь огромное влияние на пользователя
 опыт работы с сайтом. Все это также способствует продвижению вашего бренда через стиль и внешний вид.
 Участник
 Tuts + Эндрю Блэкман выделил ряд
 популярные курсы по CSS
 анимация. Это отличный ресурс, если вы хотите научиться делать это самостоятельно и у вас есть немного свободного времени.
 чтобы просмотреть этот потрясающий список.Однако, если вы просто ищете быстрое решение или что-то, что было
 качество проверено , значит, вы попали в нужное место - у нас есть огромный выбор фрагментов CSS-анимации, готовых для
 использовать!
  Погрузитесь глубже в CSS .
 Не стоит останавливаться на достигнутом. Если вы хотите узнать немного больше о CSS и создать свой собственный веб-сайт, тогда
 почему бы не прочитать одно из доступных руководств по CSS и не начать
 демонстрируя свои навыки? Вы даже можете отправить что-нибудь в CodeCanyon и начать зарабатывать собственные деньги с помощью CSS.
 фрагмент, который нужен людям!
 интересных примеров анимации CSS, которые вы тоже можете использовать 
 Примеры CSS-анимации, представленные в этой статье, могут стать отличным источником вдохновения для вашего веб-дизайна.
 Доступно множество инструментов для стилизации, но важно знать, какие эффекты они создают. CSS / CSS3-анимация может помочь создать уникальный сайт, привлекающий внимание пользователей.
 CSS позволяет анимировать элементы HTML без JavaScript. Его используют для создания интересных и привлекательных эффектов. К ним относятся анимация загрузки, анимация наведения, текстовая анимация, фоновая анимация, анимация перехода и многое другое.
 Привлечение внимания в переполненном веб-пространстве имеет решающее значение.CSS-анимация может улучшить взаимодействие с пользователем на вашей платформе. Вот несколько примеров того, как его эффективно использовать.
 1. Дизайн анимационных материалов CSS 
 2. CSS3 Анимация наведения 
 Анимация наведения - это стилизация для индивидуального веб-дизайна. Они улучшают пользовательский интерфейс и интерактивность платформы.
 Когда посетители наводят курсор на элемент на странице, создается персонализированная анимация.
 3. Персонализированное окно предупреждений 
 В этом примере показано настраиваемое окно предупреждения.
 4. Крайний срок проекта - SVG-анимация с CSS3 
 Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода 
 WoW своих клиентов, создавая инновационные и стимулирующие отклик веб-сайты 
 быстро, без опыта программирования. Slider Revolution 
 позволяет привлечь к вам поток клиентов за модным дизайном веб-сайтов.
 5. Летающие птицы 
 Анимация летающих птиц создает интересный природный эффект.Он привлекает внимание пользователей, оживляя страницу.
 Его можно использовать для сайтов, связанных с природой, окружающей средой или путешествиями.
 Этот пример CSS-анимации добавляет интересную грань шрифту текста меню. Это привлекательно и интерактивно. Это делает сайт более интересным и улучшает взаимодействие с пользователем.
 7. Каскадная солнечная система! 
 Cascading Solar System - это CSS вращающихся планет Солнечной системы.
 Положение отдельных планет на их орбитах можно увидеть в виде интересной и увлекательной визуализации.
 Оверлейное меню - это новая функция веб-сайтов, оформленных в современном стиле. Он заменяет традиционное меню.
 9. CSS-анимация Cloudy Spiral 
 10. Анимация загрузки магазина 
 Анимация загрузки страницы - это креативный элемент дизайна, который развлекает пользователей, пока они ждут. Вместо того чтобы терять терпение, пользователь остается вовлеченным.
 Если на вашем веб-сайте есть тема иллюстраций, вы можете использовать аналогичную идею.
 11. Анимация загрузки шара 
 В этой загрузочной анимации представлен набор шаров, каждый из которых имеет свое уникальное время движения, но они создают синхронизированный узор. Помимо тайминга, код для каждого мяча один и тот же.
 12. CSS Gangham Style 
 Анимация имитирует движения и шаги известной песни.
 Это креативный и современный дизайн меню с навигацией по гамбургерному меню, которая открывается при нажатии.Существует 4 разных веселых и увлекательных версии открытого меню.
 Щелкните значок X, и он вернется к элегантному дизайну меню гамбургера.
 14. Анимация призрачной загрузки CSS 
 Этот CSS представляет собой анимацию призрачной загрузки, подходящую для тематики детских веб-сайтов. Это заинтригует их, пока загружается главная страница.
 15. Анимация загрузки дракона 
 Еще одна замечательная анимация загрузки страницы - это дракон, созданный с помощью CSS.Эта творческая функция также больше подходит для детских тем и сделает время ожидания более интересным.
 16. Анимация загрузки кругов 
 В этом анимированном SVG-загрузчике есть четыре круга, загружаемых с разными интервалами. Полученный эффект поразителен и отличается от типичных кругов загрузки.
 Это хороший пример того, как привлечь внимание пользователей до показа контента.
 17. Концепция анимации входа / выхода 
 18.Морфинг куб анимация 
 Этот вращающийся куб представляет собой интересную визуализацию с трехмерными функциями. Это может привлечь посетителей к изучению наиболее важной информации, представленной на платформе.
 19. 3D-загрузка 
 20. Фон Parallax Star в CSS 
 Если вашей целью является создание красивого звездного фона, эта CSS-анимация, использующая функцию SASS, может быть вдохновляющей.
 21. Подводная лодка с УСБ 
 Дизайн этой подводной лодки доказывает, что компания CCS может заниматься творчеством и весельем.Он связывает ряд элементов с ключевыми кадрами. Это хорошее вдохновение для более беззаботной идеи.
 22. Анимация глаз при входе 
 Эта анимация формы входа представляет собой причудливый и привлекательный CSS. Зрачок глаза следует за направлением мыши. При наведении курсора на глаз он мигает.
 Создает ощущение взаимодействия и общения с посетителями, заполняющими форму регистрации.
 23. СОЗДАНИЕ СТРАНИЦЫ АНИМАЦИИ CSS 
 24.Слайдер на чистом CSS 
 Это пример легкого слайдера на чистом CSS, не использующего JavaScript.
 25. Содержимое слайдера на чистом CSS 
 Этот слайдер содержимого, созданный с помощью CSS, является отличным инструментом для более увлекательного обмена сообщениями, чем при использовании стандартного текста.
 26. Плавающая анимация - CSS 
 Это пример тени блока с использованием свойства CSS. Анимация добавляет эффекты тени вокруг кадра элемента, например значки социальных сетей.
 27. Шаговая 3D-анимация перехода 
 Эта креативная CSS-анимация является примером трехмерного перехода.
 28. Анимация не блокируется - CSS 
 29. Минимальный чистый слайдер css 
 Этот слайдер CSS содержит анимацию четырех разных изображений, которые отображаются последовательно с интервалом в четыре секунды с использованием эффекта затухания.
 30. Падающий снег 
 SVG snow - снег, падающий на заднем плане, создает привлекательную зимнюю тему.Это может быть привлекательная функция, которая привлекает внимание пользователей к сезонным предложениям или темам.
 31. Медиа-запрос Марио 
 Эта анимация была вдохновлена игрой Mario 3. Автор хотел проверить эффективность CSS-анимации по сравнению с другими технологиями.
 Полученный продукт представляет собой комбинацию медиа-запросов, анимации CSS3 и аудио HTML5.
 32. Материальный дизайн (на основе CSS) - плитки 
 33.Адаптивная анимация навигации по содержимому CSS3 
 Это руководство может быть хорошим руководством для создания адаптивного навигатора контента с использованием только CSS. Процесс объясняется шаг за шагом и демонстрируется в демонстрациях.
 34. CSS3 Image Accordion 
 Это пошаговое руководство, объясняющее, как создать гармошку с изображением с помощью CSS3.
 Эта привлекательная особенность дизайна оживляет веб-сайты портфолио или разделы каталога, представляя комбинацию слайдов, которые накладываются друг на друга.Можно щелкнуть и развернуть каждое изображение.
 35. Вращающийся текст 
 36. Шаги Анимация 
 Эта анимация отображает таблицу спрайтов CSS и функцию синхронизации, которая разбивает анимацию на сегменты.
 37. Плакат Круг Анимация 
 Кружок с плакатом демонстрирует использование CSS-преобразования и анимации.
 При использовании анимации JavaScript и CSS получился вращающийся круг с 3 кольцами.Каждое из них включает отдельные поля, которые можно выбрать. Это креативный способ отображения содержания веб-сайта.
 38. Анимация часов на чистом CSS 
 39. Монокль Список 
 Эта CSS-анимация является новаторской по сравнению с традиционной функцией списков, включенной во многие веб-сайты. Он включает в себя увеличительную область, которая увеличивает отдельные элементы при прокрутке вниз.
 40. Анимированная карточка CSS 
 В следующем примере представлены анимированные карточки CSS / HTML.Эта популярная функция дизайна делает сайт более интересным и увлекательным.
 41. CSS-анимация: круговой загрузчик с отметкой о завершении 
 42. [PURE CSS] анимация границы без SVG 
 Это демонстрация анимации границы, примененной к одному значку и сделанной только с помощью CSS.
 43. Flip - карточная игра на память 
 Это игра с карточной памятью с таймером, созданная с помощью CSS. Цель состоит в том, чтобы найти как можно больше совпадающих символов до того, как истечет ваше время.
 44. 3D-сфера на чистом CSS 
 Это анимация 3D-сферы CSS без использования JavaScript.
 45. Воспроизведение CSS-анимации при наведении курсора 
 Используйте CSS-анимацию наведения, чтобы побудить пользователей продолжить изучение вашего сайта и щелкнуть по важным функциям. При наведении указателя мыши на значок он приводится в движение.
 46. Плавающая пыль 
 Это пример изящной CSS-анимации и параллаксного JavaScript.
 47. Камера с плоским дизайном 
 Это плоское изображение камеры - пример творческой и игривой CSS-анимации. Взаимодействие возможно, нажав кнопку спуска затвора, которая отобразит предварительно загруженную фотографию.
 Заключительные мысли об этих примерах CSS-анимации 
 Примеры CSS-анимации, перечисленные выше, демонстрируют разнообразие эффектов, которые можно интегрировать на ваш веб-сайт. Некоторые из них используют JavaScript в сочетании с CSS, а другие - чистый CSS.
 Category Css