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

Содержание

CSS свойство @keyframes

Правило @keyframes устанавливает ключевые кадры при анимации элемента.

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

Самый простой вариант, когда есть только два ключевых кадра — исходное и конечное состояние. Например:


@keyframes box {
    from { left: 0; }
    to { left: 300px; }
}

Здесь набор ключевых кадров имеет имя box, которое в последствии будет использовано в свойстве animation. В наборе определяется, что элемент будет изменять значение свойства left от 0 до 300 пикселей. Вместо ключевых слов from и to можно использовать, соответственно, 0% и 100%.

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

CSS синтаксис

@keyframes переменная {селектор-ключевого-кадра {css-стили;}}

Возможные значения

Значение Описание
переменная Обязательный параметр. Определяет название анимации, которая связывает @keyframes со свойством animation, настраивающим время анимации и другие её параметры.
селектор-ключевого-кадра

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

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

0-100%
from (то же, что и 0%)
to (то же, что и 100%)

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

css-стили Обязательный параметр. Один или более допустимых свойств CSS стилей.

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

Заставим элемент понемногу сдвигаться вниз на 200px


/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
     from {top: 0px;}
     to {top: 200px;}
} 

/* Стандартный синтаксис */ 
@keyframes mymove {
     from {top: 0px;}
     to {top: 200px;}
}

Анимация CSS через keyframes, без воды и максимально просто

Автор статьи: admin

В этой статье будет про то как работает CSS анимация с использованием keyframes, всё написанное здесь, будет максимально простым, понятным и без воды.

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

Ещё смотрите статью Делаем простую анимацию через CSS transition, там вы научитесь делать анимацию используя transition.

Базовая работа с @keyframes:

Для начала надо научится с ним работать базова, самые основы так сказать и понять в чём его суть, CSS анимация через keyframes, работает достаточно интересно.

Суть работы с @keyframes:

Суть работы с ним заключаться в том, что он сам @keyframes, просто задаёт когда и какое свойство нужно изменить и всё, для настройки времени анимации или сколько раз она будет проигрываться, используется свойства «animation-…».

Свойства «animation-…» для

@keyframes:

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

Это ещё не все свойства, ниже будут ещё, здесь только самые базовые.

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

@keyframes:

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.square {

    width: 100px;

    height: 100px;

    background-color: green;

    animation-duration: 10s;

    animation-iteration-count: infinite;

    animation-name: square1;

}

 

@keyframes square {

    from {

        width: 100px;

        background-color: green;

    }

 

    50% {

        background-color: blue;

    }

  

    to {

        width: 200px;

        background-color: red;

    }

  }

Разбор кода:

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

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

Теперь что касается самой анимации, задаётся слово @keyframes, после него идёт имя анимации.

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

Что касается 50%, то это какие свойства будут использоваться, когда анимация проигралась на 50%, можно использовать 30%, 20%, 70%, это не важно, главное чтобы не меньше 0% и не больше 100%.

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

Более подробная работа с @keyframes:

В этой части статьи будут только новые свойства «animation-…» и всё, новых способов работы с @keyframes не будет.

Ещё больше свойств «animation-…» для

@keyframes:

  • animation-direction — определяет, как должна воспроизводится анимация, вперёд, назад или переменно вперед и назад;
  • animation-timing-function — это грубо говоря меняет задаёт как происходит анимация, про неё надо писать отдельно;

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

Пример более продвинутой работы с

@keyframes:

Почти точно такой же блок div мы создаём и работаем с ним.

Тут только поменялся CSS.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.square {

    width: 100px;

    height: 100px;

    background-color: red;

    animation-duration: 10s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    animation-timing-function: linear;

    animation-name: square2;

}

 

@keyframes square2 {

    90% {

        background-color: blue;

    }

  

    to {

        width: 500px;

        height: 200px;

        background-color: green;

    }

}

Разбор кода:

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

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

Для animation-timing-function используется параметр linear, который делает так, чтобы скорость анимации была равномерной, то есть не как по умолчания, сначала быстро, а потом медленно.

Больше тут не чего сказать.

Работа с @keyframes уровня бог:

Вот тут уже разберём кое что интересное.

Профессиональный пример работы с

@keyframes:

Тут почти не чего не поминалось, а HTML вообще не поменялся.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

