Created
July 8, 2013 02:35
-
-
Save iheanyi/5945870 to your computer and use it in GitHub Desktop.
Flying animation snippet for Jeff, this is the CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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