<div class="wrapper">
        <article class="flow">
          <h1>Named animation timing functions</h1>
          <figure class="callout">
              Use the dropdown to change timing function to see how much they affect the
              overall animation.
            Change timing function
          <div class="grower"></div>
.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;

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.