Enchainement d'animations en CSS
Résolu/Fermé
fifidibosco
Messages postés
70
Date d'inscription
mercredi 2 décembre 2015
Statut
Membre
Dernière intervention
17 juillet 2023
-
6 sept. 2020 à 20:08
fifidibosco Messages postés 70 Date d'inscription mercredi 2 décembre 2015 Statut Membre Dernière intervention 17 juillet 2023 - 7 sept. 2020 à 12:30
fifidibosco Messages postés 70 Date d'inscription mercredi 2 décembre 2015 Statut Membre Dernière intervention 17 juillet 2023 - 7 sept. 2020 à 12:30
A voir également:
- Enchainement d'animations en CSS
- Convertir powerpoint en pdf avec animations ✓ - Forum PDF
- Logiciel enchainement musique automatique gratuit - Forum Audio
- Télécharger dessin animé disney gratuit en français complet ✓ - Forum Cinéma / Télé
- DJ Facile - Télécharger - DJ & Karaoké
- Mixer automatique avec Virtual DJ Home 7 ✓ - Forum Enregistrement / Traitement audio
1 réponse
fifidibosco
Messages postés
70
Date d'inscription
mercredi 2 décembre 2015
Statut
Membre
Dernière intervention
17 juillet 2023
7 sept. 2020 à 12:30
7 sept. 2020 à 12:30
Si ça intéresse....
Ma solution est de mettre le même délai et la même durée pour tous les textes et ensuite de régler les apparitions des textes avec le @keyframes.
Pour que tous les textes disparaissent en même temps il suffit de mettre l'animation-fill-mode à none.
Mais ça oblige à écrire une classe CSS par texte
Chez moi ça donne ça :
html
CSS
Ma solution est de mettre le même délai et la même durée pour tous les textes et ensuite de régler les apparitions des textes avec le @keyframes.
Pour que tous les textes disparaissent en même temps il suffit de mettre l'animation-fill-mode à none.
Mais ça oblige à écrire une classe CSS par texte
Chez moi ça donne ça :
html
<body>
<div class="labelo1">Texte 1</div>
<div class="labelo2">Texte 2</div>
<div class="labelo3">Texte 3</div>
</body>
CSS
.labelo1 {
position: absolute;
width: 300px;
height: 100px;
background-color: aqua;
top: 20%;
left: -50%;
opacity:1;
animation-name: gliss1;
animation-timing-function: ease;
animation-delay: 0s;
animation-duration: 8s;
animation-iteration-count: 1;
animation-fill-mode: none;
}
.labelo2 {
position: absolute;
width: 300px;
height: 100px;
background-color: aqua;
top: 40%;
left: -50%;
opacity:1;
animation-name: gliss2;
animation-timing-function: ease;
animation-delay: 0s;
animation-duration: 8s;
animation-iteration-count: 1;
animation-fill-mode: none;
}
.labelo3 {
position: absolute;
width: 300px;
height: 100px;
background-color: yellow;
top: 60%;
left: -50%;
opacity:1;
animation-name: gliss3;
animation-timing-function: ease;
animation-delay: 0s;
animation-duration: 8s;
animation-iteration-count: 1;
animation-fill-mode: none;
}
@keyframes gliss1 {
0%{
left:-50%;
}
20%{
opacity:1;
left:50%;
}
100% {
left: 50%;
opacity:1;
}
}
@keyframes gliss2 {
30%{
left:-50%;
}
50%{
left:50%;
opacity:1;
}
100% {
left: 50%;
opacity:1;
}
}
@keyframes gliss3 {
60%{
left:-50%;
}
80%{
left:50%;
opacity:1;
}
100% {
left: 50%;
opacity:1;
}
}
