Dev – CSS Animation for Image to simulate sleep breath

Wow… What a heading. But I guess with this amount of keywords we will find this code snippet also in the future.

UPDATE: animations and some other css tricks do not work on FireTv V1 (Non Stick version) V2 – this works.
AndroidTv not Amazon Templates will be the future!

I created a minimalistic animation for a HTML5 based app today and wanted to share the code. (It’s pure CSS since this is a WebApp this is perfect and enough)

(Sorry – Had no chance to put the CSS animation here into the blog style sheet. My baby now wants my full attention 😉 )

The Animation…

@keyframes sleepanim {
  0%   {
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
  }
  30%   {
    -webkit-transform: scale(0.68);
    -moz-transform: scale(0.68);
    transform: scale(0.68);
  }
  100%   {
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
  }
}

.app-logo {
  position: absolute;
  bottom: 20px;
  right: -10px;
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  transform: scale(0.75);
  animation-name: sleepanim;
  animation-duration: 4s;
  animation-delay: 5s;
  animation-iteration-count: 1000;
}

Here are some other good examples:
https://www.w3schools.com/css/css3_animations.asp