CSS3 allows HTML elements to be animated without JavaScript or Flash. Keyframes are used to define the stages and styles of an animation over its duration. CSS properties like animation-name, animation-duration, and animation-timing-function can be used to control animations, and animations can be defined using a shorthand animation property. Browser support for CSS animations varies.

1. CSS3 Animations
Ombu Labs, January 2016

2. CSS3 animations allows animation of most HTML elements
without using JavaScript or Flash!
CSS3 Animations

3. @keyframes
define the stages and styles of the animation.

4. !
@keyframes color {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
!
@-webkit-keyframes color{/* styles */ }
!
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: color;
-webkit-animation-name: color;
animation-duration: 4s;
-webkit-animation-duration: 4s;
}

5. !
Animation Property Shorthand
!
animation: [animation-name] [animation-duration]
[animation-timing-function] [animation-delay]
[animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];
For multiple animations
!
.div {
animation: slideIn 2s, rotate 1.75s;
}

6. Browser support

8. THANK YOU!
!
questions?