Logo

Le superblog de l'email marketing Le blog emailing de référence par Sarbacane: retrouvez toute l'info de l'email marketing sur emailing.biz
No-Spam Woman
Par
Elle est l’experte absolue de la technique, toujours présente pour vous aider à optimiser vos newsletters et à combattre le spam.
le 13 mai 2014 | 4 commentaires

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.

Tags:

réponses to “Animer son emailing avec le CSS3”

  1. Avatar

    14 mai 2014

    Pepito Répondre

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

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

  2. Avatar

    15 mai 2014

    Zetura Répondre

    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.

    • 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.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués *


*