Animations Utilities

Animations are illusions of movements for web elements when reloading the page or when entering it. These animations are generated completely with CSS.

They do not use JS, so they are only launched when you reload a page or enter a new tab.

If you want to launch animations while scrolling you can use Javascript along with the animations.


e-waves
e-waves-dark

e-waves

Click on the elements to see the effect.
<div class="e-waves">
  ...
</div>
<!-- Or -->
<div class="e-waves-dark">
  ...
</div>
Animation eUp
Animation Infinite

eUp

To start again, reload the page, IT WILL BE LOADED IN THE SAME PLACE OF DISPLACEMENT.

The classes of the animations do not have scripts. e- for e

Add infinite To repeat the animation in a cycle.

<div class="eUp">
  ...
</div>
<!-- Or -->
<div class="eUp infinite">
  ...
</div>
Animation ePull
Animation ePull

ePull

To start again, reload the page, IT WILL BE LOADED IN THE SAME PLACE OF DISPLACEMENT.

The classes of the animations do not have scripts. e- for e

Add infinite To repeat the animation in a cycle.

<div class="ePull">
  ...
</div>
<!-- Or -->
<div class="ePull infinite">
  ...
</div>
Animation eRight

eRight

To start again, reload the page, IT WILL BE LOADED IN THE SAME PLACE OF DISPLACEMENT.

The classes of the animations do not have scripts. e- for e

Add infinite To repeat the animation in a cycle.

<div class="eRight">
  ...
</div>
<!-- Or -->
<div class="eRight infinite">
  ...
</div>
Animation eFade
Animation eFade

eFade

To start again, reload the page, IT WILL BE LOADED IN THE SAME PLACE OF DISPLACEMENT.

The classes of the animations do not have scripts. e- for e

Add infinite To repeat the animation in a cycle.

<div class="eFade">
  ...
</div>
<!-- Or -->
<div class="eFade infinite">
  ...
</div>
Animation eSlide

eSlide

To start again, reload the page, IT WILL BE LOADED IN THE SAME PLACE OF DISPLACEMENT.

The classes of the animations do not have scripts. e- for e

Add infinite To repeat the animation in a cycle.

<div class="eSlide">
  ...
</div>
<!-- Or -->
<div class="eSlide infinite">
  ...
</div>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2020
eFrolic | framework css 2020

One-time donation


Donate
eFrolic | framework css 2020
eFrolic | framework css 2020

Serious sponsor


Become a Patron