A Pen by Jeremy Paris.

Animation-Practice.markdown

Animation Practice

Just some keyframe animation practice. No javascript allowed.

A Pen by Jeremy Paris on CodePen.

License.

index.html

<div class="idea">
  <h1>Bouncing Ball</h1>
  <div id="platform">
    <div id="ball"></div>
  </div>
</div>

<div class="idea">
  <h1>Sprite Animation</h1>
  <div id="crab">
    <img src="http://itsasiprod.com/images/crab-sprite.png" />
    <div class="animated"></div>
    <p><a href="http://www.keywordpicture.com/keyword/robot%20sprites/" target="_blank">Original Sprite</a></p>
    <p><a href="http://jsfiddle.net/simurai/CGmCe/light/" target="_blank">Inspired By simurai</a></p>
  </div>
</div>

style.scss

@import "compass";
body{
  margin: 0;
  padding: 20px;
  color: #333333;
}

.idea {
  float: left;
  display: block;
  margin: 3em;
}

#platform {
  border: 2px solid #fff;
  border-bottom: 2px solid #cdcdcd;
  height: 8em;
  display: inline-block;
}

#ball{
  display: block;
  width: 3em;
  height: 3em;
  border: 3px solid #333333;
  background-color: #f63f63;
  @include border-radius(1.8em);
  
  @include animation(bouncing 1s ease-in-out infinite);
}

@-webkit-keyframes bouncing {
  0%,100% {  margin-top: 0; @include border-bottom-radius(1.8em); height: 3em;  }
  50% {  margin-top: 5em; @include border-bottom-radius(1.4em); height: 2.75em;  }
}
@-moz-keyframes bouncing {
  0%,100% {  margin-top: 0; @include border-bottom-radius(1.8em); height: 3em;  }
  50% {  margin-top: 5em; @include border-bottom-radius(1.4em); height: 2.75em;  }
}
@-o-keyframes bouncing {
  0%,100% {  margin-top: 0; @include border-bottom-radius(1.8em); height: 3em;  }
  50% {  margin-top: 5em; @include border-bottom-radius(1.4em); height: 2.75em;  }
}
@keyframes bouncing {
  0%,100% {  margin-top: 0; @include border-bottom-radius(1.8em); height: 3em;  }
  50% {  margin-top: 5em; @include border-bottom-radius(1.4em); height: 2.75em;  }
}

#crab {
  float: left;
  display: inline-block;
  .animated {
    margin: 1em 0;
    background-image: url(http://itsasiprod.com/images/crab-sprite.png);
    width: 42px;
    height: 35px;
    @include animation(crabidle .5s steps(5) infinite);
  }
}

@-webkit-keyframes crabidle {
  from { background-position: 0px }
  to { background-position: -210px; }
}
@-moz-keyframes crabidle {
  from { background-position: 0px }
  to { background-position: -210px; }
}
@-o-keyframes crabidle {
  from { background-position: 0px }
  to { background-position: -210px; }
}
@keyframes crabidle {
  from { background-position: 0px }
  to { background-position: -210px; }
}