Captain Inbox
Par
Il lutte depuis toujours pour le Bien de l’emailing et apporte son aide auprès de ceux qui exigent le meilleur pour leurs contenus.

Animer son emailing avec le CSS3

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

Laisser un commentaire

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