Skip to content

Instantly share code, notes, and snippets.

@anandprabhakar0507

anandprabhakar0507/index.html

Last active March 14, 2019 22:08
Show Gist options
  • Save anandprabhakar0507/82cef0d5536bccc6d28ad07ce98fe791 to your computer and use it in GitHub Desktop.
Save anandprabhakar0507/82cef0d5536bccc6d28ad07ce98fe791 to your computer and use it in GitHub Desktop.
Download ZIP
Transition
Raw
index.html
<div id="outerspace">
<div class="rocket">
<div><!-- rocket --></div>
.rocket
</div>#outerspace
</div>
Raw
style.css
/* initial state */
#outerspace {
position: relative;
height: 400px;
background: #0c0440 url("https://www.the-art-of-web.com/images/outerspace.jpg");
color: #fff;
}
div.rocket {
position: absolute;
bottom: 10px;
left: 20px;
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
transition: 3s ease-in;
}
div.rocket div {
width: 92px;
height: 215px;
background: url("https://www.the-art-of-web.com/images/rocket.gif") no-repeat;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
}
/* hover final state */
#outerspace:hover div.rocket {
-webkit-transform: translate(540px,-200px);
-moz-transform: translate(540px,-200px);
-o-transform: translate(540px,-200px);
-ms-transform: translate(540px,-200px);
transform: translate(540px,-200px);
}
#outerspace:hover div.rocket div {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(50deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment