28114 sujets

CSS et mise en forme, CSS3

[Résolu] Animation récalcitrante.

Dans une page web je place le code: 
<div class="d1"></div>

Puis dans le CSS lié à la page: 

.d1{
    width: 600px;
    height: 400px;
    margin: 50px auto;
    box-shadow: 0px 15px 10px -5px #777;
    background-color: #EDEDED;
    background-size: 100% 100%;
    overflow: hidden;
    animation: fondu 15s linear infinite;
}
.d1:hover{
    animation-play-state: paused;
}
@keyframes fondu {
    0%{background-image: url("photo1.jpg");}
    50%{background-image: url("photo2.jpg");}
    100%{background-image: url("photo3.jpg");}
}


L'objectif étant de faire un défiler trois photos dans un cadre div. Après de nombreux essais infructueux, j'ai délocalisé le code en mettant le div dans une page galerie.html et le css dans une page galerie.css puis j'ai intégré le tout dans ma page web dans un iframe.

Et là tout fonctionne parfaitement, ce qui prouve que le code ci dessus est correct !
Mais quand même par curiosité je voudrais savoir ce qui peut bloquer une animation banale dans une page web ?!
salut
j'ai un peu modifié et chez moi çà fonctionne en boucle comme voulu


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="preload" as="image" href="photo1.jpg">
<link rel="preload" as="image" href="photo2.jpg">
<link rel="preload" as="image" href="photo3.jpg">
<style>
.d1{
    width: 600px;
    height: 400px;
    margin: 50px auto;
    box-shadow: 0px 15px 10px -5px 
#777;
    background-color: 
#EDEDED;
    background-size: 100% 100%;
    overflow: hidden;
    animation: fondu 15s linear infinite;
}
.d1:hover{
    animation-play-state: paused;
}
@keyframes fondu {
    0%{background-image: url("photo1.jpg");}
    25%{background-image: url("photo1.jpg");}

    30%{background-image: url("photo2.jpg");}
    60%{background-image: url("photo2.jpg");}

    65%{background-image: url("photo3.jpg");}
    95%{background-image: url("photo3.jpg");}

    100%{background-image: url("photo1.jpg");}
}
</style>

</head>
<body>

<div class="d1"></div>

</body>
</html>

Modifié par drphilgood (09 Apr 2024 - 00:37)
Meilleure solution
j'ai mis 30% fixe et 5% pour le fondu sinon les images sont constamment mélangées,
et un preload sinon çà flashe a la 1ere boucle.
Merci pour la modification du fondu, j'avais observé l'effet flash aussi.

En fait quand je met le CSS dans un fichier linké sur la page ca ne fonctionne pas, alors que mis dans une page que j'insère dans un iframe ca marche ?

J'utilise Visual Studio Code et je soupçonne des comportements bizarres parfois.

Bon on va clore le débat mais je voulais savoir si j'étais le seul à avoir connu cela.
Prévenir un modérateur
Répondre au sujet
Aller à