.square {

    width: 100px;

    height: 100px;

    background-color: blue;

    animation-duration: 5s, 10s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    animation-timing-function: linear, ease-in-out;

    animation-name: squareSize, squareColor;

}

 

@keyframes squareSize {

    90% {

        width: 200px;

    }

  

    to {

        width: 500px;

        height: 150px;

    }

}

 

@keyframes squareColor {

    25% {

        background-color: red;

    }

 

    75% {

        background-color: blue;

    }

  

    to {

        background-color: green;

    }

}

Разбор кода:

Вот тут всё уже по интереснее, как видите судя по свойству animation-name, мы применяем две анимации, одна отвечает за размер, вторая за цвет, задаём их через запятую.

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

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

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

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

animation: animation-duration || animation-timing-function ||

  animation-delay || animation-iteration-count || animation-direction ||

  animation-fill-mode || animation-play-state || [none | animation-name]

Дополнительные свойства:

  • animation-delay — Делает задержку перед проигрыванием анимации;

  • animation-fill-mode — Определяет как нужно применять стили к элементу анимации, до и после применения;

  • animation-play-state — Определяет состояние анимации, пауза или проигрыш;

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

Вывод:

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

Подписываетесь на соц-сети:

Также рекомендую:

Полезные ссылки для изучения CSS анимации / Хабр

Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.

CSS Анимация (CSS3 Animations)

Ищете базовую информацию по CSS3 анимации? Сайт W3 Schools обеспечит вас основными сведениями о правилах покадровой анимации @keyframes, поддержку браузерами, и различными доступными свойствами. Все это снабжено качественными и наглядными примерами.

Синтаксис покадровой анимации (Keyframe Animation Syntax)

Если вы уже знакомы с работой CSS3 анимации и вам нужна просто быстрая шпаргалка, то вам определенно стоит ознакомиться с соответствующей страницей на сайте Криса Койера CSS-Tricks. На ней можно найти множество примеров кода, который можно легко скопировать и вставить в свою таблицу стилей.

CSS3 Анимация (CSS3 Animations)

Ричард Бредшоу (Richard Bradshaw) составил крайне полезный сборник информации о различных аспектах CSS3 анимации. Страница по предлагаемой ссылке сфокусирована в основном на покадровой анимации @keyframes, но не пропустите также полезную информацию о переходах (transitions) и трансформациях (transforms) на том же сайте.

CSS Анимация: Принципы и Примеры (CSS Animation: Principles and Examples)

Эта углубленная статья на Smashing Magazine делает акцент на CSS3 анимацию, где используются традиционные принципы анимации, такие как сжимание и растяжение (‘squash and stretch’), которые помогают в создании более реалистических иллюзий.

Мастеркласс по CSS Анимации (A Masterclass in CSS Animation)

Net magazine предлагает тур по правилам и свойствам CSS3 анимации с использованием простых примеров, которые смогут в будущем помочь в создании интересных и прикольных эффектов.

Начинаем эксперименты над CSS3 Анимацией (Start Experimenting with CSS3 Animations)

Ли Мунро (Lee Munroe) был на высоте в 2010-ом, когда он опубликовал в своем блоке статью о CSS3 анимации. Его пример был сфокусирован на вендорных префиксих вебкита, но сам синтаксис остался неизменным. Свою статью он оканчивает, приводя примеры со всего интернета.

Звенящий колокольчик с помощью покадровой CSS-анимации (Ring a Bell with CSS Keyframe Animations)

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

Развлекаемся с CSS анимацией (Having Fun with CSS Animations)

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

Пятиминутное руководство по CSS Анимации (The Five-Minute Guide to CSS Animations)

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

Анимация с CSS: это легче, чем ты думаешь (Animation with CSS: It’s Easier Than You Think)

И наконец, хорошо отформатированная статья от Van SEO Design, которая предлагает обзор различных свойств и правил, которые вы возможно захотите использовать в вашей CSS анимации, и которая включает описание примеров кода для каждого из них.

Свойство animation-fill-mode — состояние анимации перед началом и после окончания

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

Синтаксис

селектор {
animation-fill-mode: backwards | forwards | both | none;
}

Значения

