Skip to content

Instantly share code, notes, and snippets.

@bhargav2785

bhargav2785/dabblet.css

Created November 1, 2012 18:54
Show Gist options
  • Save bhargav2785/3995707 to your computer and use it in GitHub Desktop.
Save bhargav2785/3995707 to your computer and use it in GitHub Desktop.
Download ZIP
Explaining CSS timing functions
Raw
dabblet.css
/**
* Explaining CSS timing functions
**/
.functions{
position: relative;
width: 50%;
top: 50px;
background: #000;
padding: 20px;
border-radius: 10px;
}
.functions > div{
width: 10%;
height: 40px;
display: block;
margin: 20px 0;
opacity: 0.5;
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, .3) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .3) 50%,
rgba(255, 255, 255, .3)75%, transparent 75%,
transparent 100%
);
background-size: 40px 40px;
border-radius: 5px;
transition-duration: 2s;
}
.transition{
width: 100% !important;
opacity: 1 !important;
transition-property: all;
}
.ease{
background: maroon;
transition-timing-function: ease;
}
.linear{
background: green;
transition-timing-function: linear;
}
.ease-in{
background: #903AB2;
transition-timing-function: ease-in;
}
.ease-out{
background: orange;
transition-timing-function: ease-out;
}
.ease-in-out{
background: #395A95;
transition-timing-function: ease-in-out;
}
Raw
dabblet.html
<!-- better explaind at http://jsfiddle.net/bhargav2785/yPvS8/ -->
<html>
<head>
<script src='///ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script type='javascript'>
(function($){
$('.functions').on({
mouseenter: function(){
$(this).find('.function').addClass('transition');
},
mouseleave: function(){
$(this).find('.function').removeClass('transition');
}
});
})(jQuery);
</script>
</head>
<body>
<div class='functions'>
<div class='default'></div>
<div class='linear'></div>
<div class='ease-in'></div>
<div class='ease-out'></div>
<div class='ease-in-out'></div>
</div>
</body>
</html>
Raw
settings.json
{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment