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.

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.

4 réponses sur « Animer son emailing avec le CSS3 »

Pepito dit :

14 mai 2014 à 11 h 27 min

Apple Mail sur iPad et iPhone seulement, ou sur Mac aussi ?

Répondre

team emailing.biz dit :

14 mai 2014 à 13 h 31 min

Bonjour Pepito,
Les animations fonctionnent aussi sur Mac. Nous allons l’indiquer dans l’article.
Merci et bonne journée !

Zetura dit :

15 mai 2014 à 22 h 35 min

Certains clients, comme Gmail par exemple, n’interprètent que le CSS inline non ? Du coup, il n’est pas possible de faire de @keyframes si c’est le cas.

16 mai 2014 à 8 h 10 min

Bonjour Zetura,
La règle CSS @keyframes sert à animer les éléments présents dans le contenu de l’email. Celle-ci sera interprétée seulement dans les 3 messageries suivantes : Apple Mail, Thunderbird et Zimbra.
Les autres messageries, telles que Gmail, n’interpréteront pas cette balise et laisseront les images fixes.
Bonne journée.

Animer son emailing avec le CSS3

Vous aimerez aussi:

Peut-on utiliser @font-Face en emailing ?

Peut-on utiliser Outlook pour l’emailing ?

Mettre une vidéo en arrière-plan de son email

Comment optimiser ses emails pour les applications mobiles Gmail et Inbox

4 réponses sur « Animer son emailing avec le CSS3 »

Laisser un commentaire Annuler la réponse