Animation and Transitions

Transition template

Transition all properties

                    .element {
                      transition: 1s all;
                      
                      /* Add other properties such as transform, margin, etc. */
                    }
                

Transitions

Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

transition-duration:

0.7s;

1s;

2s;

3s;

transition-timing-function:

linear;

ease;

ease-in;

ease-out;

ease-in-out;

steps(4);

steps(10);

step-start;

step-end;

transition-delay:

0s;

0.3s;

0.7s;

1.5s;

transition-property:

Transition a specific property (other properties jump to final state).

A
all;

A
color;

A
margin;

A
background;

Transition examples

Card

A
B

                        HTML
                        <div class="ex-card">
                          <div class="card">
                            <div class="card-front">A</div>
                            <div class="card-back">B</div>
                          </div>
                        </div>
                    
                        CSS
                        .ex-card:hover .card {
                          transform: rotateY(180deg) translateX(100%);
                        }
                        
                        .ex-card {
                          perspective: 300px;
                        }
                        
                        .card {
                          transition: 0.7s;
                          transform-style: preserve-3d;
                          transform-origin: right;
                          position: relative;
                        }
                        
                        .card-front, .card-back {
                          backface-visibility: hidden;
                          position: absolute;
                        }
                        
                        .card-back {
                          transform: rotateY(180deg) translateZ(1px);
                        }
                    

Tooltip

HTML <div class="ex-tooltip"> <div class="box biggest"></div> <p class="tooltip">This is a tooltip message.</p> </div>

CSS .tooltip { background-color: transparent; border-radius: 8px; color: transparent; font-size: 0.7em; position: absolute; transition: 0.5s; padding: 0.5em 1em; margin-top: 0; z-index: 1000; } .ex-tooltip:hover > .tooltip { background-color: yellow; color: black; font-size: 1.2em; }

Translation

                        CSS
                        .container .box {
                          transition: 1s all;
                        }
                        
                        .container:hover .box {
                          transform: translateX(200px);
                        }
                    

Translation

CSS animation

See MDN on CSS animations. Also check out GreenSock.

animation-duration:

0.7s;

1s;

2s;

3s;

animation-direction:

normal;

alternate;

reverse;

alternate-reverse;

animation-iteration-count:

1;

2;

infinite;

animation-timing-function:

linear;

ease;

ease-in;

ease-out;

ease-in-out;

steps(4);

steps(10);

step-start;

step-end;

animation-fill-mode:

Initial state Delay state 1s Animate 1s End state

A
none;

A
forwards;

A
backwards;

A
both;

Animation Keyframes

Slide right

@keyframes slideright {    from {        margin-left: 0%;    }    to {        margin-left: 80%;    }}

Set background color

@keyframes showbackground {    from {        background-color: blue;    }    to {        background-color: red;    }}

Grow size

@keyframes growsize {    from {        height: 1em;        width: 1em;    }    to {        height: 4em;        width: 4em;    }}

Cursor

@keyframes cursor {    50% {        border-color: transparent;    }}

Using animate.css

Attention

                            bounce
                        
class="animated bounce"

                            flash
                        
class="animated flash"

                            pulse
                        
class="animated pulse"

                            rubberBand
                        
class="animated rubberBand"

                            shake
                        
class="animated shake"

                            headShake
                        
class="animated headShake"

                            swing
                        
class="animated swing"

                            tada
                        
class="animated tada"

                            wobble
                        
class="animated wobble"

                            jello
                        
class="animated jello"

Bouncing entrances

                        bounceIn
                    
class="animated bounceIn"

                        bounceInDown
                    
class="animated bounceInDown"

                        bounceInLeft
                    
class="animated bounceInLeft"

                        bounceInRight
                    
class="animated bounceInRight"

                        bounceInUp
                    
class="animated bounceInUp"

Bouncing exits

                        bounceOut
                    
class="animated bounceOut"

                        bounceOutDown
                    
class="animated bounceOutDown"

                        bounceOutLeft
                    
