JS.Chi CSS Animations

CSS Animations

Justin Meyer
Bitovi
@justinbmeyer

JS Animations
$('#element').css({
opacity : 0
}).animate({
opacity : 1
}, 1000, function() {
console.log('Animation done');
});

CSS Transition
#mainContent {
background-color: #CC0000;
transition:
background-color .5s ease-in;
}
#mainContent:hover {
background-color: #000000;
}

CSS Animation
#mainContent {
background-color: #CC0000;
}
@keyframes darken {
to {
background-color: #000000;
}
}
#mainContent:hover {
animation-name: darken;
animation-duration: 0.5s;
}

Example: HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id='hello'>Hello World</h1>
</body>
</html>

Example: CSS
<style>
@keyframes amaze {
from {
font-size: 20px;
color: green;
}
50% { color: yellow; }
to {
font-size: 40px;
color: red;
}
}
</style>

Example: JS
<script>
var hello = document.getElementById('hello');

hello.addEventListener("click",function(){
hello.style.animationName = "amaze";
hello.style.animationDuration = "3s"
}, false );

hello.addEventListener('animationend', function(){
hello.style.animationName = '';
}, false);
</script>

Working CSS
@-moz-keyframes amaze {
from {
font-size: 20px;
color: green;
}
50% { color: yellow; }
to {
font-size: 40px;
color: red;
}
}
@-webkit-keyframes amaze {
from {
font-size: 20px;
color: green;
}
to {
font-size: 40px;
color: red;

Working JS
var hello = document.getElementById('hello');

hello.addEventListener("click", function(){
var prefix = "webkitAnimation" in hello.style ?
"webkit" : "Moz";

hello.style[prefix+"AnimationName"] = "amaze";
hello.style[prefix+"AnimationDuration"] = "4s"

}, false);

if( 'WebkitTransition' in hello.style){
hello.addEventListener('webkitAnimationEnd', function(){
hello.style.webkitAnimationName = '';
}, false);
} else {
hello.addEventListener('animationend', function(){
hello.style.MozAnimationName = '';
}, false);
}

@keyframes
@keyframes ANIMATION_NAME {
from { … }
NUM% { … }
to { … }
}

Animation Properties
h1 {
animation-name: amaze;
animation-duration: 3s;
}

hello.style.animationName= "amaze"
hello.style.animationDuration= "3s"

h1 {
animation-name: amaze, dazzle;
animation-duration: 3s, 500ms;
}

h1 {
animation-name: amaze;
animation-delay: 3s;
animation-duration: 2s;
animation-iteration-count: 2;
animation-play-state: running;
animation-timing-function: linear;
animation-fill-mode: forwards;
}

Issues
• Tricky to replay
• CSS Transitions
• Vendor Prefixes
• Performance
• Support (IE 9)

jQuery++ animation
• http://jquerypp.com/#animate

$('#element').css({
opacity : 0
}).animate({
opacity : 1
}, 1000, function() {
console.log('Animation done');
});

JS.Chi CSS Animations

More Related Content

What's hot

Viewers also liked

Similar to JS.Chi CSS Animations

Recently uploaded

JS.Chi CSS Animations

Editor's Notes