CSS animation-direction — напрямок програвання анімації

HTML

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

<div class="inputs">
  
  <input id="normal" checked name="animation-direction" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Анімація йде з самого початку, після завершення циклу повертається до вихідного стану.</message>
  
  <input id="reverse" name="animation-direction" type="radio"/>
  <label for="reverse">reverse</label>
  <message for="reverse">Анімація йде з кінця до початку, потім плавно повертається у вихідне положення.</message>
  
  <input id="alternate" name="animation-direction" type="radio"/>
  <label for="alternate">alternate</label>
  <message for="alternate">Анімація йде циклічно з початку до кінця, а потім з кінця до початку.</message>
  
  <input id="alternate-reverse" name="animation-direction" type="radio"/>
  <label for="alternate-reverse">alternate-reverse</label>
  <message for="alternate-reverse">Анімація йде циклічно з кінця до початку, а потім з початку до кінця.</message>
  
</div>

<div class="wm">
  <p id="message">Анімація йде з самого початку, після завершення циклу повертається до вихідного стану.</p>
</div>

<hr>

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

CSS

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

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

.box span {
  margin-top: 0;
  display: block;
  animation-name: animation_name;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  font-weight: 700;
  padding: 8px 0;
  text-align: center;
  animation-direction: normal;
}

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

message {
  display: none;
}

.wm {
  min-height: 100px;
}

JS

const message = document.querySelector('#message');

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

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.querySelectorAll('.box span').forEach((n) => n.style.setProperty('animation-direction', this.id));

}));

HTML

<div class="info">
	<p>За допомогою властивості <code>animation-direction</code> ми можемо визначити напрямок анімації: тільки в одному напрямку або в обох, чергуючи назад і вперед.</p>
	<p>Ви бачите дві ідентичні анімації, але для них задані різні значення напрямку: <em>normal</em> i <em>reverse</em> відповідно.</p>
</div>

<div class="wrapper">
	<div class="block normal">
		<span>Lorem ipsum dolor sit amet.</span>
	</div>
	<div class="block reverse">
		<span>Lorem ipsum dolor sit amet.</span>
	</div>
</div>

CSS

* {
	box-sizing: border-box;
}

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

.info {
	padding: 6px;
}

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

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
  background-color: #dcdcdc;
}

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

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

.block.normal span {
	animation-direction: normal;
}

.block.reverse span {
	animation-direction: reverse;
}

HTML

<div>Туди й назад: кожен другий прохід — у зворотному напрямку</div>

CSS

div {
  width: 260px;
  padding: 8px;
  background-color: #e76f51;
  color: #fff;
  animation-name: moveRight;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(120px);
  }
}

HTML

<p>Різні значення для <code>animation-direction</code> у дії:</p>


<hr>

<div class="wrapper">
  <div class="block block-1">
    <span>normal</span>
  </div>
  <div class="block block-2">
    <span>reverse</span>
  </div>
  <div class="block block-3">
    <span>alternate</span>
  </div>
  <div class="block block-4">
    <span>alternate-reverse</span>
  </div>
</div>

CSS

body {
  padding: 36px;
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  color: #222;
  line-height: 1.45; 
}


@keyframes animate {
  
  from { 
    margin-top: 50px; 
  }
  
  to   { 
    margin-top: 100px; 
  }
  
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.block {
  background-color: red;
  padding: 26px 8px;
/*   height: 125px; */
  width: 125px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  animation: animate 1.75s linear 2.5s infinite normal;
}

.block-1 {
  animation-direction: normal;
}
.block-2 {
  animation-direction: reverse;
}
.block-3 {
  animation-direction: alternate;
}
.block-4 {
  animation-direction: alternate-reverse;
}

JS

// var blocks = document.getElementsByClassName('block');
// var btn = document.getElementById('btn');

// btn.onclick = function() {
//   for (var i = 0; i < blocks.length; i++) {
//     blocks[i].style.animationPlayState = 'running';
//   }
//   btn.innerHTML = 'Зупинити анімацію';
// }
//# sourceURL=pen.js