Re: effet transition fade in fade out sur #LOGO_ARTICLE et #LOGO_ARTICLE_SURVOL

Je n'ai pas réussi à faire bien afficher cela sur petit écran. Du coup j'ai
fais un media querry et l'image est un background-image du logo sur petit
Voici le site www.albertpicard.com
Voici le code
 .section {
  position: relative;z-index:0;margin-top: -2em;
}
.section div {
  position: absolute
}
.top {
  animation-name: fade;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration:6400ms;
animation-direction: alternate ;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  5% {
    opacity: 1;
  }
      10% {
    opacity: 0.8;
  }
      20% {
    opacity: 0.6;
  }
      30% {
    opacity: 0.4;
  }
      40% {
    opacity: 0.2;
  }
      45% {
    opacity: 0;
  }
      50% {
    opacity: 0;
  }
      55% {
    opacity: 0;
  }
      60% {
    opacity: 0.2;
  }
      70% {
    opacity: 0.4;
  }
      800% {
    opacity: 0.6;
  }
      90% {
    opacity: 0.8;
  }
      95% {
    opacity: 1;
  }
      100% {
    opacity: 1;
  }
}

  @media screen and (max-width: 1023px) {
  .section{display: none}
 h1{font-size: 3rem; margin-bottom: 1em;}
}
 @media screen and (min-width: 1024px) { section2{display: none}     }
et dans le html, dans une boucle article
  <div class="section">
 <div class="bottom">   #LOGO_ARTICLE_SURVOL
 <INCLURE{fond=inclure/nav_som,env,id_article} />
 </div>
  <div class="top">#LOGO_ARTICLE_NORMAL
 <INCLURE{fond=inclure/nav_som,env,id_article} />
    </div>
</div>
 <div class="section2"[ style="width:auto;
min-height:1000px;margin-top: -1em;
background:no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top:0;background-image: url((#LOGO_ARTICLE|extraire_attribut{src})]">
<h1 style="color: #FFFFFF; z-index: 1000;  width: 100%;padding-top: 3em;
">#NOM_SITE_SPIP</h1>
<div class="s" style="display: flex; justify-content: space-around; width:
60%; margin-left: 20%" >
<BOUCLE_sommaire_rubriques2(RUBRIQUES){racine}{exclus}{id_rubrique!IN
13,4,18}{par num titre}{lang}>
   <div>
<a href="#URL_RUBRIQUE">#TITRE</a> </div>
</BOUCLE_sommaire_rubriques2>
<div>
#MENU_LANG
</div></div> </div>

J'aimerais bien pouvoir avoir cet effet sur petits ecrans ???
Si je laisse section sur petit ecran j'ai une image petite et le reste de
la page avec la couleur de fond de page. Ce n'est pas très beau.
Je n'ai pas réussi à faire un effet fade avec background-image ???

Si il y a des experts en CSS je suis preneuse de conseils.
Merci



Le mar. 6 avr. 2021 à 09:39, Renée Picard <[email protected]> a écrit :

> J'ai réussi.
> J'ai re-découvert #LOGO_ARTICLE_NORMAL. c'est bien reare que j'utilise
> cela.
> Je partage si cela en intéresse d'autres.
> En css
>  section {
>   position: relative;background-color: #000000;z-index:0;
> }
>
> section div {
>   position: absolute;
> }
>
> .top {
>   animation-name: fade;
>   animation-timing-function: ease-in-out;
>   animation-iteration-count: 2;
>   animation-duration: 3s;
>   animation-direction: alternate;
> }
>
> @keyframes fade {
>   0% {
>     opacity: 1;
>   }
>   25% {
>     opacity: 1;
>   }
>   75% {
>     opacity: 0;
>   }
>   100% {
>     opacity: 0;
>   }
> }
> En HTML dans une boucle article
> <section>
>   <div class="bottom">#LOGO_ARTICLE_SURVOL
>     </div>
>   <div class="top">#LOGO_ARTICLE_NORMAL
>     </div>
>    </section>
>
> Le lun. 5 avr. 2021 à 23:26, Renée Picard <[email protected]> a
> écrit :
>
>> Est-il possible de créer cet effet avec #LOGO_ARTICLE et
>> #LOGO_ARTICLE_SURVOL?
>> Sur ce site, https://isabelle-hayeur.com/, l'image change lentement sans
>> avoir besoin d'un mouse hover.
>> Nerci
>>
>