Animer son emailing avec le CSS3

Captain Inbox

@-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;
}
@-webkit-keyframes rotateIn2 {
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 rotateIn2 {
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);
}
}
.rotateIn2 {
-webkit-animation: rotateIn 15s linear infinite;
-moz-animation: rotateIn 15s linear infinite;
-ms-animation: rotateIn 15s linear infinite;
-o-animation: rotateIn 15s linear infinite;
animation: rotateIn 15s linear infinite;
}
@-webkit-keyframes ombre {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes ombre {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ombre {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeindown{/* Animation */
-webkit-animation: ombre ease-in infinite alternate 2s;
-moz-animation: ombre ease-in infinite alternate 2s;
animation: ombre ease-in infinite alternate 2s;
}

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.

Total
0
Shares
Laisser un commentaire

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

Previous Post

Les avantages du GIF en emailing

Next Post

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

Related Posts