moose keyframes

<!-- keyframes demo by octomoosey @ tumblr -->

<style>
body {
    margin:0;
    background:#656565;}

#credit {
    z-index:8;
    bottom:-3px;
    right:3px;
    height:30px;
    width:30px;
    opacity:0.8;
    position:fixed;}

/* ---------------ANIMATION 1 -- BOUNCE EFFECT---------------*/

/* the first two sections of css are just setting up our object.  you can set the positioning and any colours, backgrounds etc as usual! */
.moose-animation{
    position:fixed;
    margin-left:10px;
    margin-top:10px;
/* this is where we set up the animation for the object, there are several lines which seem to repeat the same information, but this is just for cross browser compatibility */

/* the next section picks apart the 3 lines needed to set up the animation and explains each.  this is the duration, the iteration and the origin */

    animation: bbounce linear 2.5s; /* this line links us to the keyframe name we set up.  it also gives the total duration of the animation, if you want to make the animation slower, increase the time, for a quicker animation, decrease the time */
    animation-iteration-count: infinite; /* this makes sure the animation will continue to play, you can change this to a number if you only want the animation to play a certain number of times ( or to 1 if you only want it to play on page loading for example ) */
    transform-origin: 50% 50%; /* this just specifies that we want all transformations or effects to be centered on the object.  you can change this if you want to pin the transition effect to a corner of your object */

/* Safari 4+, Android, Chrome */
    -webkit-animation: bbounce linear 2.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;

/* Fx 5+ */
    -moz-animation: bbounce linear 2.5s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 50% 50%;

/* Opera 12+ */
    -o-animation: bbounce linear 2.5s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 50% 50%;

/* IE 10+, Fx 29+ */
    -ms-animation: bbounce linear 2.5s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 50% 50%;}

/* in these examples i'm going to animate an image.  this image could also be a link or the trigger for a hoverbox.  you can animate pretty much any object, a piece of text, a whole block, a title, etc.*/
.moose-animation img {
    height:30px;
    width:30px;
    border-radius:100%;
    padding:5px;
    border:1px solid #ffffff;
    background:#333333;}

/* this is my keyframe setup.  i need to give it a name, in this case it's 'bbounce' - the name that is referred to in the css section above.  i need to make sure that all of the browser extensions have the same name.  we use percentages to specify at which point in the animation certain states have to be achieved.  in the first css section above we specified the duration as 2.5 seconds.  so at 0 seconds ( 0% ) the animation will begin.  by 50% ( halfway through ) the object will have moved 10px down and by 100% ( the 2.5 second point ) it will have returned to the starting position.  you can also use negative values to get things to move to the left or up.  try out different settings to see how things move!  the command 'transform:translate' will change position. */
@keyframes bbounce{
  0% {transform:translate(0px,0px);}
  50% {transform:translate(0px,10px);}
  100% {transform:translate(0px, 0px);}
}

@-moz-keyframes bbounce{
  0% {-moz-transform:translate(0px,0px);}
  50% {-moz-transform:translate(0px,10px);}
  100% {-moz-transform:translate(0px,0px);}
}

@-webkit-keyframes bbounce {
  0% {-webkit-transform:translate(0px,0px);}
  50% {-webkit-transform:translate(0px,10px);}
  100% {-webkit-transform:translate(0px,0px);}
}

@-o-keyframes bbounce {
  0% {-o-transform:translate(0px,0px);}
  50% {-o-transform:translate(0px,10px);}
  100% {-o-transform:translate(0px,0px);}
}

@-ms-keyframes bbounce {
  0% {-ms-transform:translate(0px,0px);}
  50% {-ms-transform:translate(0px,10px);}
  100% {-ms-transform:translate(0px,0px);}
}

/* ---------------ANIMATION 2 -- FADE/OPACITY EFFECT---------------*/

/* the setup is the same as above, again specifying the duration of the animation and making sure to refer to the keyframes setup by name, in this case 'o-opacity' and covering all browser options */
.squirrel-animation{
    position:fixed;
    margin-left:60px;
    margin-top:10px;
    animation: o-opacity linear 3.5s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    -webkit-animation: o-opacity linear 3.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: o-opacity linear 3.5s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 50% 50%;
    -o-animation: o-opacity linear 3.5s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 50% 50%;
    -ms-animation: o-opacity linear 3.5s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 50% 50%;}

.squirrel-animation img {
    height:30px;
    width:30px;
    border-radius:100%;
    padding:5px;
    border:1px solid #ffffff;
    background:#333333;}

/* again as above, we name sure our keyframe setup name matches the one referred to in our css for the object.  in this case the % values relate to the opacity of the object, starting at opacity 1, with it fading to 0.1 at 50% of the animation and back to opacity 1 at 100% */

@keyframes o-opacity{
  0% {opacity:1;}
  50% {opacity:0.1;}
  100% {opacity:1;}}
}

@-moz-keyframes o-opacity{
  0% {opacity:1;}
  50% {opacity:0.1;}
  100% {opacity:1;}
}

@-webkit-keyframes o-opacity {
  0% {opacity:1;}
  50% {opacity:0.1;}
  100% {opacity:1;}
}

@-o-keyframes o-opacity {
  0% {opacity:1;}
  50% {opacity:0.1;}
  100% {opacity:1;}
}

@-ms-keyframes o-opacity {
  0% {opacity:1;}
  50% {opacity:0.1;}
  100% {opacity:1;}
}

/* ---------------ANIMATION 3 -- COMBINED EFFECT---------------*/

/* the setup is the same as above, again specifying the duration of the animation and making sure to refer to the keyframes setup by name, in this case 'allthings' and covering all browser options */

.tiger-animation{
    position:fixed;
    margin-left:110px;
    margin-top:10px;
    animation: allthings linear 3.5s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    -webkit-animation: allthings linear 3.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: allthings linear 3.5s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 50% 50%;
    -o-animation: allthings linear 3.5s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 50% 50%;
    -ms-animation: allthings linear 3.5s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 50% 50%;}

.tiger-animation img {
    height:30px;
    width:30px;
    border-radius:100%;
    padding:5px;
    border:1px solid #ffffff;
    background:#333333;}

/* ---------------ANIMATION 3 -- COMBINED EFFECT---------------*/

/* this time we have more divisions in our keyframes, settings at 0%, 25%, 50%, 75% and 100% - remember if you want a smooth animation your 0% and your 100% should make sure the object returns to the same position! this example has both opacity changes, size changes ( scale ) and a rotation, so as the object moves, it will shrink, fade out and turn! the command 'transform:rotate' will rotate or turn your object, the command 'transform:scale' will change it's size.  make sure to scale both x and y values to stop any distortion. if we have more than one transformation we can combine them into one line - so in this case we just give the rotate and the scale commands for each % value in one line.*/
@keyframes allthings{
  0% {opacity:1;
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00);}
  25% {opacity:0.5;
    transform:  rotate(90deg) scaleX(0.50) scaleY(0.50);}
  50% {opacity:0.1;
    transform:  rotate(180deg) scaleX(0.20) scaleY(0.20);}
  75% {opacity:0.5;
    transform:  rotate(270deg) scaleX(0.50) scaleY(0.50);}
  100% {opacity:1;
    transform:  rotate(360deg) scaleX(1.00) scaleY(1.00);}
}

@-moz-keyframes allthings{
  0% {opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00);}
  25% {opacity:0.5;
    -moz-transform:  rotate(90deg) scaleX(0.50) scaleY(0.50);}
  50% {opacity:0.1;
    -moz-transform:  rotate(180deg) scaleX(0.20) scaleY(0.20);}
  75% {opacity:0.5;
    -moz-transform:  rotate(270deg) scaleX(0.50) scaleY(0.50);}
  100% {opacity:1;
    -moz-transform:  rotate(360deg) scaleX(1.00) scaleY(1.00);}
}

