Animation pour changer le Display

Bonjour,

Je n'ai pas encore beaucoup creusé les possibilités des animations.

J'en utilise une très simple :

@keyframes trs
{
0% {background-color: #FFF; border-bottom-color: #F2F2F2}
50% {background-color: #EDF0F1; border-bottom-color: #7A8B9A}
100% {background-color: #FFF; border-bottom-color: #F2F2F2}
}

table#pro:target th {animation: trs 6s step-start both; background-color: #EDF0F1; border-bottom-color: #7A8B9A}

J'aimerais une animation du même genre qui change le display d'une table pour la faire apparaître pendant 6 secondes.

J'ai essayé :

@keyframes trt
{
0% {display: none}
50% {display: block}
100% {display: none}
}

table#ore:target {animation: trt 6s step-start both; display: block}

La table passe bien de display none à block, elle s'affiche.
Mais elle ne disparaît pas au bout de 6 secondes, ce qui est l'effet cherché.

Merci d'avance.

Salut,

Je ne suis pas sur de la réaction du DOM quand on joue avec les display none dans des animations... tu peux jouer sur opacity ou sur la hauteur du tableau sinon.

boteha_2 a écrit :
D'ailleurs il passe bien en Display block avec l’animation mais c'est le retour en none après 6 secondes qui ne marche pas.

Non il passe en display block avec :

table#ore:target {
    animation: trt 6s step-start both;
    display: block
}

pas avec l'animation.

Le display none/block va déterminer (entre autre) l’activation de l'animation ou son arret et ne peut pas être animée (déjà parce-que le navigateur ne peut pas faire de transition entre ces deux état et aussi pour la raison cité précédemment) :

W3C a écrit :
Setting the display property to none will terminate any running animation applied to the element and its descendants. If an element has a display of none, updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none.

https://drafts.csswg.org/css-animations/#animations

display none est (très [très {très}]) rarement une bonne idée. C'est pas comme si il n'existait pas d'autres alternatives pour cacher un élément:
* la mise sur orbite : positionner absolument un élément hors du champs en lui attribuant une valeur proche de l'infini (par ex -9999px/rem à gauche)
* la cape d'invisibilité : voir réponse de _laurent
* le champignon magique (de mario) : réduire un élément à 1px² et empêcher le débordement via l'overflow.
* enfin, la méga sentence de la mort qui tue : une combinaison des techniques évoquées ci-avant. Mais alors là c'est pour le code vraiment très méchant.




Modifié par Greg_Lumiere (10 Apr 2018 - 12:25)

Bonjour,

Merci de vos réponses.

je vais y réfléchir.

je vais aussi aussi vous donner un lien pour vision du problème.

Bonjour,

Est_ce que visibility fonctionnerait mieux que display pour ce que je veux faire ?

Je vais essayer dès que j'ai le temps ?
Modifié par boteha_2 (15 Apr 2018 - 16:02)