Значение Описание
none Если установлена задержка анимации — то в течении времени задержки
элемент будет оставаться на месте, а потом скачком перейдет к 0% кадру.
После окончания анимации элемент не останется в том состоянии,
где остановился, а перепрыгнет в начальное состояние.
backwards Заставляет элемент двигаться после загрузки страницы к 0% кадру,
даже если установлена задержка
animation-delay,
и оставаться там, пока не начнется анимация.
После окончания анимации элемент
не останется в том состоянии, где остановился,
а перепрыгнет в начальное состояние.
forwards Указывает браузеру, что после окончания анимации элемент
останется в том состоянии, где остановился.
both Включает в себя backwards и forwards — после загрузки
страницы элемент установится к 0% кадру, а после окончания
анимации элемент останется там, где остановился.

Значение по умолчанию: none.

Пример . Значение none

В данном примере margin-left
установлен в значение 300px для элемента, а для первого кадра анимации —
в 0px. Так как нет задержки animation-delay,
то элемент после загрузки страницы станет в 0px, а не в 300px.
Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример . Значение none

В данном примере margin-left
установлен в значение 300px для элемента, а для первого кадра анимации —
в 0px. Также для элемента установлена задержка
animation-delay в 3 секунды,
поэтому элемент после загрузки страницы станет в 300px, а не в 0px,
и будет стоять там 3 секунды после начала анимации
а потом скачком перейдет к 0px — и анимация начнется оттуда.
Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример . Значение backwards

В данном примере margin-left
установлен в значение 300px для элемента, а для первого кадра анимации —
в 0px. Также для элемента установлен
animation-fill-mode в значении backwards,
поэтому элемент после загрузки страницы станет в 0px, а не в 300px,
как это было для animation-fill-mode в значении none.
Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: backwards;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример . Значение none и количество повторений равно 1

В данном примере margin-left
установлен в значение 300px для элемента, а для первого кадра анимации —
в 0px. Также для элемента установлена задержка
animation-delay в 3 секунды,
поэтому элемент после загрузки страницы станет в 300px,
а не в 0px, и будет стоять там 3 секунды после начала анимации
а потом скачком перейдет к 0px — и анимация начнется оттуда.
Так как animation-fill-mode установлен в значении none,
то после проигрывания анимации элемент вернется в начальное значение:

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример . Значение forwards и количество повторений равно 1

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

Кроме того, margin-left установлен в значение 300px для элемента,
а для первого кадра анимации —
в 0px. Также для элемента установлена задержка animation-delay в 3 секунды,
поэтому элемент после загрузки страницы станет в 300px, а не в 0px, и будет стоять там
3 секунды после начала анимации,
а потом скачком перейдет к 0px — и анимация начнется оттуда:

@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: forwards;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример . Значение both и количество повторений равно 1

В данном примере animation-fill-mode установлен в значении both,
а число повторений анимации — в 1.
После загрузки страницы элемент будет стоять в первом кадре анимации (в 0px, а не в 300px),
а после проигрывания анимации элемент останется в том положении,
где закончилась анимация, а не прыгнет в исходную точку:

@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: both;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Смотрите также

  • свойство animation-name,
    которое задает имя анимации
  • свойство animation-duration,
    которое задает продолжительность анимации
  • свойство animation-delay,
    которое задает задержку перед выполнением анимации
  • свойство animation-timing-function,
    которое задает скорость выполнения анимации
  • свойство animation-iteration-count,
    которое задает количество итераций анимации
  • свойство animation-direction,
    которое задает направление анимации
  • свойство animation-play-state,
    которое позволяет поставить анимацию на паузу
  • свойство animation,
    представляющее собой сокращение для анимаций
  • команду @keyframes,
    задающую ключевые кадры анимации
  • плавные переходы transition,
    представляющие собой анимацию по наведению на элемент

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

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

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

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

CSS Подсказка


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


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

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


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

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

Пример

/ * Контейнер подсказки * /
.tooltip {
position: relative;

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

/ * Текст всплывающей подсказки
* /
.всплывающая подсказка .tooltiptext {
видимость: скрыто;
ширина: 120 пикселей;

цвет фона: черный;
цвет: #fff;
выравнивание текста: по центру;
отступ: 5px 0;
радиус границы: 6 пикселей;

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

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

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

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

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

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

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

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

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

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

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

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

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

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



Подсказки позиционирования

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

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

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

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

результат:

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

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

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

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

результат:

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

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

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

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

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

результат:

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

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

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

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

результат:

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

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


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

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

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

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

.tooltip .tooltiptext :: after {
content: «»;
позиция: абсолютная;
верх: 100%;
/ * Внизу всплывающей подсказки * /
left: 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 вместе с непрозрачностью
свойство, и перейти от полностью невидимого к 100% видимому за определенное количество секунд.
(1 секунда в нашем примере):

Пример

.tooltip .tooltiptext {
opacity: 0;
переход: непрозрачность 1 с;
}

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

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

Как создать анимацию ключевых кадров CSS3

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

Создание анимации CSS3

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

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

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

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

по горизонтали из одной позиции в другую с помощью функции анимации CSS3.

  .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    фон: красный;
    положение: относительное;
    / * Chrome, Safari, Opera * /
    -webkit-имя-анимации: moveit;
    -webkit-animation-duration: 2 секунды;
    / * Стандартный синтаксис * /
    имя-анимации: moveit;
    продолжительность анимации: 2 с;
}
 
/ * Chrome, Safari, Opera * /
@ -webkit-keyframes moveit {
    от {left: 0;}
    на {left: 50%;}
}
 
/ * Стандартный синтаксис * /
@keyframes moveit {
    от {left: 0;}
    на {left: 50%;}
}  

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

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


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

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

Проценты представляют собой процент от продолжительности анимации, 0% представляет начальную точку анимации, 100% представляет конечную точку, 50% представляет среднюю точку и так далее.Это означает, что 50% ключевой кадр в 2-секундной анимации будет равен 1 секунде в анимации.

  .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    маржа: 100 пикселей;
    фон: красный;
    положение: относительное;
    слева: 0;
    / * Chrome, Safari, Opera * /
    -webkit-имя-анимации: shakeit;
    -webkit-animation-duration: 2 секунды;
    / * Стандартный синтаксис * /
    имя-анимации: shakeit;
    продолжительность анимации: 2 с;
}
 
/ * Chrome, Safari, Opera * /
@ -webkit-keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37,5% {left: -25px;}
    50% {left: 25px;}
    62,5% {left: -10px;}
    75% {left: 10px;}
}
 
/ * Стандартный синтаксис * /
@keyframes shakeit {
    12,5% {left: -50px;}
    25% {left: 50px;}
    37,5% {left: -25px;}
    50% {left: 25px;}
    62,5% {left: -10px;}
    75% {left: 10px;}
}  

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

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

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

  .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    фон: красный;
    положение: относительное;
    / * Chrome, Safari, Opera * /
    -webkit-animation: repeatit 2s линейный 0s бесконечный альтернативный;
    / * Стандартный синтаксис * /
    анимация: repeatit 2s линейная 0s бесконечная альтернатива;
}
 
/ * Chrome, Safari, Opera * /
@ -webkit-keyframes repeatit {
    от {left: 0;}
    на {left: 50%;}
}
 
/ * Стандартный синтаксис * /
@keyframes repeatit {
    от {left: 0;}
    на {left: 50%;}
}  

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


Свойства анимации CSS3.

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

Имущество Описание
анимация Сокращенное свойство для установки всех свойств анимации в одном объявлении.
имя-анимации Задает имя @keyframes определенных анимаций, которые должны быть применены к выбранному элементу.
продолжительность анимации Указывает, сколько секунд или миллисекунд требуется анимации для завершения одного цикла анимации.
функция синхронизации анимации Определяет, как будет развиваться анимация в течение каждого цикла i.е. функции ослабления.
задержка анимации Указывает, когда начнется анимация.
количество итераций анимации Указывает, сколько раз цикл анимации должен быть воспроизведен перед остановкой.
анимационное направление Указывает, должна ли анимация воспроизводиться в обратном порядке в альтернативных циклах.
режим анимации-заливки Определяет, как CSS-анимация должна применять стили к своей цели до и после ее выполнения.
состояние воспроизведения анимации Указывает, запущена или приостановлена ​​анимация.
@keyframes Задает значения свойств анимации в различные моменты анимации.

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

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

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

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

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

Зачем использовать CSS-анимацию?

CSS-анимация

