Animer son emailing avec le CSS3

Ringard les emails plats et uniformes ? Utilisez le code CSS3 et animez votre prochaine campagne emailing ! Les messageries Apple Mail, Thunderbird et Zimbra interprètent le code CSS3 présent dans le code HTML de votre email. Voici 2 animations applicables sur vos newsletters :

La rotation d’une image

Vous souhaitez faire tourner une image sur elle-même ? Nous vous donnons le code pour ça :

Dans le CSS de votre emailing, renseignez le code suivant :

@-webkit-keyframes rotateIn {
        0% {
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
        100% {
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
    }
    @keyframes rotateIn {
        0% {
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
        100% {
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center;
            -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0);
        }
    }
.rotateIn {
	    -webkit-animation: rotateIn 5s linear infinite;
    -moz-animation: rotateIn 5s linear infinite;
    -ms-animation: rotateIn 5s linear infinite;
    -o-animation: rotateIn 5s linear infinite;
    animation: rotateIn 5s linear infinite;
    }

Vous pouvez définir le temps de rotation

Exemple : 5 secondes

logo

Exemple : 15 secondes

logo

Ensuite, dans la balise <img>, indiquez :

class= "rotateIn"

Et le tour est joué !

L’apparition du texte

Si vous souhaitez faire apparaître votre texte, voici le CSS à renseigner :

@keyframes fadeInDown {
        0% {opacity: 0;transform: translateY(-30px);}
        40% {opacity: 0;transform: translateY(-30px);}
        100% {opacity: 1;transform: translateY(0);}
    }
    @-webkit-keyframes fadeInDown {
        0% {opacity: 0;-webkit-transform: translateY(-30px);}
        40% {opacity: 0;-webkit-transform: translateY(-30px);}
        100% {opacity: 1;-webkit-transform: translateY(0);}
    }
.fadeInDown {
        animation-name: fadeInDown;
        -webkit-animation-name: fadeInDown;
        animation-duration: 1.2s;
        -webkit-animation-duration: 1.2s;
    }

Vous pouvez définir la durée de cette animation.

Ensuite, dans la balise <FONT>, indiquez :

class= "fadeInDown"

Voici ce que ça donne dans l’email :
L’animation ne se fera qu’une seule fois à l’ouverture de l’email.

@keyframes fadeInDown {
0% {opacity: 0;transform: translateY(-30px);}
40% {opacity: 0;transform: translateY(-30px);}
100% {opacity: 1;transform: translateY(0);}
}
@-webkit-keyframes fadeInDown {
0% {opacity: 0;-webkit-transform: translateY(-30px);}
40% {opacity: 0;-webkit-transform: translateY(-30px);}
100% {opacity: 1;-webkit-transform: translateY(0);}
}
.fadeInDown {
animation-name: fadeInDown;
-webkit-animation-name: fadeInDown;
animation-duration: 1.2s;
-webkit-animation-duration: 1.2s;
}

Visitez notre site Internet

Compliqué vous avez dit ? ?
Ça fonctionne pour le moment sur : Apple Mail (sur Mac, iPad et iPhone), Thunderbird et Zimbra, mais d’autres webmails et messageries devraient suivre !
A savoir : dans les autres messageries, l’image et le texte apparaissent et restent fixes.