40+ CSS Transitions For Entrance & Exit Animations – transition.css

Preview:

Description:

transition.css is a CSS library that gives you the ability to apply 40+ customizable, CSS3 powered entrance/exit transition effects to any element.

CSS Transitions Included:

• Circle: 12 transitions.
• Square: 12 transitions.
• Wipe: 16 transitions.
• Polygon: 6 transitions.

How to use it:

1. Load the transition.css into the document and we’re ready to go.

// All in one
<link rel="stylesheet" href="transition.min.css" />
// More options
<link rel="stylesheet" href="transition.hackpack.min.css" />
// Circle transitions
<link rel="stylesheet" href="transition.circles.min.css" />
// Polygon transitions
<link rel="stylesheet" href="transition.polygons.min.css" />
// Square transitions
<link rel="stylesheet" href="transition.squares.min.css" />
// Wipe transitions
<link rel="stylesheet" href="transition.wipes.min.css" />

2. Apply CIRCLE transitions to elements:

• in:circle:hesitate
• in:circle:center
• in:circle:top-right
• in:circle:top-left
• in:circle:bottom-right
• in:circle:bottom-left
• out:circle:hesitate
• out:circle:center
• out:circle:top-right
• out:circle:top-left
• out:circle:bottom-right
• out:circle:bottom-left

<div transition-style="in:circle:hesitate">
  Animate In
</div>
<div transition-style="out:circle:hesitate">
  Animate Out
</div>

3. Apply square transitions to elements:

• in:square:center
• in:square:hesitate
• in:square:top-right
• in:square:top-left
• in:square:bottom-right
• in:square:bottom-left
• out:square:center
• out:square:hesitate
• out:square:top-right
• out:square:top-left
• out:square:bottom-right
• out:square:bottom-left

<div transition-style="in:square:center">
  Animate In
</div>
<div transition-style="out:square:center">
  Animate Out
</div>

4. Apply wipe transitions to elements:

• in:wipe:right
• in:wipe:left
• in:wipe:up
• in:wipe:down
• in:wipe:top-right
• in:wipe:top-left
• in:wipe:bottom-right
• in:wipe:bottom-left
• out:wipe:right
• out:wipe:left
• out:wipe:up
• out:wipe:down
• out:wipe:top-right
• out:wipe:top-left
• out:wipe:bottom-right
• out:wipe:bottom-left

<div transition-style="in:wipe:right">
  Animate In
</div>
<div transition-style="out:wipe:right">
  Animate Out
</div>

5. Apply polygon transitions to elements:

• in:diamond:center
• in:diamond:hesitate
• in:polygon:opposing-corners
• out:diamond:center
• out:diamond:hesitate
• out:polygon:opposing-corners

<div transition-style="in:diamond:center">
  Animate In
</div>
<div transition-style="out:diamond:center">
  Animate Out
</div>

6. Customize the transitions by overriding the variables as in circles/_vars.css

:root {
  --circle-center-center-out: circle(0%);
  --circle-center-center-in:  circle(125%);
  --circle-hesitate:          circle(40%);
  
  --circle-top-left-out:      circle(0% at top left);
  --circle-top-right-out:     circle(0% at top right);
  --circle-bottom-right-out:  circle(0% at bottom right);
  --circle-bottom-left-out:   circle(0% at bottom left);
  
  --circle-top-left-in:       circle(150% at top left);
  --circle-top-right-in:      circle(150% at top right);
  --circle-bottom-right-in:   circle(150% at bottom right);
  --circle-bottom-left-in:    circle(150% at bottom left);
}