существует уже много лет, но только недавно получила широкое распространение как в веб-индустрии, так и в электронной почте. В течение долгого времени анимация в Интернете создавалась либо с помощью проприетарного инструмента, такого как Adobe Flash или Microsoft Silverlight, либо в виде анимированного GIF - формата изображения, позволяющего создавать покадровую анимацию.Поскольку почтовые клиенты никогда не поддерживали использование Flash или Silverlight в почтовых ящиках, маркетологам электронной почты пришлось использовать анимированные GIF-файлы, если они хотели движения в своих кампаниях.

В основном это так. Согласно нашему исследованию состояния электронной почты за 2018 год, 78% брендов используют анимированные GIF-файлы в своих кампаниях, в то время как только 30% используют анимацию CSS.

Источник: исследование состояния электронной почты, проведенное Litmus за 2018 г., среди 3000 специалистов по маркетингу.

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

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

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

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

Два типа анимации

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

Переходы

CSS-переходы

делают именно то, что подразумевает название: они переводят элемент из одного состояния в другое, анимируя этот элемент в процессе. Лучший способ понять переход CSS - взглянуть на пример.

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

См. CSS-анимацию пера в электронной почте: пример 1 от Джейсона Родригеса (@rodriguezcommaj) на CodePen.

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

См. CSS-анимацию пера в электронной почте: пример 2 от Джейсона Родригеса (@rodriguezcommaj) на CodePen.

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

Что замечательно в переходах CSS, так это то, что их можно комбинировать с другими свойствами CSS для создания действительно интересных эффектов. Если бы мы хотели привлечь еще больше внимания к нашему CTA, мы могли бы добавить два дополнительных свойства CSS - box-shadow и transform - чтобы придать кнопке трехмерный вид.

См. CSS-анимацию пера в электронной почте: пример 3 от Джейсона Родригеса (@rodriguezcommaj) на CodePen.

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

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

Анимация по ключевым кадрам

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

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

См. CSS-анимацию пера в электронной почте: пример 4 от Джейсона Родригеса (@rodriguezcommaj) на CodePen.

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

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

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

Вы можете создавать более сложные анимации на основе кадров, заменяя ключевые слова from и to на проценты для обозначения отдельных кадров.Например, если бы я хотел иметь анимацию с пятью кадрами вместо двух, я мог бы добавить в свойства CSS 20%, 40%, 60%, 80% и 100%, при этом каждый набор свойств заключен в фигурные скобки, например в коде выше.

После настройки ключевых кадров необходимо запустить анимацию. Мы делаем это, ориентируясь на HTML-элемент, который хотим анимировать, и добавляем свойство анимации к этому элементу. В приведенном выше примере я нацелен на div с анимацией класса .В свойстве animation вы можете включить ряд значений для определения поведения вашей анимации. К ним относятся:

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

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

В CSS-анимацию по ключевым кадрам можно многое сделать, поэтому я бы посоветовал покопаться в отличной документации Mozilla Developer Network по этому вопросу.

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

Поддержка

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

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

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

Анимация, Вдохновение

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

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

Проверьте свою анимацию с Litmus Builder

Хотите начать использовать CSS-анимацию в своих кампаниях? Начните создавать свое следующее письмо с помощью Litmus Builder - единственного редактора кода, разработанного дизайнерами электронной почты для дизайнеров электронной почты. Быстро кодируйте и просматривайте свои электронные письма в более чем 90 различных почтовых клиентах, сохраняйте анимацию с помощью фрагментов и частичных файлов и загружайте свою кампанию прямо в поставщика услуг электронной почты с помощью ESP Syncing.

Начать строительство сегодня →

новый код - Основы анимации ключевых кадров CSS

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

Ключевые кадры CSS и переходы

Термин «анимация CSS» может сбивать с толку: означает ли он переходы CSS, ключевые кадры или и то, и другое? Хотя переходы и ключевые кадры имеют схожий синтаксис и цели, они представляют собой разные методы:

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

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

Использование ключевых кадров и переходов

Синтаксис ключевого кадра CSS

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

Для наших целей термин «CSS-анимация» охватывает как ключевые кадры, так и переходы.

Синтаксис ключевых кадров CSS

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

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

и оформить его в виде круга с радиусом границы :

  div # redball {
ширина: 150 пикселей; высота: 150 пикселей;
граница: 2px solid # 000;
фон: красный;
радиус границы: 50%;
позиция: абсолютная;
}  

