web-dev-qa-db-fra.com

Visibilité pure animation CSS avec délai

J'essaye d'implémenter une animation onLoad sans Javascript . JS est facile, CSS est ... pas.

J'ai un div qui devrait être sur display: none; et devrait être display: block; après 3 secondes. Beaucoup de ressources me disent qu'animer ne fonctionne pas avec display, mais devrait avec visibility (que j'utilise souvent dans ma transition).

Sachez que j'ai cette fonction javascript terrible:

<script type="text/javascript">
    $(document).ready(function(){
        $(".js_only").hide();
        setTimeout(function () {
            $(".js_only").show();
        }, 3000);
    });
</script>

J'ai essayé des animations en CSS mais aucun résultat ... rien ne semble fonctionner.

J'ai peu d'animation sur ma page, mais je me bats avec le display: none; sur l'animation.

@-moz-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@-webkit-keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }

}
@keyframes showEffect {
    0% { display: none; visibility: hidden; }
    100% { display: block; visibility: block;  }
}

.css_only {
    -moz-animation-name: showEffect;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 2.3s;

    -webkit-animation-name: showEffect;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 2.3s;

    animation-name: showEffect;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2.3s;
}

C'est important car caché, cet élément ne prend pas de place du tout. J'ai créé un JSFiddle pour faire pas mal de tests.

Mon principal souci est le référencement ... Je ne pense pas que l’option JS soit vraiment agréable pour cela, c’est pourquoi je voudrais une alternative CSS pure. Aussi intéressé de tester ces animations et de voir où sont ces limites (est-ce que j'en vois une en ce moment?). Un peu s'amuser sur un tel défi.

Merci d'avoir lu, espérons que quelqu'un a une réponse.

csscss3css-animations
22
sebastienbarbier

Vous avez raison de penser que display ne peut pas être animé. Cela ne fonctionnera pas et vous ne devriez pas vous soucier de l'inclure dans les animations d'images clés.

visibility peut être animé techniquement, mais de manière approximative. Vous devez conserver la propriété aussi longtemps que nécessaire, puis alignez-la sur la nouvelle valeur. visibility ne fait pas d'interpolation entre les images clés, il fait juste des pas difficiles.

.ele {
  width: 60px;
  height: 60px;
  
  background-color: #ff6699;
  animation: 1s fadeIn;
  animation-fill-mode: forwards;
  
  visibility: hidden;
}

.ele:hover {
  background-color: #123;
}

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
<div class="ele"></div>

Si vous voulez disparaître, vous utilisez opacity. Si vous incluez un délai, vous aurez également besoin de visibility pour empêcher l'utilisateur d'interagir avec l'élément tant qu'il n'est pas visible.

.ele {
  width: 60px;
  height: 60px;
  
  background-color: #ff6699;
  animation: 1s fadeIn;
  animation-fill-mode: forwards;
  
  visibility: hidden;
}

.ele:hover {
  background-color: #123;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
<div class="ele"></div>

Les deux exemples utilisent animation-fill-mode , qui peut contenir l'état visuel d'un élément à la fin d'une animation.

32
Oka

Vous pouvez jouer avec delay prop de animation , il suffit de définir visibility:visible après un délai , démo:

@keyframes delayedShow {
  to {
    visibility: visible;
  }
}

.delayedShow{
  visibility: hidden;
  animation: 0s linear 2.3s forwards delayedShow ;
}
So, Where are you?

<div class="delayedShow">
  Hey, I'm here!
</div>
5
James Yang

Utilisez animation-delay:

div {
    width: 100px;
    height: 100px;
    background: red;
    opacity: 0;

    animation: fadeIn 3s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

violon

5
Leo

vous ne pouvez pas animer chaque propriété,

voici une référence à laquelle sont les propriétés animables

la visibilité est animable alors que l'affichage n'est pas ...

dans votre cas, vous pouvez également animer opacity ou height en fonction du type d'effet que vous souhaitez rendre_

violon avec animation d'opacité

2
maioman

Malheureusement, vous ne pouvez pas animer la propriété display. Pour une liste complète de ce que vous pouvez animer, essayez ceci liste des animations CSS by w3 Schools.

Si vous souhaitez conserver sa position visuelle sur la page, vous devez essayer d’animer soit height (qui affectera toujours la position des autres éléments), soit opacity (sa transparence). Vous pouvez même essayer d’animer le z-index, qui correspond à la position sur l'axe z (profondeur), en plaçant un élément au-dessus de celui-ci, puis en réorganisant ce qui se trouve en haut. Cependant, je suggérerais d'utiliser opacity, car il conserve l'espace vertical où se trouve l'élément.

J'ai mis à jour le violon pour montrer un exemple.

Bonne chance!

1
Isaac Minogue