Dustin Tauer
dustin@easelsolutions.com
@dtauer
https://github.com/dtauer/hdc2015
Lots and lots of resources
https://codepen.io
#some-button{
width: 100px;
height: 80px;
transition: width 1s;
}
#some-button:hover{
width: 120px;
}
h1 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
h1 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
0% {
margin-left: 100%;
width: 300%;
}
100% {
margin-left: 0%;
width: 100%;
}
}
function animate() {
// Animation code goes e
if(keepAnimating){
setTimeout(animate, 100); //100 ms
}
else{
//You're done!
}
}
animate();
function animate() {
// Animation code goes e
if(keepAnimating){
requestAnimationFrame(animate);
}
else{
//You're done!
}
}
animate();
https://greensock.com
https://ihatetomatoes.net/greensock-cheat-sheet/
dustin@easelsolutions.com
@dtauer
https://developer.mozilla.org/en-US/docs/Web/CSS/transition
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
https://greensock.com
https://twitter.com/vlh
https://twitter.com/rachelnabors
https://codepen.io