<main>
<h2>CSS Animations: the <code>animation-direction</code> Property</h2>
<p>Use the select box below to set the animation direction. You can also change the iteration count.</p>
<div class="box">
</div>
<input id="iteration" type="number" min="0" step="0.1" value="1">
<select id="direction">
<option value="normal">normal</option>
<option value="reverse">reverse</option>
<option value="alternate">alternate</option>
<option value="alternate-reverse">alternate-reverse</option>
</select>
<br>
<button>Animate the Box</button> <button disabled>Reset</button>
</main>
body {
font-family: Arial, sans-serif;
font-size: 20px;
padding: 0 20px;
}
main {
text-align: center;
margin: 0 auto;
max-width: 800px;
}
p {
padding: 0 20px;
}
code {
color: firebrick;
}
.box {
width: 100px;
height: 100px;
background: orange;
border: solid 2px;
margin-bottom: 20px;
}
.box-animate {
animation-name: moveObject;
animation-duration: 2s;
}
@keyframes moveObject {
from {
transform: translateX(0);
}
to {
transform: translateX(600px);
}
}
input[type=number] {
width: 60px;
}
button {
margin-top: 20px;
}
console.clear();
let myObject = document.querySelector('.box'),
btn1 = document.querySelector('button'),
btn2 = document.querySelectorAll('button')[1],
iteration = document.querySelector('#iteration'),
direction = document.querySelector('#direction');
btn1.addEventListener('click', function () {
myObject.style.animationIterationCount = document.querySelector('#iteration').value;
myObject.style.animationDirection = document.querySelector('#direction').value;
myObject.classList.add('box-animate');
this.disabled = true;
btn2.disabled = false;
}, false);
btn2.addEventListener('click', function () {
myObject.classList.remove('box-animate');
this.disabled = true;
btn1.disabled = false;
}, false);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.