Articles
Введение в CSS
CSS свойства, связанные с анимацией

CSS свойства, связанные с анимацией

В этой статье объясняются свойства CSS, связанные с анимацией.

Вы сможете узнать об использовании и синтаксисе свойств @keyframes, animation и transition.

YouTube Video

HTML для предварительного просмотра

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Анимация и переход

Правило @keyframes 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

Правило @keyframes используется в CSS-анимациях для указания того, как стили меняются во время анимации. В @keyframes изменения стиля от начала до конца анимации указываются в виде процентов времени или ключевых слов (from и to).

  • Это пример анимации, где элемент перемещается слева направо и возвращается в исходное положение.
  • В этом примере после @keyframes написано slide, что определяет анимацию с именем slide.
  • 0% — начало анимации, при этом translateX(0) устанавливает элемент в его исходное положение.
  • 50% — середина анимации, где элемент перемещается на 200 пикселей вправо с использованием translateX(200px).
  • 100% — конец анимации, когда элемент возвращается в исходное положение.
  • В классе box-animation-slide свойство animation используется для применения анимации slide с интервалом 3 секунды.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Вы можете точно контролировать стили во время анимации. Указав проценты, вы можете применять различные стили в произвольное время.
    • В этом примере цвет постепенно изменяется с красного на синий, затем на зеленый, желтый и снова на красный.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • В этом примере from эквивалентно 0%, а to эквивалентно 100%. Это позволяет создавать простые анимации.

Базовый синтаксис 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: Название анимации. Это указывается с помощью свойства animation или свойства animation-name.
  • Процент или ключевые слова: Используйте проценты от 0% до 100% или ключевые слова from (эквивалентно 0%) и to (эквивалентно 100%).

Свойство animation 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

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

  • Класс box-animation-ease-in-out задает slide как animation-name и использует анимацию slide, определенную в @keyframes.
    • 3s — это animation-duration, означающее, что каждый цикл анимации завершается за 3 секунды.
    • ease-in-out — это animation-timing-function, которая заставляет анимацию начинаться медленно, ускоряться, а затем снова замедляться в конце.
    • infinite — это animation-iteration-count, означающее, что анимация будет повторяться бесконечно.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • Класс box-animation-alternate задает color-change как animation-name и использует анимацию color-change, определенную в @keyframes.
    • 1s после ease-in-out — это animation-delay, задающая задержку перед началом анимации. Анимация начнется через 1 секунду.
    • 3 после 1s — это animation-iteration-count, означающее, что анимация повторится 3 раза.
    • alternate — это animation-direction, задающее направление воспроизведения анимации. alternate определяет, что анимация воспроизводится чередующимся образом.

Составные части свойства animation.

Свойство animation — это сокращенное свойство, которое объединяет несколько под-свойств в одно. Вот основные под-свойства:.

  • Свойство animation-name: задает имя анимации для применения. Оно должно совпадать с именем анимации, определенным в @keyframes.
  • Свойство animation-duration: задает время, за которое анимация завершает один цикл. Единицы измерения времени — секунды (s) или миллисекунды (ms).
  • Свойство animation-timing-function: задает кривую скорости анимации. Используются такие значения, как ease, linear, ease-in, ease-out, ease-in-out и другие.
    • Задание значения ease заставляет анимацию начинаться медленно, ускоряться, а затем снова замедляться в конце.
    • Задание значения linear заставляет анимацию воспроизводиться с постоянной скоростью от начала до конца.
    • Указание ease-in начинается с медленного темпа и заканчивается быстро.
    • Указание ease-out начинается с быстрого темпа и заканчивается медленно.
    • Указание ease-in-out начинается медленно, ускоряется и заканчивается медленно.
  • Свойство animation-delay задает задержку перед началом анимации. Единицей времени являются либо секунды, либо миллисекунды.
  • Свойство animation-iteration-count определяет количество повторений анимации. Значение infinite будет повторять анимацию бесконечно.
  • Свойство animation-direction задает направление воспроизведения анимации. Варианты включают normal (вперед), reverse (назад), alternate (чередование направления) и alternate-reverse (чередование, начиная с обратного направления).
  • Свойство animation-fill-mode определяет состояние анимации до ее начала и после завершения. Можно указать none (нет), forwards (вперед), backwards (назад) или both (оба).
  • Свойство animation-play-state определяет, включена ли анимация или приостановлена. Можно указать running (выполняется) или paused (приостановлена).

Резюме

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

Свойство transition 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

Свойство transition используется для добавления анимационных эффектов к изменениям CSS-стилей. Оно позволяет изменениям быть плавными при изменении состояний, таких как hover, focus, active, или при динамическом изменении стилей с помощью JavaScript.

Рассмотрим пример класса transition-box, где цвет фона плавно изменяется при наведении мыши на кнопку. - В классе transition-box свойство transition задает двухсекундный переход для изменения цвета фона. Этот переход задан как ease, делая его плавным. - Псевдокласс hover изменяет цвет фона с lightgray на steelblue при наведении мыши на кнопку. Это изменение происходит плавно за 2 секунды, указанные в классе transition-box.

Можно применить свойство transition к нескольким характеристикам одновременно. - В примере класса transition-2-properties цвет фона изменяется за 5 секунд, а ширина — за 0,5 секунды.

Базовый синтаксис 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • property указывает, к каким CSS-свойствам должна быть применена анимация. Использование all применяет анимацию ко всем свойствам.
  • duration указывает время, необходимое для завершения анимации. Укажите с использованием секунд (s) или миллисекунд (ms).
  • timing-function указывает изменение скорости анимации. Вы можете использовать такие варианты, как ease, linear, ease-in, ease-out, ease-in-out и другие.
  • delay задает время задержки перед началом анимации. Укажите в секундах или миллисекундах.

Подробные свойства transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

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

  • transition-property: Указывает свойство, к которому применяется анимация.
  • transition-duration: Указывает продолжительность анимации до её завершения.
  • transition-timing-function: Указывает скорость изменения анимации. Можно использовать такие варианты, как ease, linear, ease-in, ease-out, ease-in-out.
  • transition-delay: Указывает время задержки перед началом анимации.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Свойства CSS, связанные с эффектами фильтра