Cacher is the code snippet organizer for pro developers

<!-- Keyframes and animation mike and boat

    animate boat with rotate and translate function
    animate steam with rotate - translate(position) and opacity
    animate background image (mountains) from right to left to give the background movement 
    (it's going to look like the boat is moving from left to right)


    (binding aninmation to mike selector 

    from @-webkit-keyframes

    to .mike {
    -webkit-animation: mike-move 6s 6s ease-out forwards})

-->

<div class="boat">
    <img src="img/boat.png" alt="tugboat">
  </div>
  <img class="mike" src="img/mike.png">

<style>


body {
  background: #F0FCFF url('img/island.png') repeat-x 100% -460px;
  background-size: 780px;
}
.boat {
  width: 380px;
  position: absolute;
  top: 40%;
  left: 35%;
}
.boat img {
  width: 100%;
}
.boat::after {
  content: "";
  display: block;
  width: 120px;
  height: 120px;
  background: url('img/steam.png') no-repeat;
  background-size: 120px;
  position: absolute;
  top: -25%;
  left: 5%;
  opacity: 0; /* steam opacity */
}
.mike {
  width: 180px;
  position: absolute;
  top: 55%;
  left: -15%;
  -webkit-transform: rotateZ(-5deg);
}


/*  Animations
------------------------------------------ */

/* animate the background image put the code on the parent element */

/* we can set the direction 
   -webkit-animation-direction: reverse - alternate;

 -webkit-animation-fill-mode: backwards - forwards - both;*/

body {
  -webkit-animation: bg-move 8s ease-out forwards; /* final keyframe continues to apply after the animation sequence has completed. 8s animation stop

  when the animation start after the page load
  -webkit-animation-play-state: running(default) pause;(hover with javascript)*/
}
.boat {
  -webkit-animation: rock-boat 3s ease-in-out infinite; /* shorthand */
}
.boat::after {
  -webkit-animation: steam 4s 2s infinite; /* duration (4s) - delay (2s) - infiniti iteration-count */
}
.mike {
  -webkit-animation: mike-move 6s 6s ease-out forwards,
                     mike-float 3.2s infinite;
}


/* .boat {
  -webkit-animation: rock-boat 3s ease-in-out;
  -webkit-animation-iteration-count: 2; the boat will move up and down 2 times - infiniti (doesn't stop)

} 

*/



/*  Keyframes - WebKit only
------------------------------------------ */

@-webkit-keyframes rock-boat {
  50%  { -webkit-transform: rotate(-5deg) translateY(-10px); }/* shorthand */
}

/* @-webkit-keyframes rock-boat {
  0%  { -webkit-transform: rotate(0) translateY(0);
  50%  { -webkit-transform: rotate(-5deg) translateY(-10px);
  100%  { -webkit-transform: rotate(0) translateY(0); }
} */

@-webkit-keyframes steam {
  /* 0%; no need steam opacity because is on the element on the css*/
  40%,
  60%  { opacity: 1; }
  100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}

@-webkit-keyframes bg-move {
  0%   { background-position:  100% -560px; }
  100% { background-position: -350% -460px; } /* move 3 1/2 times its size from right to left*/
}

@-webkit-keyframes mike-move {
  100% { left: 12%; }
}

@-webkit-keyframes mike-float {
  50% { -webkit-transform: rotateZ(5deg) translateY(-5px); }
}





</style>

<!-- Keyframes and animation properties
     smooth multi step animation using keyframes based syntax 
     change the value of the property with given direction

     transition vs animations
     transition are inmediatly apply when propertly values change
     animation only execute when we bind them to a selector and the changes css values are define separate in a set of keyframes
     (control what happen before and after with a set of directions)


     CSS Animation
     Consist on 2 components:
     set of keyframes that indicate the end and start state
     set of properties that reference that eyframes to execute the animation

-->

<div class="wrap">
    <div class="prog-bar"> </div>
  </div>


<style>

body {
  background: #303030;
  font: 1.1em sans-serif;
}
.wrap {
  box-sizing: border-box;
  margin: 70px auto;
  padding: 5px;
  width: 600px;
  border-radius: 10px;
  background: #222;
  box-shadow: inset 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.1);
}
.prog-bar {
  height: 60px;
  border-radius: 5px;
  background: -webkit-repeating-linear-gradient(-45deg, rgba(255,255,255,.1), rgba(255,255,255,0) 12px), -webkit-linear-gradient(#F5A8A8, #F08080);
   
   /*  name */
  -webkit-animation-name: slide;
  -moz-animation-name: slide;
  -o-animation-name: slide;
  animation-name: slide;

  /*  duration */
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;

   /*  timing - z(ease out - linear) motion*/
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
} 

/*  Keyframes
------------------------------------------ */

@-webkit-keyframes slide {
  0%   { width:   0%; } /*  Keyframes */
  30%, 
  60%  { width:  50%; }
  70%  { width:  80%; }
  100% { width: 100%; }
}
@-moz-keyframes slide {
  0%   { width:   0%; }
  30%, 
  60%  { width:  50%; }
  70%  { width:  80%; }
  100% { width: 100%; }
}
@-o-keyframes slide {
  0%   { width:   0%; }
  30%, 
  60%  { width:  50%; }
  70%  { width:  80%; }
  100% { width: 100%; }
}
@keyframes slide {
  0%   { width:   0%; }
  30%, 
  60%  { width:  50%; }
  70%  { width:  80%; }
  100% { width: 100%; }
}

 /*  Animate From to  - Basic keyframe rule*/

@-webkit-keyframes slide {
  from  { width:   0%; } 
  to    { width:  100%; }
}

</style>