oli

/* CSS Animations timing functions edge cases */
/* steps, “bounce”, different units (px → %) */
.box {
  width: 124px;
  height: 32px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;
  padding: 3px;
}

oli

/* WebKit FOUC when animation-play-state:paused→running */
/* that’s flash of unanimated content, or the element’s default state */ 

@keyframes runaway {
  0% {left: 5%;}
  to {left: 80%;}
}
.wrapper:hover .box {animation: runaway 2s ease-in-out infinite
 alternate;}
.box:hover {animation-play-state: paused;}

oli

/* Faux inline columns in <pre> */
span {
  outline: 2px solid #ddd;
  padding: 0 0 2.5em;
  background-color: #ddd;
}

oli

/* Animations on inline elements */
/* for now, it’s safer to use inline-block instead */
/* ref: http://mattwilcox.net/archive/entry/id/1056/ */
.animate:hover, .animate:focus {animation : my-animation 2s;}
@keyframes my-animation {
  0%   { opacity: 1; transform: scale(1); }
  20%  { opacity: .8; transform: scale(1.1); }
  40%  { opacity: 1; transform: scale(1); }
  60%  { opacity: .8; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }

oli

/* Transitions work on inline elements */
/* ref: http://dabblet.com/gist/1652813 (animations test)
        http://jsfiddle.net/boblet/HY47L/ (transforms test) and
        https://bugs.webkit.org/show_bug.cgi?id=58965 (transforms bug) */
.transition {transition: all 1s;}
.transition:hover, .transition:focus {
  background-color: #eec;
  outline: 1px solid #eec;
}
.inline-block {display: inline-block;}

oli

/* Animating and transitioning an element */

.transition {transition: all 2s;}
.transition:hover {
  background-color: #777;
  animation: anim 3s;
}
@keyframes anim {0% {color: #ccc;}}

.box {

oli

/* Animation without 0% or 100% keyframes */
/* @estellevw sez this can sometimes be buggy */
/* ref: https://twitter.com/estellevw/status/40528526541066240 */
@keyframes middling {50% {background-color: #777;}}
div {
  width: 144px;
  height: 48px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;

oli

/* Applying two animations */
/* ref: http://css-tricks.com/restart-css-animation/ */
/* (a little) more info: http://dabblet.com/gist/1656494 */
img {animation: spinning-logocat 2s;}
img:active {animation: spin-dat-cat 2s;}
@keyframes spinning-logocat {50%{transform:rotateY(180deg);}}
@keyframes spin-dat-cat {50%{transform:rotateY(180deg);}}

oli

/* Faking animating to/from auto on width/height with max-width/max-height */
/* any large value will do */
/* props to @ryanseddon http://ryanseddon.github.com/SUX/ and @leaverou */

/* For Figure 12-17 in “Beginning HTML5 and CSS3”, see http://dabblet.com/gist/4187129 */
.wrapper {overflow: auto;}
.dialog, img {
  transition: all 2s;
  overflow: hidden;
}

oli

/* Animating height via padding? */
/* http://jsfiddle.net/catharsis/n5XfG/17/ */ 
/* via http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto */

div {
    overflow:hidden;
    background:#000;
    color:#fff;
    height:0;
    padding: 0 18px;