Bonjour,
J'ai intégré des animations css sur une page web :
http://lusinagaz.free.fr/colabquarter/bdi.html
Elles fonctionnent correctement sous Chrome et Firefox mais pas sous IE ou Edge, les textes se superposent à la fin.
Si quelqu'un a une idée de solution à ce problème, c'est cool.
Je mets un extrait du code qui ne fonctionne pas :
Merci.
J'ai intégré des animations css sur une page web :
http://lusinagaz.free.fr/colabquarter/bdi.html
Elles fonctionnent correctement sous Chrome et Firefox mais pas sous IE ou Edge, les textes se superposent à la fin.
Si quelqu'un a une idée de solution à ce problème, c'est cool.
Je mets un extrait du code qui ne fonctionne pas :
.main-container .title-1 {
-webkit-animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.8s, text-blur-out 1.2s ease-in forwards 5.5s;
-moz-animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.8s, text-blur-out 1.2s ease-in forwards 5.5s;
animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.8s, text-blur-out 1.2s ease-in forwards 5.5s;
}
.main-container .title-2 {
-webkit-animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 6.8s, text-blur-out 1.2s ease-in forwards 10.5s;
-moz-animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 6.8s, text-blur-out 1.2s ease-in forwards 10.5s;
animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 6.8s, text-blur-out 1.2s ease-in forwards 10.5s;
}
.main-container .title-3 {
-webkit-animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 11.8s, text-blur-out 1.2s ease-in forwards 15.5s;
-moz-animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 11.8s, text-blur-out 1.2s ease-in forwards 15.5s;
animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 11.8s, text-blur-out 1.2s ease-in forwards 15.5s;
}
.main-container .title-4 {
-webkit-animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 16.8s, text-blur-out 1.2s ease-in forwards 20.5s;
-moz-animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 16.8s, text-blur-out 1.2s ease-in forwards 20.5s;
animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 16.8s, text-blur-out 1.2s ease-in forwards 20.5s;
}
/**
* ----------------------------------------
* animation focus-in-contract
* ----------------------------------------
*/
@keyframes focus-in-contract {
0% {
letter-spacing: 1em;
filter: blur(12px);
opacity: 0;
}
100% {
filter: blur(0px);
opacity: 1;
}
}
@-webkit-keyframes focus-in-contract {
0% {
letter-spacing: 1em;
filter: blur(12px);
opacity: 0;
}
100% {
filter: blur(0px);
opacity: 1;
}
}
Merci.