diff --git a/popup/script.js b/popup/script.js
index 56261ad..ab595a5 100644
--- a/popup/script.js
+++ b/popup/script.js
@@ -12,6 +12,9 @@ var progressBar = document.getElementById("progress-fg");
 var timeout;
 var timesUpStr = "[ TIME'S UP! ] ";
 var lastPaused = -1;
+var requiredProgress = -1;
+var latestUpdate = Date.now();
+var currentAnimationId = 0;
 
 // Init audio
 var oscillator, audioContext;
@@ -81,7 +84,6 @@ playBtn.onclick = function() {
 	if (playBtn.classList.contains("fa-pause")) {
 
 		lastPaused = Date.now();
-		if (params.type === "timer") progressBar.style.animationPlayState = "paused";
 		clearTimeout(timeout);
 
 		// Change icon
@@ -96,13 +98,12 @@ playBtn.onclick = function() {
 		switch (params.type) {
 			case "timer":
 				if (hours === 0 && minutes == 0 && seconds === 0) return;
-				progressBar.style.animationPlayState = "running";
 				startTimer(startOffset);
 				break;
 			case "stopwatch":
 				startStopwatch(startOffset);
 				break;
-		} 
+		}
 
 		// Change icon
 		playBtn.classList.remove("fa-play");
@@ -113,6 +114,7 @@ playBtn.onclick = function() {
 }
 
 function initTimer() {
+	document.getElementById("progress-bg").style.width = "100%";
 
 	hours = parseInt(params.h);
 	minutes = parseInt(params.m);
@@ -138,24 +140,38 @@ function initTimer() {
 	secondsElem.innerText = pad(seconds) + "s";
 
 	// Animate progress bar
-	var totalSeconds = (hours * 60 * 60) + (minutes * 60) + seconds;
-	progressBar.style.animationDuration = totalSeconds + "s";
-	progressBar.style.animationName = "progress";
-
+	requiredProgress = (hours * 60 * 60) + (minutes * 60) + seconds;
+	++currentAnimationId;
+	var runId = currentAnimationId;
+	var animate;
+	animate = function () {
+		var paused = playBtn.classList.contains("fa-play");
+		if (currentAnimationId !== runId || paused) {
+			return;
+		}
+		var milliProgress = (Date.now() - latestUpdate) / 1000;
+		var progress = (hours * 60 * 60) + (minutes * 60) + seconds -
+			milliProgress;
+		var percentage = 1 - (progress /
+			requiredProgress);
+		document.getElementById("progress-fg").style.transform =
+			`scaleX(${percentage})`;
+		requestAnimationFrame(animate);
+	};
+	requestAnimationFrame(animate);
 }
 
 function startTimer(startOffset) {
 
 	if (hours === 0 && minutes == 0 && seconds === 0) return;
 
+	latestUpdate = Date.now();
+
 	playBtn.classList.remove("fa-play");
 	playBtn.classList.add("fa-pause");
 
 	// Wait the starting offset
 	timeout = setTimeout(updateTimer, startOffset);
-
-	document.getElementById("progress-fg").style.animationPlayState = "running";
-
 }
 
 function updateTimer() {
@@ -179,6 +195,8 @@ function updateTimer() {
 	}
 	secondsElem.innerText = pad(seconds) + "s";
 
+	latestUpdate = Date.now();
+
 	if (hours === 0 && minutes === 0 && seconds == 0) timeUp();
 	else timeout = setTimeout(updateTimer, 1000);
 
diff --git a/popup/style.css b/popup/style.css
index 34ebc2f..935a89d 100644
--- a/popup/style.css
+++ b/popup/style.css
@@ -21,13 +21,13 @@ main {
 main > span {
 	font-size: 15vw; /* Browsers that don't support min() */
 	font-size: min(15vw, 50vh);
-	color: #9E9E9E;
+	color: #9e9e9e;
 }
 main > span.highlighted {
 	color: #424242;
 }
 main > span.red {
-	color: #F4511E;
+	color: #f4511e;
 }
 .progress {
 	position: absolute;
@@ -41,16 +41,9 @@ main > span.red {
 }
 #progress-fg {
 	background-color: #43A047;
-	animation-timing-function: linear;
-	animation-fill-mode: forwards;
-}
-@keyframes progress {
-	from {
-		width: 0;
-	}
-	to {
-		width: 100vw;
-	}
+	width: 100%;
+	transform: scaleX(0);
+	transform-origin: center left;
 }
 /* FontAwesome */
 i {