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

Category: Animation , CSS & CSS3 , Recommended | January 22, 2021
Author: argyleink
Views Total: 1,004 views
Official Page: Go to website
Last Update: January 22, 2021
License: MIT

Preview:

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

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);
}

You Might Be Interested In:


Leave a Reply