Skip to content

Instantly share code, notes, and snippets.

@jsakamoto

jsakamoto/index.html

Created September 10, 2013 23:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jsakamoto/6517175 to your computer and use it in GitHub Desktop.
Save jsakamoto/6517175 to your computer and use it in GitHub Desktop.
Download ZIP
Study of CSS transition animation.
Raw
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="demo">
<div class="text1">This is Text1.</div>
<div class="text2">This is Text2.</div>
</div>
</body>
</html>
Raw
style.css
body {
font-family: Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
}
.demo {
position: relative;
overflow: hidden;
}
.demo div {
padding: 1em;
height: 1em;
}
.text1 {
background-color: #bfe4ff;
}
.text2 {
background-color: #cee9c3;
position: absolute;
left: 0;
width: 100%;
}
.demo .text2 {
top: 3em;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.demo:hover .text2 {
top: 0em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment