About

This library offers a collection of different CSS-powered transitions.

The documentation can be found on GitHub.

This library currently has 96 GitHub-stars!

Basic usage

The only file you will need is sunset.min.css.

Just download it and save it in the CSS-directory of your project.

After that, you can include sunset.css into your files like this:

<link rel="stylesheet" href="path/to/your/directory/sunset.min.css" media="all" />

Alternatively, you can refer to sunset.css directly in a stylesheet:

@import url("path/to/your/directory/sunset.min.css");

The last step is to go to Effects and search for the one you like. If you made your decision, you can just clickon the effect-field, which will copy the needed classnames to your clipboard.

For example, for the hyperlinks on this page, I chose the second "Border-bottom"-effect, so the code for my links looks like this:

<a href="https://sunsetcss.com" class="pwa-element pwa-borders-borderBottom-easeInFromLeft-easeOutToRight">sunsetcss.com</a>

Effects

Border transitions

Border-bottom

Hover me! Hover me!Hover me!Hover me!Hover me!Hover me! Hover me!
Customization

Border-top

Hover me!Hover me!Hover me!Hover me!Hover me!Hover me! Hover me!
Customization

Border clockwise

Hover me!Hover me!Hover me!Hover me!
Customization

Border counter clockwise

Hover me!Hover me!Hover me!Hover me!
Customization

Other border-effects

Hover me!Hover me!Hover me!Hover me! Hover me!
Customization

Background effects

Ease in and out to same direction

Hover me!Hover me!Hover me!Hover me!
Customization

Ease in and out to opposite direction

Hover me!Hover me!Hover me!Hover me!
Customization

Bounce in

Hover me!Hover me!Hover me!Hover me!
Customization

From center

Hover me!Hover me!Hover me!Hover me!
Customization

To center

Hover me! Hover me! Hover me! Hover me!
Customization

Other

Hover me!
Customization

From corner

Hover me! Hover me! Hover me! Hover me!
Customization

2D-transitions

Grow & Shrink

Hover me! Hover me!
Customization

Pulse

Hover me! Hover me! Hover me! Hover me!
Customization

Move

Hover me! Hover me! Hover me! Hover me!
Customization

Rotate

Hover me! Hover me!
Customization

Skew

Hover me! Hover me!
Customization

Wobble

Hover me! Hover me! Hover me! Hover me!
Customization

Shadow effects

Hover me! Hover me! Hover me! Hover me! Hover me! Hover me! Hover me! Hover me! Hover me!
Customization

Image transitions

For a guide on how to use these effects, please see the documentation.


Use this classname:
pwa-images-1

Use this classname:
pwa-images-2

Use this classname:
pwa-images-3

Use this classname:
pwa-images-4

Use this classname:
pwa-images-5

Use this classname:
pwa-images-6

Use this classname:
pwa-images-7

Use this classname:
pwa-images-8

Use this classname:
pwa-images-9

Use this classname:
pwa-images-10

Use this classname:
pwa-images-11

Use this classname:
pwa-images-12

Use this classname:
pwa-images-13

Use this classname:
pwa-images-14

Use this classname:
pwa-images-15

Use this classname:
pwa-images-16

Use this classname:
pwa-images-17

Use this classname:
pwa-images-18

Use this classname:
pwa-images-19


Hamburger effects

This is a special category, because it contains the only effects that react on clicks and not on hover. Also, they are a bit different for you to use. Please see the documentation for a detailed explanation.

Now that you know how to use the effects in this category, here they are:

hamburgerMenu1:
hamburgerMenu2:
hamburgerMenu3:
hamburgerMenu4:
hamburgerMenu5:
hamburgerMenu6:

License

sunset.css is licensed under the GNU Lesser General Public License v2.1.

This means that you can

You will have to

Important: Unlike the GNU General Public License, this license does NOT force you to publish your whole project under this license. This means that you can use this library in your closed-source projects without any problems. You'll just have to publish the files of sunset.css under this license.

For details, please see the full license text.

Contact

Bug report, feature request, etc.? Please open an issue.

Want to contribute? Find out how.

Anything else? Send us a mail.

Legal information

This website is not included in the repository and therefore is not licensed under the GNU Lesser General Public License v2.1.

This website contains third party content: