Прокачиваем свои css-анимации / хабр

Воздействие на элемент вне времени анимации

Результат
css

none

forwards

backwards

both

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

Значения:

none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние.
forwards — анимация воздействует на элемент по окончании воспроизведения.
backwards — анимация воздействует на элемент до начала воспроизведения.
both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.

Вступление

Анимация применяется к элементу с помощьюсвойство.

— это имя анимации, которое нам нужно определить отдельно. Мы также говорим CSS, чтобы анимация длилась 10 секунд, выполнялась линейно (без ускорения или какой-либо разницы в ее скорости) и повторялась бесконечно.

Вы должныопределить, как работает ваша анимацияс помощьюключевые кадры. Пример анимации, вращающей элемент:

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

В этом случае мы инструктируем CSS, чтобы свойство transform поворачивало ось Z от 0 до 360 градусов, завершая полный цикл.

Здесь вы можете использовать любое преобразование CSS.

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

Animation Shorthand Property

The example below uses six of the animation properties:

Example

div
{
animation-name: example;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;
}

The same animation effect as above can be achieved by using the shorthand
property:

Example

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

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties:

Property	Description
@keyframes	Specifies the animation code
animation	A shorthand property for setting all the animation properties
animation-delay	Specifies a delay for the start of an animation
animation-direction	Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration	Specifies how long time an animation should take to complete one cycle
animation-fill-mode	Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation

❮ Previous
Next ❯

Бегущая строка

Итак, как же создать бегущую строку? На самом деле нужно просто ввести необходимый текст в парном теге <marquee> – и он «побежит». Другое дело, как именно он будет двигаться.

Ниже я добавил таблицу с описанием важных атрибутов данного элемента.

Атрибут	Описание
behavior	Указывает способ передвижения контента: alternate – содержимое двигается между двумя границами, отбиваясь от них; scroll – объект движется как бы по кругу (появляется с одной стороны, скрывается с другой); slide – контент проходит весь путь и останавливается.
loop	Определяет сколько раз будет повторяться содержимое описываемого тега. Например, -1 используется для бесконечного повторения.
direction	Устанавливает направление передвижения: down – движется с верхнего края вниз; left – от правого края влево; up – от нижней границы к верхней; right – слева направо.
scrollamount	Задает пиксельное расстояние между текущим положением объекта и следующим. Влияет на скорость движения. Изначально равен 6.
scrolldelay	Также влияет на скорость «бега», однако за счет частоты обновления. Устанавливает задержку в миллисекундах.

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример</title>
  <style>
 .one {
 width:350px;
 height:80px;
 border-bottom: 8px double #000;
 text-shadow: #000 0px 1px 1px;
 color: #D9470B;
 font-size: 45px;
 font-weight: bolder;
 margin-left:30px;
padding-left:25px;
 }
</style>
 </head>
 <body>
<marquee class = "one" behavior ="alternate" direction=up scrollamount=12>Попрыгунчики</marquee>
<marquee direction="right" scrollamount=15"><img src="https://www.playcast.ru/uploads/2013/11/21/6622284.gif" /></marquee>
 </body>
</html>

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

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

Это сокращённая форма записи, описание каждого свойства ниже:

