Skip to content

Instantly share code, notes, and snippets.

@tango238

tango238/cssanimation.html

Created September 6, 2011 19:04
Show Gist options
  • Save tango238/1198642 to your computer and use it in GitHub Desktop.
Save tango238/1198642 to your computer and use it in GitHub Desktop.
Download ZIP
[CSS3] Animation
Raw
cssanimation.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 Animation</title>
<style>
body {
font-size: 20px;
}
.obj {
position: relative;
left: 0px;
-webkit-transition-property: left;
-moz-transition-property: left;
-o-transition-property: left;
transition-property: left;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
.ease {
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
}
.linear {
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
}
.ease-in {
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.ease-out {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.ease-in-out {
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.custom {
-webkit-transition-timing-function: cubic-bezier(0.0, 1.0, 1.0, 0.0);
-moz-transition-timing-function: cubic-bezier(0.0, 1.0, 1.0, 0.0);
-o-transition-timing-function: cubic-bezier(0.0, 1.0, 1.0, 0.0);
transition-timing-function: cubic-bezier(0.0, 1.0, 1.0, 0.0);
}
.wrapper:hover .obj {
left: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div><span class="obj ease">CSS3 Animation(ease)</span></div>
</div>
<div class="wrapper">
<div><span class="obj linear">CSS3 Animation(linear)</span></div>
</div>
<div class="wrapper">
<div><span class="obj ease-in">CSS3 Animation(ease-in)</span></div>
</div>
<div class="wrapper">
<div><span class="obj ease-out">CSS3 Animation(ease-out)</span></div>
</div>
<div class="wrapper">
<div><span class="obj ease-in-out">CSS3 Animation(ease-in-out)</span></div>
</div>
<div class="wrapper">
<div><span class="obj custom">CSS3 Animation(customize)</span></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment