CSS animation — скорочення для всіх властивостей анімації

Універсальна властивість animation — скорочена властивість для восьми властивостей анімації:

• animation-name - Встановлює одну або кілька анімацій, які застосовуються до елементу. Являє собою ім'я, пов'язане з правилом @keyframes, воно в свою чергу задає послідовність руху.
• animation-duration - Задає час в секундах або мілісекундах, скільки повинен тривати один цикл анімації. За замовчуванням значення дорівнює 0s, це означає, що ніякої анімації немає.
• animation-timing-function - Встановлює, згідно якої функції часу повинна відбуватися анімація кожного циклу між ключовими кадрами.
• animation-delay - Встановлює час очікування перед запуском циклу анімації.
• animation-iteration-count - Властивість визначає, скільки разів програвати цикл анімації до її зупинки.
• animation-direction - Встановлює напрямок руху анімації.
• animation-fill-mode - Визначає, які стилі повинні застосовуватися до елементу, коли анімація не програється.
• animation-play-state - Властивість визначає, програвати анімацію або поставити її на паузу.

Для створення анімації засобами CSS, використовуйте властивість animation разом з правилом @keyframes, яке встановлює візуальні ефекти для анімації.

Зверніть увагу, що порядок у визначенні властивості має дуже важливе значення. Перше значення у формі часу, розглядається як animation-duration, а друге - як animation-delay.

Порядок також важливий для визначення animation-name серед інших значень. Під час аналізування правил, ключові слова допустимі лише для властивостей відмінних від animation-name, і значення яких не було задані раніше, будуть прийняті саме для них, а не для animation-name. Крім того, мають бути задані значення без задання для всіх властивостей, щоб була можливість визначити animation-name.

правити

Загальний опис

правити

Нотатка

Завжди вказуйте властивість animation-duration (тривалість анімації), в іншому випадку тривалість дорівнює 0, і тому анімація не буде відтворюватися.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state

Властивість animation може отримувати 10 значень:

animation-name

Задає ім'я @keyframes для анімації

автор: Svitlana

правити

animation-duration

Визначає скільки секунд або мілісекунд анімації потрібно, щоб завершити один цикл

автор: Svitlana

правити

animation-delay

Визначає затримку до початку анімації

автор: Svitlana

правити

animation-iteration-count

Вказує, скільки разів анімація повинна повторюватись

автор: Svitlana

правити

animation-direction

Визначає, чи повинна анімація відтворюватися в зворотному напрямку на альтернативних циклах.

автор: Svitlana

правити

animation-fill-mode

Визначає стиль для елемента, коли анімація не відтворюється (коли анімація закінчилася або має затримку)

автор: Svitlana

правити

animation-play-state

Визначає, чи буде анімація працювати або буде призупинена

автор: Svitlana

правити

animation-timing-function

Визначає криву (функцію) швидкості анімації

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	43	16	9	30	12	10

Підтримка: мобільні переглядачі

Переглядач
	43	43	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box"></div>

.box {
    width: 60px;
    height: 60px;
    background: #0172ad;
    position: relative;
    animation: mymove 5s infinite;
}

@keyframes mymove {
    from { left: 0; }
    to   { left: 200px; }
}

<div id="block">Тицяй, щоб уввімкнути або зупинити анімацію</div>

#block {
  font-family: monospace;
  background-color: gold;
  color: #222;
  font-size: 16px;
  line-height: 1.45;
  width: 175px;
  text-align: center;
  padding: 36px 16px;
  box-shadow: 1px 1px 1px 1px #000;
  cursor: pointer;
  transition: box-shadow .15s linear;
  position: absolute;
  top: 16px;
  left: 16px;
  animation: move 1.15s ease-in 0s infinite alternate paused none;
}

#block:hover {
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .45);
}

@keyframes move {
  from {
    top: 16px;
    left: 16px;
  }
  to {
    top: 250px;
    left: 350px;
  }
}

document.getElementById('block').onclick = function () {
  if (this.style.animationPlayState != 'running') {
    this.style.animationPlayState = 'running';
  } else {
    this.style.animationPlayState = 'paused';
  }
};
//# sourceURL=pen.js

<p>Цей приклад показує як працює властивість <code>animation</code>. Змінюйте значення для під-властивостей нижче, щоб змінити відображення анімації.</p>

<hr>

<strong>animation: </strong>

animation_name 

<input type="number" class="input" min="0" id="dur" value="1">s 

<select class="input" id="type">
  <option value="linear" name="value2" selected>linear</option>
  <option value="ease" name="value2">ease</option>
  <option value="ease-in" name="value2">ease-in</option>
  <option value="ease-out" name="value2">ease-out</option>
  <option value="ease-in-out" name="value2">ease-in-out</option>
  <option value="step-start" name="value2">step-start</option>
  <option value="step-end" name="value2">step-end</option>
</select>

<select class="input" id="count">
  <option value="infinite" name="value2" selected>infinite</option>
  <option value="1s" name="value2">1s</option>
  <option value="5s" name="value2">5s</option>
</select> 
<strong>;</strong><br><br>

<hr>

<div class="box">
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
</div>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
}

.wm {
  min-height: 100px;
}

.box span {
  margin-top: 0;
  display: block;
  animation: animation_name 1s linear infinite;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
}

@keyframes animation_name {
  0% { margin-top: 0; }
  50% { margin-top: 50px; }
  100% { margin-top: 0; }
}

hr {
  margin-bottom: 16px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {

  var dur = document.querySelector('#dur').value;
  var type = document.querySelector('#type').selectedOptions[0].textContent;
  var count = document.querySelector('#count').selectedOptions[0].textContent;

  document.querySelectorAll('.box span').forEach((n) => n.style.setProperty('animation', 'animation_name ' + dur + 's ' + type + ' ' + count));

}));

<div class="info">
	<p>За допомогою універсальної властивості <code>animation</code> ми можемо встановити анімаційні ефекти використовуючи CSS.</p>
	<p>Нижче, показаний приклад такої анімації. Ми визначили швидкість, кількість повторень, назву та тип анімації.</p>
</div>

<div class="wrapper">
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 15px;
	overflow: hidden;
	line-height: 1.45;
}

.info {
	padding: 6px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
  background-color: #dcdcdc;
}

span {
  margin-top: 0;
  display: block;
  animation: anim .8s linear infinite;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
}

@keyframes anim {
  0% { margin-top: 0; }
  50% { margin-top: 50px; }
  100% { margin-top: 0; }
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

body {
  line-height: 1.45;
  font-family: Ubuntu, sans-serif;
  font-size: 17px;
  color: #252525;
}

p {
  padding: 16px;
  
  /* ALTERNATIVE */
  /*
  animation-name: jump;
  animation-duration: 1.75s;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none; 
  */
  
  animation: jump 1.75s linear 2.5s infinite alternate none;
}

@keyframes jump {
  from {
    margin-top: 0;
    background-color: #666;
    color: #f1f1f1;
  }
  to {
    margin-top: 50%;
    background-color: #808080;
    color: #252525;
  }
}