class="animated bounceOutLeft"

                        bounceOutRight
                    
class="animated bounceOutRight"

                        bounceOutUp
                    
class="animated bounceOutUp"

Fading entrances

                            fadeIn
                        
class="animated fadeIn"

                            fadeInDown
                        
class="animated fadeInDown"

                            fadeInDownBig
                        
class="animated fadeInDownBig"

                            fadeInLeft
                        
class="animated fadeInLeft"

                            fadeInLeftBig
                        
class="animated fadeInLeftBig"

                            fadeInRight
                        
class="animated fadeInRight"

                            fadeInRightBig
                        
class="animated fadeInRightBig"

                            fadeInUp
                        
class="animated fadeInUp"

                            fadeInUpBig
                        
class="animated fadeInUpBig"

Fading exits

                            fadeOut
                        
class="animated fadeOut"

                            fadeOutDown
                        
class="animated fadeOutDown"

                            fadeOutDownBig
                        
class="animated fadeOutDownBig"

                            fadeOutLeft
                        
class="animated fadeOutLeft"

                            fadeOutLeftBig
                        
class="animated fadeOutLeftBig"

                            fadeOutRight
                        
class="animated fadeOutRight"

                            fadeOutRightBig
                        
class="animated fadeOutRightBig"

                            fadeOutUp
                        
class="animated fadeOutUp"

                            fadeOutUpBig
                        
class="animated fadeOutUpBig"

Flips

                        flipInX
                    
class="animated flipInX"

                        flipInY
                    
class="animated flipInY"

                        flipOutX
                    
class="animated flipOutX"

                        flipOutY
                    
class="animated flipOutY"

Lightspeed

                        lightSpeedIn
                    
class="animated lightSpeedIn"

                        lightSpeedOut
                    
class="animated lightSpeedOut"

Rotating entrances

                        rotateIn
                    
class="animated rotateIn"

                        rotateInDownLeft
                    
class="animated rotateInDownLeft"

                        rotateInDownRight
                    
class="animated rotateInDownRight"

                        rotateInUpLeft
                    
class="animated rotateInUpLeft"

                        rotateInUpRight
                    
class="animated rotateInUpRight"

Rotating exits

                        rotateOut
                    
class="animated rotateOut"

                        rotateOutDownLeft
                    
class="animated rotateOutDownLeft"

                        rotateOutDownRight
                    
class="animated rotateOutDownRight"

                        rotateOutUpLeft
                    
class="animated rotateOutUpLeft"

                        rotateOutUpRight
                    
class="animated rotateOutUpRight"

Zoom entrances

                        zoomIn
                    
class="animated zoomIn"

                        zoomInDown
                    
class="animated zoomInDown"

                        zoomInLeft
                    
class="animated zoomInLeft"

                        zoomInRight
                    
class="animated zoomInRight"

                        zoomInUp
                    
class="animated zoomInUp"

Zoom exits

                        zoomOut
                    
class="animated zoomOut"

                        zoomOutDown
                    
class="animated zoomOutDown"

                        zoomOutLeft
                    
class="animated zoomOutLeft"

                        zoomOutRight
                    
class="animated zoomOutRight"

                        zoomOutUp
                    
class="animated zoomOutUp"

Slide entrances

                        slideInDown
                    
class="animated slideInDown"

                        slideInLeft
                    
class="animated slideInLeft"

                        slideInRight
                    
class="animated slideInRight"

                        slideInUp
                    
class="animated slideInUp"

Slide exits

                        slideOutDown
                    
class="animated slideOutDown"

                        slideOutLeft
                    
class="animated slideOutLeft"

                        slideOutRight
                    
class="animated slideOutRight"

                        slideOutUp
                    
class="animated slideOutUp"

Specials

                        hinge
                    
class="animated hinge"

                        jackInTheBox
                    
class="animated jackInTheBox"

                        rollIn
                    
class="animated rollIn"

                        rollOut
                    
class="animated rollOut"