CSS Animations

Two Types of animation

@Keyfrees

Create a keyframes function:

 
@keyframes animationLabel {
0% {
opacity: 0;
transform: translateX(-100px); // this element will be reposition 100px to the left
}
100% {
opacity: 1;
transform: translate(0);
}
 
Use the following CSS tags to call the animation

.movingElement {
animation-name: moveInLeft;
animation-delay: 3s
animation-duration: 1s
animation-iteration-count: 3;
animation-timing-function: ease | ease-in | ease-out | ...
backface-visibility: hidden;
animation-fill-mode: backwards; //will automatically apply keyframe 0 before animation starts
}

Refer to online documentation for all the animation properties.

If animation is shakey use backface-visibility property on element.

Transition Property

button:hover {
 transform: translateY(-3px);
 box-shadow: 0 10px 20px rgba(0,0,0,.2);
}

button:active {
 transform: translateY(-1px);
 box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

button:link, button:visited {
 transition: all .2s;
}

transition:  property | duration;