<main>
<div class="wrapper">
<article class="flow">
<h1>Named animation timing functions</h1>
<figure class="callout">
<p>
Use the dropdown to change timing function to see how much they affect the
overall animation.
</p>
</figure>
<label>
Change timing function
<select>
<option>linear</option>
<option>ease</option>
<option>ease-in</option>
<option>ease-out</option>
<option>ease-in-out</option>
</select>
</label>
<div class="grower"></div>
</article>
</div>
</main>
.grower {
animation-name: grow;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes grow {
0% {
transform: scaleX(1);
}
50% {
transform: scaleX(1.8);
background: darkturquoise;
}
}
/* Decorative styles */
.grower {
width: 200px;
height: 80px;
background: lightseagreen;
position: relative;
margin-left: auto;
margin-right: auto;
}
label {
display: block;
}
const grower = document.querySelector('.grower');
const select = document.querySelector('select');
select.addEventListener('change', ({target}) => {
grower.style.animationTimingFunction = target.value;
});
This Pen doesn't use any external JavaScript resources.