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

Général
1

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

2

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

#LOGO_ARTICLE_SURVOL
#LOGO_ARTICLE_NORMAL

Le lun. 5 avr. 2021 à 23:26, Renée Picard <sitememoires@gmail.com> 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

3

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

#LOGO_ARTICLE_SURVOL
#LOGO_ARTICLE_NORMAL

#NOM_SITE_SPIP

#MENU_LANG

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 <sitememoires@gmail.com> 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

#LOGO_ARTICLE_SURVOL
#LOGO_ARTICLE_NORMAL

Le lun. 5 avr. 2021 à 23:26, Renée Picard <sitememoires@gmail.com> 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