Skip to content

Instantly share code, notes, and snippets.

@netsi1964

netsi1964/CSS3 Transition.html

Created May 6, 2012 22:08
Show Gist options
  • Save netsi1964/2624787 to your computer and use it in GitHub Desktop.
Save netsi1964/2624787 to your computer and use it in GitHub Desktop.
Download ZIP
Example of use of CSS3 Transition
Raw
CSS3 Transition.html
<!doctype html>
<html lang="en">
<head>
<title>CSS3 Transition</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
body {font-size: 100%; font-family: tahoma, sans-serif;}
.example {height: 200px;}
.box
{
/* Opera */
width: 300px;
height: 100px;
background-color: rgb(40,255,255);
padding: 20px;
font-size: 80%;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
-webkit-transition: all 2s;
-moz-transition: all 2s;
-o-transition: all 2s;
-ms-transition: all 2s;
transition: all 2s;
border: solid 3px rgba(0,0,0,.5)
}
@keyframes "width" {
0% {
width: 310px;
}
25% {
width: 390px;
}
50% {
width: 490px;
}
100% {
width: 310px;
}
}
@-moz-keyframes width {
0% {
width: 310px;
}
25% {
width: 390px;
}
50% {
width: 490px;
}
100% {
width: 310px;
}
}
@-webkit-keyframes "width" {
0% {
width: 310px;
}
25% {
width: 390px;
}
50% {
width: 490px;
}
100% {
width: 310px;
}
}
@-ms-keyframes "width" {
0% {
width: 310px;
}
25% {
width: 390px;
}
50% {
width: 490px;
}
100% {
width: 310px;
}
}
@-o-keyframes "width" {
0% {
width: 310px;
}
25% {
width: 390px;
}
50% {
width: 490px;
}
100% {
width: 310px;
}
}
.keyFrame {
-webkit-animation: width 5s;
-moz-animation: width 5s;
-ms-animation: width 5s;
-o-animation: width 5s;
animation: width 5s;
}
.size {
width: 500px;
height: 110px;
}
.color {
background-color: rgba(0,0,0,.4);
color: white;
}
.borderRadius {
-webkit-border-radius: 30px 20px;
-moz-border-radius: 30px 20px;
border-radius: 30px 20px;
}
.boxShadow {
-webkit-box-shadow: 12px 9px 10px 8px rgba(0, 0, 200, 0.2);
-moz-box-shadow: 12px 9px 10px 8px rgba(0, 0, 200, 0.2);
box-shadow: 12px 9px 10px 8px rgba(0, 0, 200, 0.2);
}
.fontSize {
font-size: 14pt;
}
.opacity {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
button {
-webkit-box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
-webkit-transition: all .13s;
-moz-transition: all .13s;
-o-transition: all .13s;
-ms-transition: all .13s;
transition: all .13s;
padding: 10px;
margin-right: 10px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
zoom: 70%;
overflow: hidden;
}
.active, button:hover {
-webkit-box-shadow: -1px 1px 2px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -1px 1px 2px 1px rgba(0, 0, 0, 0.1);
box-shadow: -1px 1px 2px 1px rgba(0, 0, 0, 0.1);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(.90);
-moz-transform: scale(.90);
-o-transform: scale(.90);
-ms-transform: scale(.90);
transform: scale(.90);
}
button div {
float: left;
height: 10px;
margin-right: 9px;
margin-left: -26px;
padding: 3px;
width: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: rgba(255,0,0,.75);
border: solid 2px rgba(0,0,0,.6);
}
button.active div, button:hover div {
background-color: rgba(3, 225, 3, 0.7);
border: 2px solid rgba(0, 0, 0, 0.8);
box-shadow: 0 0 3px 8px rgba(255, 255, 255, 0.6) inset;
}
button:hover div {
background-color: rgba(255,255,0,.7);
}
.classNames {margin-top: 10px;}
</style>
</head>
<body>
<header role="banner">
<h1>CSS3 Transition</h1>
</header>
<section id="main" role="main">
<div class="example">
<div class="box">
This box has CSS3 tranition applied. Any transition will last 2 seconds
<br />
<span class="classNames"></span>
</div>
</div>
<button data-selector=".box" data-class="color" class="toggleClass">
<div></div>
color
</button>
<button data-selector=".box" data-class="size" class="toggleClass">
<div></div>
size
</button>
<button data-selector=".box" data-class="borderRadius" class="toggleClass">
<div></div>
border-radius
</button>
<button data-selector=".box" data-class="boxShadow" class="toggleClass">
<div></div>
boxShadow
</button>
<button data-selector=".box" data-class="opacity" class="toggleClass">
<div></div>
opacity
</button>
<button data-selector=".box" data-class="keyFrame" class="toggleClass">
<div></div>
keyFrame
</button>
<button data-selector=".box" data-class="fontSize" class="toggleClass">
<div></div>
font-size
</button>
</section>
<footer role="content info"></footer>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
$('.toggleClass').on('click', function() {
var $this = $(this).toggleClass('active');
var sSelector = $this.data('selector');
var sClass = $this.data('class');
$(sSelector).toggleClass(sClass).find('.classNames').text(('['+$(sSelector).attr('class').replace(sSelector.replace('.', ''), '').split(' ').join('] [')+']').replace('[]', ''));
if (!!console) console.log('On elements "'+sSelector+'" toggled class "'+sClass+'"');
});
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment