/***************************************************************************************************
Animate-Img-GymPose
-> Animating a series of images frame by frame.
-> Images
   1. In order to work, the images must be a SPRITE
      1.1. Image source: support_musclesFlexing.svg
      1.2. Properties: 5 images representing 5 frames, arranged HORIZONTALLY together as a single image-sprite file.
   2. Technology use: CSS animation technique
      2.1. We use CSS technique where the images are represented by CSS background URL, 
           and CSS will navigate through the sprite images while going frame to frame by
           calculating the (x,y) axis of the target image within the image-sprite.
           The images inside the image-sprite could be arranged in any way, vertically or horizontally
           or random, and it is the (x,y) axis who determines which next image to show.
      2.2. For our impl., we need to simplify the (x,y) calculation therefore these images must satisfy:
           (+) Each image dimension is square, and the same throughout
           (+) Arrange all image on single row (y is constant = 0px), 5 columns horizontally.
   3. Image Size: 
      3.1. Make sure the dims (w x h) are easy even numbers that is easy to calculate (x,y) axis.
           Such as = 300x300, etc. NOT ugly ones = 251x251, 135x135, etc. 
           This ease us to calculate how the CSS to move from one image to the next image.
   4. We did NOT use other (alternative) techniques such as using <IMG src="">, a regular image display, combining with
      CSS to change their opacity from 1 to 0. This technique caused slow transitions from one image
      to the next and not what we designed.
 
-> animate-img-gympose
   1. This is the animated element definition, whose background is the image to display and 
      contains the animation definition.
   2. Element dimensions
      (+) We must specify the dimension explicitly to make CSS animation works. In this case,
          we specify dimension = 50 x 50 pixels. 
   3. "background-size: 250px"
      (+) Since the sprite contains 5 images, we must then set background-size = 5 x 50 = 250px.
      (x) UPDATE (4/2020): We found out that the background-size does NOT need to be a specific
          value (px). Instead, we can set it to "cover", which it will occupy the entire element
          to display the image(s).
   3. "background-position: top left" = Initiate background display at (0,0) axis of image-sprite.
        
-> CSS Animation Property
   1. Animation name = "animate-gympose-keyframe"
      This is the name of animation to use. This must match with the keyframes definition.
   2. animation-timing-function = steps(5, end)
	  Specify this is 5-step animation. In conjunction, we must then specify what to do for
	  each step inside @keyframes definition.
   3. animation-duration = 5s
	  The duration of entire thing is 5 seconds. Because we specify to be 5 steps, each step
	  will last 1s. To result animation as intended, 5-step x 5s must be a pair! If the pair
	  was different numbers, the animation would be out of whack.
   4. animation-iteration-count = infinite
	  To run the animation over and over again after the [animation-duration] is reached.
   5. animation-fill-mode = forwards
	  To leave the animation at its last state after [animation-duration] is over; 
	  do not return to its starting state.
    
-> @keyframes
   1. The actual animaton. Here, we define what to do for each of our 4-step animation is. 
   2. To create immediate-jump images transitions from one to the next, we define all four 100%
      state, and specify "background-position" to be the next image (x,y) axis in the sprite.
      Since all images are in square with easy-even dim and laying horizontally next to each other,
      move the SPRITE to the left (negative x-axis) to display next image. 
      These position calculation must match the image (background) dim. defined in 
      animate-img-gympose (that is width = 50px, 250px total).
   3. If we specified states in order such as: 0% > 50% > 100%, it would result in "rolling"
      animation and NOT immeditae-jump images transitions. 
 
-> CSS Validator:
   Requires the "standard" property to come LAST after "vendor-specific" property. 
    
-> REF
   (*) https://www.w3schools.com/css/css3_animations.asp
   (*) https://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animations#answer-27534753
   (*) https://designmodo.com/steps-css-animations/
***************************************************************************************************/
.animate-img-gympose {
    display: inline-block;
    width: 50px;
    height: 50px;
    
    background-image: url("../image/icon/support_musclesFlexing.svg");
    background-size: cover;
    background-position: top left;    
    background-repeat: no-repeat;
    
    -moz-animation: animate-img-gympose-keyframe 5s steps(5, end) forwards infinite;
    -webkit-animation: animate-img-gympose-keyframe 5s steps(5, end) forwards infinite;
    -o-animation: animate-img-gympose-keyframe 5s steps(5, end) forwards infinite;
    -ms-animation: animate-img-gympose-keyframe 5s steps(5, end) forwards infinite;
    animation: animate-img-gympose-keyframe 5s steps(5, end) forwards infinite;
}

@-moz-keyframes animate-img-gympose-keyframe {
    100% { background-position: 0px 0px; }
    100% { background-position: -100px 0px; }
    100% { background-position: -150px 0px; }
    100% { background-position: -200px 0px; }
    100% { background-position: -250px 0px; }
}
@-webkit-keyframes animate-img-gympose-keyframe {
    100% { background-position: 0px 0px; }
    100% { background-position: -100px 0px; }
    100% { background-position: -150px 0px; }
    100% { background-position: -200px 0px; }
    100% { background-position: -250px 0px; }
}
@-o-keyframes animate-img-gympose-keyframe {
    100% { background-position: 0px 0px; }
    100% { background-position: -100px 0px; }
    100% { background-position: -150px 0px; }
    100% { background-position: -200px 0px; }
    100% { background-position: -250px 0px; }
}
@-ms-keyframes animate-img-gympose-keyframe {
    100% { background-position: 0px 0px; }
    100% { background-position: -100px 0px; }
    100% { background-position: -150px 0px; }
    100% { background-position: -200px 0px; }
    100% { background-position: -250px 0px; }
}
@keyframes animate-img-gympose-keyframe {
    100% { background-position: 0px 0px; }
    100% { background-position: -100px 0px; }
    100% { background-position: -150px 0px; }
    100% { background-position: -200px 0px; }
    100% { background-position: -250px 0px; }
}