Что изменяет внешний вид соответствующего элемента в нашем :

  

Проще всего думать о ключевых кадрах CSS не как о кадрах как таковых, а как о точках на временной шкале произвольной длины.Начало анимации будет 0%; наполовину - 50%, и завершено - 100%. Таким образом, простая анимация с двумя ключевыми кадрами для перемещения нашего элемента #redball может выглядеть так:

  @keyframes bounce {
0% {top: 300px; }
100% {top: 0; }
}  

(обратите внимание на внутренние фигурные скобки).

Как правило, это должно быть в начале нашей таблицы стилей, как и в случае с @ font-face . Обратите внимание, что имя, используемое для последовательности анимации (« bounce » в нашем случае), произвольно: вы можете в значительной степени называть анимацию как угодно, если имя соответствует соглашениям об именах в Интернете, и вы ссылаетесь на то же имя позже, когда вы вызовете последовательность.

Давайте сделаем это сейчас: вернемся к нашему определению CSS #redball и добавим вызов к анимации вместе с некоторой другой информацией:

  div # redball {
ширина: 150 пикселей; высота: 150 пикселей;
граница: 2px solid # 000;
фон: красный;
радиус границы: 50%;
позиция: абсолютная;
анимация: bounce 2s бесконечная альтернатива;
}  

Часть длительности ( 2 с , для двух секунд) такая же, как и в анимации перехода CSS; бесконечный означает, что анимация будет воспроизводиться вечно, а альтернативный означает, что анимация будет «пинг-понг» вперед и назад.Я расскажу о других свойствах вместе с некоторыми практическими примерами в следующих статьях.

Анимация Дэна Эллисона, используется в соответствии с лицензией Creative Commons Attribution-NonCommercial 2.0 Generic

Нравится этот фрагмент? Я приглашаю вас подписаться на меня на twitter.com/dudleystorey, чтобы узнать больше.

Анимация ключевых кадров CSS с паузой между ключевыми кадрами | by Davecar Grave

общее время = 12 с

время анимации (%) = 8.33% (8,33% = 1 секунда времени)
пауза анимации (%)
= 16,67% (16,67% = 2 секунды времени)

процент ключевого кадра анимации
0 % → 8,33% → 25% → 33,33% → 50% → 58,33% → 75% → 83,33% → 100%

Так как анимация вращается на 360 градусов, и у нас 4 итерации.
значение ключевого кадра = 360/4 = 90 градусов
У нас есть 90 градусов на итерацию, чтобы получить градус на каждой итерации, мы увеличим его на 90 градусов .
0deg + 90deg = 90deg
[1-я итерация]
90deg + 90deg = 180deg [2-я итерация]
180deg + 90deg = 270deg
[3-я итерация]
260deg + 90deg = 900 [4-я итерация]

Теперь у нас есть

0deg → 90deg → 180deg → 270deg → 360deg [ deg в каждой итерации]

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

 .planet {
animation: rotateEarth 12s infinite
} @keyframes rotateEarth {
0% {
transform: rotate (0deg)
}
8,33% {
transform: rotate (90deg)
}
25% {
transform: поворот (90 градусов)
}
33,33% {
преобразование: поворот (180 градусов)
}
50% {
преобразование: поворот (180 градусов)
}
58,33% {
преобразование: поворот (270 градусов)
}
75% {
transform: rotate (270deg)
}
83.33% {
transform: rotate (360deg)
}
100% {
transform: rotate (360deg)
}
}

Как вы можете видеть в приведенном выше коде, есть некоторые ключевые кадры с одинаковым значением.Мы можем написать меньше кода, разделив запятыми ключевые кадры с одинаковым значением.

 @keyframes rotateEarth {
0% {
преобразование: поворот (0 градусов)
}
8,33%, 25% {
преобразование: поворот (90 градусов)
}
33,33%, 50% {
преобразование: поворот (180 градусов)
}
58,33%, 75% {
преобразование: поворот (270 градусов)
}
83,33%, 100% {
преобразование: поворот (360 градусов)
}
}

Функция синхронизации анимации CSS для сегмента ключевого кадра

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

Замедление по ключевым кадрам

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

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

