
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
Exemple : 15 secondes
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 »
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 !
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.