Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

HTML5 Logo
CSS3 Transitions

Eric Kizaki

“CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.”
.railcar {
height: 100px;
width: 200px;
background-color: red;
transition-property: width, background-color;
transition-duration: 2s, 4s;
transition-timing-function: linear;
transition-delay: 0s;
.railcar:hover {
width: 600px;
background-color: green;
Animatable properties
background border bottom clip color font-size font-weight height left letter-spacing line-height margin max-width min-height min-width opacity outline padding right text-indent text-shadow top vertical-align visibility width word-spacing z-index
*also SVG ones
*You will use JavaScript
caniuse jQuery Animate Enhanced
"While authors can use transitions to create dynamically changing content, dynamically changing content can lead to seizures in some users. For information on how to avoid content that can lead to seizures, see Guideline 2.3: Seizures: Do not design content in a way that is known to cause seizures ([WCAG20]).""

Use a spacebar or arrow keys to navigate