Пара примеров:

  • linear Timing - нет ускорения или замедления, анимация будет двигаться вперед с постоянной скоростью.
  • замедление хода тайминг - запуск медленнее и ускорение до полной скорости
  • замедление тайминг - запускается на полной скорости и замедляется до конечного состояния

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

Функция синхронизации по умолчанию

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

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

  .mySelector {
  анимация: линейная 1000 мс myAnimationName;
}  

В приведенном выше примере .mySelector будет анимирован в течение 1000 мс , по умолчанию - линейная синхронизация , в то время как анимация выполняется в соответствии с ключевыми кадрами в myAnimationName .

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

  .mySelector {
  функция времени анимации: линейная;
}  

Функция синхронизации для каждого сегмента

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

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

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

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

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

  @keyframes move {
  25% {
    преобразовать: перевести (100%, 0%);
    функция времени анимации: легкость в;
  }
  50% {
    преобразовать: перевести (100%, 100%);
    функция времени анимации: линейная;
  }
  75% {
    преобразовать: перевести (0%, 100%);
    анимация-тайминговая функция: замедление;
  }
}
.mySelector {
  анимация: линейный бесконечный ход 5000 мс;
}  

Несколько замечаний:

  • Нет сегмента 0% .Анимация начинается с того места, где начинается анимированный элемент.
  • Нет сегмента 100% . Анимация заканчивается там, где началась.
  • Функция синхронизации анимации для сегмента указывается в сегменте до того, как будет использоваться. Сегмент будет использовать функцию синхронизации анимации , которая активна в начале сегмента. Запутанный API! Например, второй сегмент перемещается с перевод (100%, 0%) на 25% завершен на перевод (100%, 100%) на 50% завершен.Временной интервал easy-in , который желателен для преобразования, определенного в сегменте 50% , определен сегментом до сегмента 25% animation-time-function: easy-in .
  • Атрибут animation в .mySelector должен указывать временную функцию (здесь linear ), чтобы это время использовалось в анимации движения 0% -25% .

Значит, он работает не так, как вы могли бы интуитивно ожидать.

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

Введение в CSS-анимацию и ключевые кадры— Рисование линии | автор: Janae Hall

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

1. Создайте стиль для вашего элемента:

Для начала я установил левое поле строки на 50vw так, чтобы оно располагалось по центру экрана.

Затем я установил левую границу. Это то, что мы увидим по мере раскрытия элемента.

Следующие два шага являются наиболее важными.

Свойство animation определяет многие атрибуты анимации. Здесь я использую только animation-name и duration , но есть еще несколько доступных. имя-анимации определяет, какое правило @keyframes использует анимация. В этом примере правило @keyframes называется отрисовкой линии . Позже я более подробно расскажу, что такое ключевые кадры и как их использовать.А пока просто знайте, что это то, что определяет код, используемый для анимации элемента. Продолжительность , как следует из названия, определяет, сколько времени должно занять анимация для завершения. В данном случае 5 секунд (секунд).

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

## Примечание. В этом примере я использую текущую версию Chrome, что означает, что я использую только свойства animation и animation-fill-mode. Если вы хотите включить поддержку старых браузеров, вам нужно добавить префиксы к этим именам свойств (-webkit- для Chrome и Safari, -o- для Opera и -moz- для Mozilla)

2. Создание своего Ключевые кадры

Правило @keyframes — это фрагмент кода, используемый для определения анимации элемента. Это позволяет вам устанавливать и изменять свойства элемента постепенно с течением времени.Анимация элемента начинается с ключевого кадра 0% и заканчивается на 100%. Вы можете обновить стиль элемента в любой момент в процессе анимации, указав процентное соотношение и установив желаемые свойства.

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

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

При 100% — конце анимации — высота элемента строки устанавливается на 100vh, а цвет границы снова устанавливается на красный. Поскольку высота начинается с 0 и заканчивается на 100vh, линия будет постепенно проходить вниз по экрану. Цвет границы изменится с синего значения, которое было установлено равным 50%, обратно на красный. Если вы помните, поскольку я установил режим анимации-заливки вперед, это означает, что элемент сохранит значения свойств, установленные на этом этапе анимации.

## Примечание. Вы можете заменить ключевые слова «from» вместо 0% и «to» вместо 100%, и код будет работать точно так же:

Этот код также действителен

Спасибо за прочтение!

Источники:

Как всегда, W3Schools

.

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

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