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"