transition progressbar

threejs/lessons/threejs-game.md

@@ -172,6 +172,7 @@ a CSS animation of diagonal stripes.
 }
 #progressbar {
   width: 0;
+  transition: width ease-out .5s;
   height: 1em;
   background-color: #888;
   background-image: linear-gradient(

threejs/threejs-game-check-animations.html

@@ -37,6 +37,7 @@
     }
     #progressbar {
       width: 0%;
+      transition: width ease-out .5s;
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(

threejs/threejs-game-conga-line-w-notes.html

@@ -78,6 +78,7 @@
     }
     #progressbar {
       width: 0%;
+      transition: width ease-out .5s;
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(

threejs/threejs-game-conga-line.html

@@ -78,6 +78,7 @@
     }
     #progressbar {
       width: 0%;
+      transition: width ease-out .5s;
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(

threejs/threejs-game-just-player.html

@@ -43,6 +43,7 @@
     }
     #progressbar {
       width: 0%;
+      transition: width ease-out .5s;
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(

threejs/threejs-game-load-models.html

@@ -37,6 +37,7 @@
     }
     #progressbar {
       width: 0%;
+      transition: width ease-out .5s;
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(

threejs/threejs-game-player-input.html

@@ -78,6 +78,7 @@
     }
     #progressbar {
       width: 0%;
+      transition: width ease-out .5s;
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(