@-webkit-keyframes allthings {
  0% {opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00);}
  25% {opacity:0.5;
    -webkit-transform:  rotate(90deg) scaleX(0.50) scaleY(0.50);}
  50% {opacity:0.1;
    -webkit-transform:  rotate(180deg) scaleX(0.20) scaleY(0.20);}
  75% {opacity:0.5;
    -webkit-transform:  rotate(270deg) scaleX(0.50) scaleY(0.50);}
  100% {opacity:1;
    -webkit-transform:  rotate(360deg) scaleX(1.00) scaleY(1.00);}
}

@-o-keyframes allthings {
  0% {opacity:1;
    -o-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00);}
  25% {opacity:0.5;
    -o-transform:  rotate(90deg) scaleX(0.50) scaleY(0.50);}
  50% {opacity:0.1;
    -o-transform:  rotate(180deg) scaleX(0.20) scaleY(0.20);}
  75% {opacity:0.5;
    -o-transform:  rotate(270deg) scaleX(0.50) scaleY(0.50);}
  100% {opacity:1;
    -o-transform:  rotate(360deg) scaleX(1.00) scaleY(1.00);}
}

@-ms-keyframes allthings {
  0% {opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00);}
  25% {opacity:0.5;
    -ms-transform:  rotate(90deg) scaleX(0.50) scaleY(0.50);}
  50% {opacity:0.1;
    -ms-transform:  rotate(180deg) scaleX(0.20) scaleY(0.20);}
  75% {opacity:0.5;
    -ms-transform:  rotate(270deg) scaleX(0.50) scaleY(0.50);}
  100% {opacity:1;
    -ms-transform:  rotate(360deg) scaleX(1.00) scaleY(1.00);}
}

</style>
<body>
<div class="moose-animation"><img src="https://66.media.tumblr.com/f2bdd6badefd2b0a5f51cbe6dc7877e1/tumblr_inline_obdm0rUzOQ1ro20i7_540.jpg"></div>

<div class="squirrel-animation"><img src="https://66.media.tumblr.com/f2bdd6badefd2b0a5f51cbe6dc7877e1/tumblr_inline_obdm0rUzOQ1ro20i7_540.jpg"></div>

<div class="tiger-animation"><img src="https://66.media.tumblr.com/f2bdd6badefd2b0a5f51cbe6dc7877e1/tumblr_inline_obdm0rUzOQ1ro20i7_540.jpg"></div>

<div id="credit"><a href="https://octomoosey.tumblr.com/" title="theme by octomoosey"><img src="https://static.tumblr.com/uopakca/cwDo0y64u/octopus-24.png"></a></div>

</html>