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.

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)