Не удалось добиться анимации со скоростью 60 кадров в секунду.

var form = {};

function addActive(element) {
	element.highlightElement.classList.add("input-highlight-active");
}

function removeActive(element) {
	element.highlightElement.classList.remove("input-highlight-active");
}
// loops through the entire object removing "active" class on all elements except fo rthe element that is the target.
function setNewState(element, id, obj) {
	for (var key in obj) {
		if (id === key) {
			window.requestAnimationFrame(() => addActive(element));
		} else {
			removeActive(obj[key]);
		}
	}
}

// Captures the event.target.id and corresponding object to be passed to setNewState function
function handleEvent(e) {
	var active = form[e.target.id];
	var activeId = e.target.id;
	setNewState(active, activeId, form);
}

// Adds focus event listener to html elements
function addEvent() {
	var inputElements = document.querySelectorAll('.input-wrapper > input');
  inputElements = Array.from(inputElements);
	inputElements.map(el => el.addEventListener('focus', (e) => handleEvent(e)));
	}
  
// Creates object using input id as object key
function init() {
	var temp = {};
	var inputElements = document.querySelectorAll('.input-wrapper > input');
	for (var i = 0; i < inputElements.length; i++) {
		temp[inputElements[i].id] = {
			highlightElement: inputElements[i].nextElementSibling,
			active: false
		};
	}
	return temp;
}

form = init();
addEvent();

body {
  background-color: #121217;
}
.input-wrapper {
    position: relative;
    width: 60%;
    margin: 0px auto 40px;
    text-align: left;
}
.input-label {
    position: relative;
    text-align: left;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.012em;
    color: #eee;
}
input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 100%;
    margin: 8px auto 0;
    letter-spacing: 0.012em;
    font-size: 18px;
    color: #fafafa;
    background-color: #121217;
    border: 0px;
    transform-origin: left;
    border-bottom: 1px solid #fafafa;
}
input:focus {
    outline: none;
}
.input-highlight {
    will-change: transform;
    position: absolute;
    top: 99%;
    width: 101%;
    height: 2px;
    background-color: #006daa;
    z-index: 1;
    transform-origin: left;
    transform: scaleX(0);
    transition: all 0.12s linear;
}
.input-highlight-active {
    will-change: transform;
    transform: scaleX(1);
    transition: all 0.12s linear;
}

<div class="input-wrapper">
  <div class="input-label">Full name</div>
  <input type="text" id="fullName">
  <div class="input-highlight"></div>
</div>