27802 sujets

CSS et mise en forme, CSS3

Bonjour , j'ai remarqué qu'en insérant un @keyframes glisse dans mon codage css , les valeurs données à cette dernière s'appliquait sur tous le slider de ma page , ce qui fait qu'ils ont tous les même propriété keyframe, du coup , j'aimerais savoir si c'est possible d'appliquer des sélecteurs sur les keyframes , de tel sorte d'avoir plusieurs @keyframes glisse dans la même page et que chacune d'elle ait des effets que sur zone donné .
Merci .

le code :


section.logo
{
display: flex;
justify-content: space-between;
overflow: hidden;
width: 440px;
margin-left: 35%;
}
.slider0
{
display: flex;
width: 440px;
background-color: #FFF;
justify-content: space-around;
float: left;
animation: glisse 6s infinite;
}
.slides0
{
display: flex;
width: 400px;
overflow: hidden;
align-items: center;
padding: 0px 5px 0px 5px;
justify-content: space-between;
}
@keyframes glisse
{
0%{transform: translateX(0);}
7%{transform: translateX(0);}
15%{transform: translateX(0);}
38%{transform: translateX(-820px);}
45%{transform: translateX(-820px);}
52%{transform: translateX(-820px);}
75%{transform: translateX(-1640px);}
82%{transform: translateX(-1640px);}
89%{transform: translateX(-1640px);}
100%{transform: translateX(0);}
}

.................................................................................................
section.secteur
{
display: flex;
justify-content: space-between;
overflow: hidden;
width: 440px;
}
.slider1
{
display: flex;
width: 440px;
background-color: rgb(246, 252, 247);
justify-content: space-around;
float: left;
animation: glisse 6s infinite;
}
.slides1
{
display: flex;
width: 400px;
overflow: hidden;
text-align: center;
justify-content: center;
}
.slide1
{
color: rgb(49, 119, 52);
font-style:italic;
font-variant:small-caps;
font-weight: bold;
font-size: 17.6px;
}
@keyframes glisse
{
0%{transform: translateX(0);}
7%{transform: translateX(0);}
15%{transform: translateX(0);}
38%{transform: translateX(-410px);}
45%{transform: translateX(-410px);}
52%{transform: translateX(-410px);}
75%{transform: translateX(-820px);}
82%{transform: translateX(-820px);}
89%{transform: translateX(-820px);}
100%{transform: translateX(0);}
}
voilà le code css , le truc c'est que lors de la lecture de la page le premier keyframes est ecrase par celui qui suit
Modifié par Chan (20 May 2022 - 18:56)
section.logo
{
display: flex;
justify-content: space-between;
overflow: hidden;
width: 440px;
margin-left: 35%;
}
.slider0
{
display: flex;
width: 440px;
background-color: #FFF;
justify-content: space-around;
float: left;
animation: glisse 6s infinite;
}
.slides0
{
display: flex;
width: 400px;
overflow: hidden;
align-items: center;
padding: 0px 5px 0px 5px;
justify-content: space-between;
}
@keyframes glisse
{
0%{transform: translateX(0);}
7%{transform: translateX(0);}
15%{transform: translateX(0);}
38%{transform: translateX(-820px);}
45%{transform: translateX(-820px);}
52%{transform: translateX(-820px);}
75%{transform: translateX(-1640px);}
82%{transform: translateX(-1640px);}
89%{transform: translateX(-1640px);}
100%{transform: translateX(0);}
}

.................................................................................................
section.secteur
{
display: flex;
justify-content: space-between;
overflow: hidden;
width: 440px;
}
.slider1
{
display: flex;
width: 440px;
background-color: rgb(246, 252, 247);
justify-content: space-around;
float: left;
animation: glisse 6s infinite;
}
.slides1
{
display: flex;
width: 400px;
overflow: hidden;
text-align: center;
justify-content: center;
}
.slide1
{
color: rgb(49, 119, 52);
font-style:italic;
font-variant:small-caps;
font-weight: bold;
font-size: 17.6px;
}
@keyframes glisse
{
0%{transform: translateX(0);}
7%{transform: translateX(0);}
15%{transform: translateX(0);}
38%{transform: translateX(-410px);}
45%{transform: translateX(-410px);}
52%{transform: translateX(-410px);}
75%{transform: translateX(-820px);}
82%{transform: translateX(-820px);}
89%{transform: translateX(-820px);}
100%{transform: translateX(0);}
}
voilà le code css , le truc c'est que lors de la lecture de la page le premier keyframes est ecrase par celui qui suit .
Modifié par Chan (20 May 2022 - 18:55)
ça ne fonctionne pas , en les nommant ainsi le navigateur ne les lis plus faute de 1 et 2 mis à côté