Module : cssc-triggers.css

Triggered animations

Animate any element by acting on a chosen parent element.

Lorem ipsum

Lorem ipsum

Module : cssc-effects.css

Effects

A Library of simple effects using CSS.

Load effects

Appear on load

Afficher HTML ‣ Relancer

<p class="cssc-effects-appear">
    <img class="animate-me" src="http://placehold.it/100x100" alt="" />
    <img class="animate-me" src="http://placehold.it/100x100" alt="" />
    <img class="animate-me" src="http://placehold.it/100x100" alt="" />
    <img class="animate-me" src="http://placehold.it/100x100" alt="" />
</p>

Slide on load

Afficher HTML ‣ Relancer

<p class="cssc-effects-slide">
    <img class="animate-me" src="http://placehold.it/100x100" alt="" />
    <img class="animate-me" src="http://placehold.it/100x100" alt="" />
    <img class="animate-me" src="http://placehold.it/100x100" alt="" />
    <img class="animate-me" src="http://placehold.it/100x100" alt="" />
</p>

Underline effects

Default underlineUnderline from leftUnderline from center

Parallax effect

Hover effects

Inverted :hover

Afficher HTML

<ul class="cssc-inverted-hover">
    <li><a href="#">lorem ipsum</a></li>
    <li><a href="#">dolor sit amet</a></li>
    <li><a href="#">consectetur adipiscing elit</a></li>
</ul>

Inverted :hover on images

Afficher HTML

<p class="cssc-inverted-hover--images">
    <a href="#"><img src="images/1.jpg" alt="" /></a>
    <a href="#"><img src="images/2.jpg" alt="" /></a>
    <a href="#"><img src="images/3.jpg" alt="" /></a>
    <a href="#"><img src="images/4.jpg" alt="" /></a>
</p>

Colorized hover

Afficher HTML

<p class="cssc-colorized-hover">
    <a href="#" class="animate-me">
        <img class="color" src="images/___x100/1.jpg" alt="" />
        <img class="gray" src="images/___x100/1.jpg" alt="" />
    </a>
    <a href="#" class="animate-me">
        <img class="color" src="images/___x100/2.jpg" alt="" />
        <img class="gray" src="images/___x100/2.jpg" alt="" />
    </a>
    <a href="#" class="animate-me">
        <img class="color" src="images/___x100/3.jpg" alt="" />
        <img class="gray" src="images/___x100/3.jpg" alt="" />
    </a>
    <a href="#" class="animate-me">
        <img class="color" src="images/___x100/4.jpg" alt="" />
        <img class="gray" src="images/___x100/4.jpg" alt="" />
    </a>
</p>;

Unblur hover

Afficher HTML

<p class="cssc-unblur-hover">
    <a href="#" class="animate-me">
        <img class="clean" src="images/___x100/1.jpg" alt="" />
        <img class="blur" src="images/___x100/1.jpg" alt="" />
    </a>
    <a href="#" class="animate-me">
        <img class="clean" src="images/___x100/2.jpg" alt="" />
        <img class="blur" src="images/___x100/2.jpg" alt="" />
    </a>
    <a href="#" class="animate-me">
        <img class="clean" src="images/___x100/3.jpg" alt="" />
        <img class="blur" src="images/___x100/3.jpg" alt="" />
    </a>
    <a href="#" class="animate-me">
        <img class="clean" src="images/___x100/4.jpg" alt="" />
        <img class="blur" src="images/___x100/4.jpg" alt="" />
    </a>
</p>;

Rotating cards

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum.

Afficher HTML

<a href="#" class="cssc-card">
    <span class="front"><img src="http://placehold.it/100x100" alt="" /></span>
    <span class="back">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum.</span>
</a>

Image grid

Hello

Hello

Hello

Hello

Fork me on GitHub