CSS 3 Анимация - httpdoc.ru

CSS3 анимации

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

Как работает CSS3-анимация

Анимация, определенная в @keyframe правиле, должна быть добавлена ​​с помощью селектора; иначе анимация работать не будет.

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

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

Характеристики Описание
@keyframes Он определяет разные стили анимации с разной продолжительностью.
анимация Это сокращенное свойство, позволяющее установить все свойства сразу.
анимация-задержка Он указывает период времени, по истечении которого анимация начнется.
режим заливки анимации он определяет статический стиль элемента.
количество итераций анимации Он указывает, сколько раз должна воспроизводиться анимация.
состояние воспроизведения анимации Он указывает, запущена ли анимация или приостановлена.
имя-анимации В нем указывается имя анимации @keyframes.
функция времени анимации Он определяет кривую скорости анимации.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 Animation </title> 
  <meta charset="UTF-8">
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* Standard syntax */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
</style>
</head>
<body>

<div></div>

<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>

</body>
</html>

Выход

CSS 3 Animation

Примечание. По окончании анимации ее стиль возвращается к исходному.


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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 Animation </title> 
  <meta charset="UTF-8">
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Выход

CSS 3 Animation

Задержать анимацию

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 Animation Delay </title> 
  <meta charset="UTF-8">
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Выход

CSS 3 Animation Delay

Запустить множественную анимацию

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 Multiple Animation </title> 
  <meta charset="UTF-8">
<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Выход

CSS 3 Multiple Animation

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

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 Reverse Animation </title> 
  <meta charset="UTF-8">
<style>  
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

Выход

CSS 3 Reverse Animation

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

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

Функция может иметь следующие значения:

  • легкость - это значение по умолчанию. Медленное начало, затем быстрое, затем медленно заканчивается.
  • linear - имеет одинаковую скорость от начала до конца.
  • легкость - приводит к медленному запуску.
  • легкость выхода - приводит к медленному завершению.
  • легкость входа - приводит к медленному началу и завершению.
  • cubic-bezier (n, n, n, n) - позволяет вам определять свои собственные значения.

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS 3 Animation Speed </title> 
  <meta charset="UTF-8">
<style>  
div {
    width: 100px;
    height: 50px;
    text-align: center;
    padding-top:30px; 
    background-color: seagreen;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

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

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

/* Standard syntax */
@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}
</style>
</head>
<body>


<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

Выход

CSS 3 Animation Speed
линейный
простота
легкость в
облегчение
легкость входа