animation-name	Название анимации, к которой происходит обращение из @keyframes
animation-duration	Продолжительность или выполнение анимации. Может задаваться в секундах s или миллисекундах ms
animation-timing-function	Временная функция, динамика изменения свойства, подсматривать можно здесь http://htmlbook.ru/css/transition-timing-function
animation-delay	Время задержки анимации До начала.
animation-iteration-count	Количество повторов анимации (infinite — бесконечно, также можно задать простое число без единиц измерения)
animation-direction	Направление анимации, последовательно, в обратную стороно или «туда-обратно» (normal — анимация проигрывается от начала до конца и останавливается. alternate — проигрывается от начала до конца и в обратном направлении. alternate-reverse — проигрывается с конца до начала и обратно. reverse — анимация проигрывается с конца.
animation-play-state	Управление проигрыванием анимации (paused (пауза), running (запуск), …). Можно применить на :hover или из функции JavaScript при необходимости
animation-fill-mode	Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации

Пример:

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

Переходим к примерам

Настройка анимации

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

animation-iteration-count

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

animation-direction

Кроме возможности установить, сколько раз анимация повторяется, вы можете также объявить направление, в котором анимация завершается, с помощью свойства animation-direction. Значения этого свойства включают в себя normal, reverse, alternate и alternate-reverse.

Значение normal воспроизводит анимацию, как и намеревалось, от начала до конца. Значение reverse воспроизводит анимацию точно наоборот, чем это определено в правиле @keyframes, таким образом, начиная со 100% и работая в обратном направлении до 0%.

Значение alternate воспроизведёт анимацию вперёд, а затем назад. В ключевых кадрах это включает выполнение вперёд от 0% до 100%, а затем в обратном направлении от 100% до 0%. Используя свойство animation-iteration-count можно ограничить количество раз, когда анимация работает вперёд и назад. Счёт начинается с 1, когда анимация проходит вперёд от 0% до 100%, а затем добавляется 1, когда анимация проходит в обратном порядке от 100% до 0%. Объединение в общей сложности двух итераций. Значение alternate также инвертирует любые функции времени при воспроизведении в обратном направлении. Если анимация использует значение ease-in идущее от 0% до 100%, то затем использует значение ease-out идущее от 100% до 0%.

И, наконец, значение alternate-reverse сочетает оба значения alternate и reverse, запуская анимацию назад, а затем вперёд. Значение alternate-reverse начинается со 100% и выполняется до 0%, а затем снова обратно до 100%.

animation-play-state

Свойство animation-play-state позволяет анимации воспроизводиться или остановиться на паузу, с помощью ключевых слов running и paused, соответственно. Когда анимация снимается с паузы, она возобновляет работу из текущего состояния, а не начинается снова с самого начала.

В приведённом ниже примере свойство animation-play-state устанавливается на паузу, когда stage активен при щелчке по нему

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

animation-fill-mode

Свойство animation-fill-mode определяет, как элемент должен быть стилизован — до, после или до и после запуска анимации. Свойство animation-fill-mode принимает четыре значения ключевых слов, включая none, forwards, backwards и both.

Значение none не будет применять любые стили к элементу до или после того, как анимация запущена.

Значение forwards сохранит стили, объявленные в последнем указанном ключевом кадре. На эти стили, однако, могут повлиять значения свойств animation-direction и animation-iteration-count, меняя, где анимация заканчивается.

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

Наконец, значение both применит поведение сразу от обоих значений forwards и backwards.

css-свойство transition-delay

Для установки периода ожидания перед началом перехода используется свойство
transition-delay (см. пример №3). В качестве значения свойство принимает
время, указанное в секундах (s) или миллисекундах (ms). Если указано нулевое
значение времени (используется браузером по умолчанию), то переход начинается без задержек. Также разрешается использовать отрицательные значения, но
с ними нужно быть осторожным, т.к. это может привести к изменению вида перехода в начальной стадии процесса. Разрешается перечислять через запятую
несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в
transition-property.

Performance

Most CSS properties can be animated, because most of them are numeric values. For instance, , , are all numbers. When you animate them, the browser gradually changes these numbers frame by frame, creating a smooth effect.

However, not all animations will look as smooth as you’d like, because different CSS properties cost differently to change.

In more technical details, when there’s a style change, the browser goes through 3 steps to render the new look:

Layout: re-compute the geometry and position of each element, then
Paint: re-compute how everything should look like at their places, including background, colors,
Composite: render the final results into pixels on screen, apply CSS transforms if they exist.

During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as , may skip the Layout step. If a changes, the browser doesn’t calculate any new geometry, it goes to Paint → Composite. And there are few properties that directly go to Composite. You can find a longer list of CSS properties and which stages they trigger at https://csstriggers.com.

The calculations may take time, especially on pages with many elements and a complex layout. And the delays are actually visible on most devices, leading to “jittery”, less fluid animations.

Animations of properties that skip the Layout step are faster. It’s even better if Paint is skipped too.

The property is a great choice, because:

CSS transforms affect the target element box as a whole (rotate, flip, stretch, shift it).
CSS transforms never affect neighbour elements.

…So browsers apply “on top” of existing Layout and Paint calculations, in the Composite stage.

In other words, the browser calculates the Layout (sizes, positions), paints it with colors, backgrounds, etc at the Paint stage, and then applies to element boxes that need it.

Changes (animations) of the property never trigger Layout and Paint steps. More than that, the browser leverages the graphics accelerator (a special chip on the CPU or graphics card) for CSS transforms, thus making them very efficient.

Luckily, the property is very powerful. By using on an element, you could rotate and flip it, stretch and shrink it, move it around, and . So instead of properties we can use , use for increasing element size, etc.

The property also never triggers Layout (also skips Paint in Mozilla Gecko). We can use it for show/hide or fade-in/fade-out effects.

Paring with can usually solve most of our needs, providing fluid, good-looking animations.

For example, here clicking on the element adds the class with and , thus making it move to the right and disappear:

Here’s a more complex example, with :

Дополнительные настройки

Для задания времени анимации вам необходимо перед закрытием тега </body> добавить следующий код:

PHP

1
2
3
4
5

jQuery(document).ready(function($){

$(‘.wow’).attr(‘data-wow-duration’,’2.5s’);

});

</script>

Где вместо ‘2.5s’ мы можем указать своё значение в секундах и таким образом сделать анимацию более быстрой или более плавной.

Для задания задержки анимации используем атрибут data-wow-delay

PHP

1
2
3
4
5

jQuery(document).ready(function($){

$(‘.wow’).attr(‘data-wow-delay’,’1.5s’);

});

</script>

Вместо ‘1.5s’ указываем своё значение в секундах.

Задать количество повторов анимации можно при помощи атрибута data-wow-iteration

PHP

1
2
3
4
5

jQuery(document).ready(function($){

$(‘.wow’).attr(‘data-wow-iteration’,’infinite’);

});

</script>

Значение «infinite» позволяет повторять анимацию бесконечно, так же вместо него вы можете указать определённое количество повторов.

Атрибут data-wow-offset позволяет включать анимацию, когда элемент проходит определённое количество пикселей или процентов от низа экрана.

Добавляется он аналогичным образом при помощи скрипта:

PHP

1
2
3
4

jQuery(document).ready(function($){

$(‘.wow’).attr(‘data-wow-offset’,’40’);});

</script>

Так же вы можете задавать все эти атрибуты непосредственно в коде элемента:

PHP

<div class=»wow slideInLeft» data-wow-duration=»2.5s» data-wow-delay=»1.5s» data-wow-offset=»40″ data-wow-iteration=»2″>
Для этого блока применится CSS-анимация появления
</div>

1
2
3

ДляэтогоблокаприменитсяCSS-анимацияпоявления

<div>

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

transition

transition-property

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

transition-duration

Задает время за которое должна пройти анимация.

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

transition-timing-function

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

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

easeInSine	cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine	cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine	cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad	cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad	cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad	cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic	cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic	cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic	cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart	cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart	cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart	cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint	cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint	cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint	cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo	cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo	cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo	cubic-bezier(1, 0, 0, 1)
easeInCirc	cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc	cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc	cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack	cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack	cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack	cubic-bezier(0.68, -0.55, 0.265, 1.55)

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

CSS transitions

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

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

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

transition-property;
transition-duration;
transition-timing-function;
transition-delay;
transition;

transition-property — указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all.

Пример:

transition-property: width;

transition-duration — задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах.

Пример:

transition-duration: 1s;

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

Пример:

transition-timing-function: cubic-bezier(0, 0, 1, 1);

transition-delay — задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах.

Пример:

transition-delay: 500ms;

transition — это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay.

Пример:

transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;

У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд.

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

Используйте “липкие” фильтры

Были времена, когда SVG-фильтры для обычных HTML-элементов были решением так себе – IE/Edge их совсем не поддерживали, а у остальных браузеров поведение могло сильно отличаться, да и производительность, особенно в Firefox, оставляла желать лучшего. Но постепенно дела налаживаются, Edge переходит на новый движок, да и другие браузеры вроде бы начинают вести себя схожим образом. Так что может для продакшена технология еще не готова, но попробовать и поиграться с ней, для того, чтобы расшевелить мозги, очень даже можно.

Применить фильтр несложно:

Главное не забыть про саму SVG картинку с ним:

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

Довольно неплохо эффект с этим фильтром смотрится на разных выезжающих кнопках:

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

Применение анимаций к элементам

Теперь можно применить эти ключевые кадры к любому количеству элементов, чтобы увидеть, как это работает. Следующие разделы используют стандартные свойства, но не забывайте также включить версию с приставкой производителя -webkit.

Название анимации

Свойство animation-name определяет набор анимаций с ключевыми кадрами с каким названием будет применен, т. е., чтобы использовать этот набор ключевых кадров под названием «colorchange», мы запишем следующий код:

#myelement
{
    animation-name: colorchange;
}

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

Как и свойство transition-duration, свойство animation-duration задает продолжительность анимации в секундах s или миллисекундах ms, тысячных долях секунды. Следующие продолжительности одинаковы:

#myelement p.one
{
    animation-duration: 3s;
}
#myelement p.two
{
    animation-duration: 3000ms;
}

Временная характеристика анимации

Как и свойство transition-timing-function, свойство animation-timing-function определяет, как меняется скорость анимации с течением времени между ключевыми кадрами, а не во всей анимации целиком, но это редко заметно, если не передвигать элемент. Есть следующие возможные значения:

· ease — задано по умолчанию, анимация начнется медленно, затем быстро ускорится. Дойдя до средины, она замедлится и будет замедляться до полной остановки.
· ease-in-out — подобно предыдущей, но с менее выраженными ускорением и замедлением.
· ease-in — начинается медленно, но ускоряется и останавливается резко.
· ease-out — начинается быстро, но замедляется до остановки.
linear — постоянная скорость на всей продолжительности анимации, часто наилучший выбор для изменения цвета или прозрачности.

И, наконец, у нас есть функция cubic-bezier, позволяющая задать собственные уникальные временные характеристики. Для подробного описания обратитесь к уроку «Временная функция Безье».

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

Как и свойство transition-delay, animation-delay определяет период в секундах s или миллисекундах ms до момента начала перехода. Следующие значения одинаковы:

#myelement p.one
{
    animation-delay: .5s;
}
#myelement p.two
{
    animation-delay: 500ms;
}

Счетчик повторений анимации

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

#myelement p.one
{
    animation-iteration-count: 5;
}
#myelement p.two
{
    animation-iteration-count: infinite;
}

Направление анимации

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

normal — значение по умолчанию, проигрывает ключевые кадры анимации вперед от 0% до 100%.
reverse — проигрывает ключевые кадры назад, от 100% к 0%.
alternate — проигрывает ключевые кадры вперед, затем назад и так по кругу.
alternate-reverse — как предыдущее значение, но сначала воспроизводится обратный порядок ключевых кадров.

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

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

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

CSS-анимация поворота

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

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

PHP

.animate-block2 {
animation: rotate 3s infinite;
}

1
2
3

.animate-block2{

animationrotate3sinfinite;

}

А теперь поэтапно изменим угол поворота:

PHP

@keyframes rotate {
0% {
transform: rotate(-30deg); /*Поворот на 30 градусов против часовой стрелки*/
}
50%{
transform: rotate(30deg); /*Поворот на 30 градусов по часовой стрелке*/
}
100% {
transform: rotate(-30deg);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@keyframesrotate{

transformrotate(-30deg);/*Поворот на 30 градусов против часовой стрелки*/

}

50%{

transformrotate(30deg);/*Поворот на 30 градусов по часовой стрелке*/

}

100%{

transformrotate(-30deg);

}

Если вместо значения infinite в свойстве animation поставить какое-то число (например 2), то анимация повторится только 2 раза.

Run Animation in Reverse Direction or Alternate Cycles

The property specifies
whether an animation should be played forwards, backwards or in alternate
cycles.

The animation-direction property can have the following values:

— The animation is played as normal
(forwards). This is default
— The animation is played in
reverse direction (backwards)
— The animation is played
forwards first, then backwards
— The animation is played
backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

Example

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

The following example uses the value «alternate» to make the animation
run forwards first, then backwards:

Example

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

The following example uses the value «alternate-reverse» to make the animation
run backwards first, then forwards:

Example

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