Transition.css

60+ handcrafted css animation dedicated for transition


Download NowGithub Repo Make GIF

and it's small, only 6KB gzipped!

CSS Transition Effect Pack

simple to use by just adding a CSS class from transition.css

Click Them to Apply on Popups!
blur-in
blur-out
bounce-alt-in
bounce-alt-out
bounce-in
bounce-out
fade-in
fade-out
fall-btt-in
fall-ltr-in
fall-rtl-in
fall-ttb-in
flip-h-in
flip-h-out
flip-v-in
flip-v-out
float-btt-in
float-btt-out
float-ltr-in
float-ltr-out
float-rtl-in
float-rtl-out
float-ttb-in
float-ttb-out
grow-btt-in
grow-btt-out
grow-ltr-in
grow-ltr-out
grow-rtl-in
grow-rtl-out
grow-ttb-in
grow-ttb-out
jump-alt-in
jump-alt-out
jump-in
jump-out
power-off
power-on
rush-btt-in
rush-ltr-in
rush-rtl-in
rush-ttb-in
slide-btt-in
slide-btt-out
slide-ltr-in
slide-ltr-out
slide-rtl-in
slide-rtl-out
slide-ttb-in
slide-ttb-out
spring-btt-in
spring-ltr-in
spring-rtl-in
spring-ttb-in
throw-btt-in
throw-ltr-in
throw-rtl-in
throw-ttb-in
vortex-alt-in
vortex-alt-out
vortex-in
vortex-out
zoom-in
zoom-out

Download

transition.css is available for downloading in its Github Repo. Or, you can get it directly here:

You could also use transition.css directly via CDN like jsDelivr:

Or, you can download it via npm:

npm i @loadingio/transition.css

Usage

1. Include transition.css:

<link rel="stylesheet" type="text/css" href="transition.css"/>

2. Pick an transitional animation from the list above, say, bounce-in. Next, prefix it with ld- plus another ld class as class name and add it on the target HTML element:

<img src="f.svg" class="ld ld-bounce-in" />

Run Again

You probably didn't see the transition effect of the above example unless you click the 'Run Again' button, this is because the transition fired only once when you open the page. To loop the transition indefinitely, you can set animation-iteration-count to infinite, or simply use infinite class provided by transition.css:

<img src="f.svg" class="ld ld-bounce-in infinite" />

Advanced Control

You can control the animation speed, animation direction and animation play state of transitions from Transition.css in the same way of configuring in loading.css with loading.css included. Please refer to loading.css documentation for more details.

Browser Compatibility

Transition.css uses CSS Animation and Transform 2D:

Comments

Any questions or suggestions? Feel free to leave your comment below :)


Hello, Transition.css

transition.css could also be used on popup dialogs.


You can config ldCover to popup dialogs with transition effect with animation option.

For example, to apply a blur in animation, simpliy initialize the ldCover object with animation option set to "ld ld-blur-in".

For more information about ldCover, please check ldCover documentation.


Close This Popup
Things don't work?
It might be AdBlock. Why?
By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.
Details
OK

Bring Your Work Alive

supercharge with unlimited animations, advanced functionalities and support us to make more great stuff!

Free Plan
FREE

  • Access to Free Resources
  • 10 Free Assets
    Save your design as assets online
    for sharing and future use.
Sign Up
Current Plan
Stop Future Billing
Billing Page
 
 
Monthly Plan
9.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
Subscribe
Subscribe
Current Plan
 
7 days refund guarantee
cancel anytime
Yearly Plan
39.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
  • Priority Support
Subscribe
Subscribe
Upgrade
Current Plan
7 days refund guarantee
cancel anytime

Monthly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »

Yearly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »





Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.

Payment Complete

Thank you for purchasing this item!

We have confirmed your purchase and the transaction is complete. Your purchase history can be found in your billing page where you can also find invoice for this payment.

Continue to Download

Subscribed.

Thank you for subscribing our service!

We have confirmed your subscription and the first transaction has been made. You can find your purchase history in your billing page where you can also find invoice for this payment.

Subscription will be automatically renewed at the end of each billing period. You can cancel it anytime in the billing page.


Let's Proceed
You are downloading

Icons

/ icon
generated with loading.io's Pro features. Unlock Pro Features by:
You are downloading

Icons

/ icon
released under Loading.io FREE License. download with:
You are downloading BY Licensed

Icons

/ icon
which can be used for free with attribution. how to attribute?
Free Download
Free Download with Attribution
.. or pay to remove attribution
for unlimited downloads & features
9.99USD
monthly
39.99USD
annually
only for this item
1.99USD
2 days
Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.




Pay Per Item

paid once

includes
  • 2 days pass to download from editor
  • Full features to this item
  • Lifetime licensed, attribution free
  •  Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Monthly Plan

auto renewal

includes
  • whole site unlimited access
  • fully licensed
  • full features
  • Up to 200 Assets
  • priority support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Yearly Plan

auto renewal

includes
  • Unlimited Access
  • Fully Licensed
  • Full Features
  • Up to 200 Assets
  • Priority Support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Free with Attribution


you can ...
  • Free to Use with Attribution
  • Pay to Remove Attribution
  • How to Attribute ...


more about pricing »

Free Download


you can ...
  • Free for Any Purpose
  • No Need to Attribute or Pay


more about pricing »

loading.io

Loading.io is brought to you by:
PlotDB Ltd. / 見聞科技有限公司 VAT No. 52518929

Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.

Customer Service: [email protected]
LOADING.IO