28114 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'animation CSS

Bonjour, la débutante que je suis ne trouve pas la solution: je suis en train de travailler sur un portfolio et j'ai mis une animation de bulle qui part du bas jusqu'en haut, sauf qu'en fonction du support le niveau du bas n'est pas le même Smiley smile soit ca me fait une marge qui 'saute' puisque les li sont plus basses que le footer soit les li se retrouvent en plein milieu en fonction de la taille de l'écran. J'ai essayé pas mal de trucs mais rien n'y fait, la derniere solution serait d'utiliser les media querries mais je pensais qu'il serait possible de faire autrement. Mes li sont vide et dans une div background toute simple. J'espere que mon css ne vous piquera pas trop les yeux...

@keyframes animate {
    0% {
        transform: translateY(1vh) rotate(0deg);
        opacity: 1;
        visibility: hidden;
    }
    100% {
        transform: translateY(-200vh) rotate(720deg);
        opacity: 0.5;
        visibility: visible;
    }
}
.background {
    width: auto;
    height: auto;
}
.background li {
    position: absolute;
    bottom:-18vh;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 5s linear infinite;
    border-radius: 100%;
    overflow: hidden;
}
.background li:nth-child(1) {
    left: 20%;
    width: 10vw;
    height: 10vw;

}

Modifié par chris830 (07 Nov 2023 - 13:56)
Personne à d'idée sur comment faire pour que mes bulles partent du bas de ma page quelque soit le support?
Dois-je comprendre que c'est pas possible sans media querry ou est-ce que je m'y prends mal?
Modérateur
Bonjour,

Si la zone d'affichage référence est supposée être la fenêtre du navigateur, peut-être vaut-il mieux utiliser position :fixed ?

Cdt
chris830 a écrit :
Personne à d'idée sur comment faire pour que mes bulles partent du bas de ma page quelque soit le support?

Bonjour. J'ai vu passer le sujet mais il nous manque plein de choses. Par exemple la structure du HTML sur lequel s'appuie le CSS ? Pourquoi des items de liste (<li>) alors qu'il s'agit d'items pour une animation ?

Et puis là, rien qu'en lisant le CSS, certaines choses posent question. Par exemple un height avec 100% sur une hauteur non définie préalablement signifie une hauteur de 0 ; ou encore le choix des unités : un coup elle sont fixes (px), un coup ce sont des pourcentages, un coup ce sont des vh ou vw.

Le mieux serait de nous faire une démo en ligne, sur un Code Pen par exemple.
Modifié par Olivier C (08 Nov 2023 - 13:12)
Probleme resolu,merci.
<div class="background">
       <span></span>
       <span></span>


.background {
    background-color: rgba(0, 0, 0, 0.51);
    position: relative;
}
@keyframes animate {
    0% {
        transform: translateY(1vh) rotate(0deg);
        /*margin-bottom: 0;*/
        opacity: 1;
 
    }
    100% {
        transform: translateY(-500vh) rotate(720deg);
        /*margin-bottom: 100vh;*/
        opacity: 0.5;
    }
}
.background span {
    position: absolute;
    bottom:0;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 10s linear infinite;
    border-radius: 100%;
    overflow: hidden;
}
 
.background span:nth-child(1) {
    left: 20%;
    width: 10vw;
    height: 10vw;
 
}
.background span:nth-child(2) {
    left:30%;
    width: 5vw;
    height: 5vw;
Pour résoudre ce problème, vous pouvez effectivement utiliser les media queries CSS, qui vous permettent d'adapter le rendu de votre site web selon la taille de l'écran de l'utilisateur.
Prévenir un modérateur
Répondre au sujet
Aller à