Modify encrypted images loading for better UX

Adds proper react css transition to encrypted images placeholders, so
that we can animate it's entrance and exit properly.
In addition, adds simple css animations file to properly handle all of
the animations in one place, so that it's much easier to properly handle
prefers-reduced-motion media query.

res/css/views/messages/_MImageBody.scss

@@ -16,6 +16,12 @@ limitations under the License.
 
 $timelineImageBorderRadius: 4px;
 
+.mx_MImageBody_thumbnail--blurhash {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
 .mx_MImageBody_thumbnail {
     object-fit: contain;
     border-radius: $timelineImageBorderRadius;
@@ -23,8 +29,11 @@ $timelineImageBorderRadius: 4px;
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 100%;
+    width: 100%;
 
-    > div > canvas {
+    .mx_Blurhash > canvas {
+        animation: mx--anim-pulse 1.75s infinite cubic-bezier(.4, 0, .6, 1);
         border-radius: $timelineImageBorderRadius;
     }
 }