Skip to content

Instantly share code, notes, and snippets.

@cybear

cybear/css-transition-demo.html

Created January 17, 2011 12:29
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 cybear/782796 to your computer and use it in GitHub Desktop.
Save cybear/782796 to your computer and use it in GitHub Desktop.
Download ZIP
Short demo of css transition of width
Raw
css-transition-demo.html
<html>
<head>
<style type="text/css">
#graphline {
display:block;
width:10px;
height:200px;
background-color:#000;
}
#graphline {
-webkit-transition:all 500ms;
}
#graphline.animate {width:500px;}
</style>
</head>
<body>
<button onclick="document.getElementById('graphline').className='animate';">Animate!</button>
<button onclick="document.getElementById('graphline').className='';">Reset</button>
<div id="graphline"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment