XenForo 1.X Effet logo CSS3

[Sacryp]

Yop :)

Voici comment faire un petit effet sympas sur vos logos ou autres.

Template: EXTRA.css

Copier coller a la suite

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
    }
    80% {
        -webkit-transform: translateX(10px);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        transform: translateX(-30px);
    }
    80% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}
@-webkit-keyframes redPulse {
from { background-color: #e68c17; -webkit-box-shadow: 0 0 9px #333; }
          50% { background-color: #000000; -webkit-box-shadow: 0 0 18px #000000; }
          to { background-color: #e68c17; -webkit-box-shadow: 0 0 9px #333; }
        }
@-moz-keyframes redPulse {
from { background-color: #e68c17; -moz-box-shadow: 0 0 9px #333; }
          50% { background-color: #000000; -moz-box-shadow: 0 0 18px #000000; }
          to { background-color: #e68c17; -moz-box-shadow: 0 0 9px #333; }
        }
@-o-keyframes redPulse {
from { background-color: #e68c17; -o-box-shadow: 0 0 9px #333; }
          50% { background-color: #000000; -o-box-shadow: 0 0 18px #000000; }
          to { background-color: #e68c17; -o-box-shadow: 0 0 9px #333; }
        }
@keyframes redPulse {
from { background-color: #e68c17; box-shadow: 0 0 9px #333; }
          50% { background-color: #000000; box-shadow: 0 0 18px #000000; }
          to { background-color: #e68c17; box-shadow: 0 0 9px #333; }
        }

Template: logo_block
Chercher:

<div id="logo"><a href="{$logoLink}">

Remplacer par:

<div id="logo" class="animated bounceInRight"><a href="{$logoLink}">

Résultat:
L'image défilera depuis la droite jusqu’à la position initiale du logo.

crédits: msx82