Insert values into css keyframe animation

index.html

<h1>Wha<span class="t">t</span> should I do <span class="t2">t</span>oday?</h1>

<ol class="ranking">
    <li class="ranking--item">Feed the cat</li>
    <li class="ranking--item">Read a book</li>
    <li class="ranking--item">Have a nap</li>
</ol>

<div class="buttons">
    <button name="remove">Remove</button>
</div>

<script type="application/x-template">
    @-webkit-keyframes disapear{
        0% {
            /* Sets the initial height to the measured height of the element */
            height: {{height}};
        }
        
        30% {
            transform: translateX(-5%);
        }
        
        60% {
            transform: translateX(200%);
            
            /* Makes sur the height and bottom margin stay constant
                 till this point in the animation */
            height: {{height}};
            margin-bottom: 1em;
        }
        
        100% {
            /* Keeps the element out of the screen. If it's not there,
             * the element comes back to its original position
             */
            transform: translateX(200%);
            
            /* Makes the blank space collapse */
            height: 0;
            margin-bottom: 0;
        }
    } 

    @keyframes disapear{
        0% {
            /* Sets the initial height to the measured height of the element */
            height: {{height}};
        }
        
        30% {
            transform: translateX(-5%);
        }
        
        60% {
            transform: translateX(200%);
            
            /* Makes sur the height and bottom margin stay constant
                 till this point in the animation */
            height: {{height}};
            margin-bottom: 1em;
        }
        
        100% {
            /* Keeps the element out of the screen. If it's not there,
             * the element comes back to its original position
             */
            transform: translateX(200%);
            
            /* Makes the blank space collapse */
            height: 0;
            margin-bottom: 0;
        }
    }
</script>


<script type="application/x-template">
@-webkit-keyframes disapear{
    0% {
        /* Sets the initial height to the measured height of the element */
        height: {{height}};
    }
    
    30% {
        transform: translateX(-5%);
    }
    
    60% {
        transform: translateX(200%);
        
        /* Makes sur the height and bottom margin stay constant
             till this point in the animation */
        height: {{height}};
        margin-bottom: 1em;
    }
    
    100% {
        /* Keeps the element out of the screen. If it's not there,
         * the element comes back to its original position
         */
        transform: translateX(200%);
        
        /* Makes the blank space collapse */
        height: 0;
        margin-bottom: 0;
    }
} 


@keyframes disapear {
    0% {
        /* Sets the initial height to the measured height of the element */
        height: {{height}};
    }
    
    30% {
        transform: translateX(-5%);
    }
    
    60% {
        transform: translateX(200%);
        
        /* Makes sur the height and bottom margin stay constant
             till this point in the animation */
        height: {{height}};
        margin-bottom: 1em;
    }
    
    100% {
        /* Keeps the element out of the screen. If it's not there,
         * the element comes back to its original position
         */
        transform: translateX(200%);
        
        /* Makes the blank space collapse */
        height: 0;
        margin-bottom: 0;
    }
}
</script>



* {
  box-sizing: border-box;
}

body {
  font-family: 'Peralta', cursive;
  line-height: 2;
  color: hsl(45, 70%, 80%);
  background: hsl(5, 80%, 50%);
  margin: 0;
  padding-top: 1em;
}

h1 {
  text-align: center;
  font-weight: normal;
  margin: 0;
  line-height: 1.5;
  margin-bottom: 1em;
}

.ranking {
  counter-reset: ranking;
  padding: 0.5em 1em 0;
  overflow: hidden;
}

.ranking--item {
  list-style-type: none;
  margin-bottom: 1em;
  background: hsl(202, 80%, 30%);
}

.ranking--item::before {
  counter-increment: ranking;
  content: counter(ranking);
  display: inline-block;
  width: 2em;
  text-align: center;
  position: relative;
  top: -.5em;
  left: -.5em;
  background: hsl(45, 70%, 80%);
  color: hsl(202, 80%, 30%);;
}

.buttons {
  margin-top: 2em;
  text-align: center;
}

button {
  background: none;
  border: none;
  padding: none;
  font-family: inherit;
  color: hsl(5, 80%, 50%);
  background: hsl(45, 70%, 80%);
  width: 33%;
  line-height: inherit;
  border-bottom: solid .5em mix(hsl(45, 70%, 80%), hsl(5, 80%, 50%), 70);
}

.removed {
  -webkit-animation: disapear 1s;
  animation: disapear 1s;
}


var removeButton = document.querySelector('[name=remove]');
var itemToBeRemoved = document.querySelector('.ranking--item:nth-child(2)');
var keyframesTemplate = document.querySelector('[type^=application]').textContent;
var replacementPattern = /\{\{height\}\}/g;

function insertKeyframes (height) {
    var styleElement = document.createElement('style');
    styleElement.textContent = keyframesTemplate.replace(replacementPattern, height + 'px');
    document.head.appendChild(styleElement);
}

removeButton.addEventListener ('click', function (event) {
    insertKeyframes(itemToBeRemoved.clientHeight);
    itemToBeRemoved.classList.add('removed');
});

function removeElement (event) {
    if (event.animationName === 'disapear') {
        event.target.parentNode.removeChild(event.target);
    }
}

document.body.addEventListener('animationend',removeElement);
document.body.addEventListener('webkitAnimationEnd', removeElement);