CSS Common - Framework CSS

Triggered animations

Animate any element by acting on a chosen parent element.

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 underline • Underline from left • Underline from center

Hover effects

Inverted :hover

• lorem ipsum
• dolor sit amet
• consectetur adipiscing elit

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