Skip to content

Instantly share code, notes, and snippets.

@iheanyi
Created July 8, 2013 02:35
Show Gist options
  • Save iheanyi/5945870 to your computer and use it in GitHub Desktop.
Save iheanyi/5945870 to your computer and use it in GitHub Desktop.
Flying animation snippet for Jeff, this is the CSS
/* Preferably make this your container */
.target {
-webkit-animation: fly-in-from-left .5s .5s ease both;
-moz-animation: fly-in-from-left .5s 1s ease both;
-o-animation: fly-in-from-left .5s 1s ease both;
animation: fly-in-from-left .5s .5s ease both;
-webkit-transform-origin: top left;
transform-origin:top left;
}
@-webkit-keyframes fly-in-from-left {
from {
-webkit-transform:translateY(15rem) rotate(15deg);
opacity:0;
}
}
@-moz-keyframes fly-in-from-left {
from {
-moz-transform:translateY(15rem) rotate(15deg);
opacity:0;
}
}
@-o-keyframes fly-in-from-left {
from {
-o-transform:translateY(15rem) rotate(15deg);
opacity:0;
}
}
@keyframes fly-in-from-left {
from {
transform:translateY(15rem) rotate(15deg);
opacity:0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment