animation glissement h1 nsb

This commit is contained in:
2021-04-15 10:38:11 +02:00
parent 1292b3683f
commit fab3e52792
4 changed files with 43 additions and 12 deletions
@@ -825,7 +825,10 @@ ul.pagination {
padding: 0 .1em;
vertical-align: top; }
#header #navbar ul.navigation li a:hover {
#header #navbar ul.navigation li:last-child:after {
content: "" !important; }
#header #navbar ul.navigation li:last-child #header #navbar ul.navigation li a:hover {
font-weight: 900; }
#header.scrolled #navbar ul.navigation li a {
@@ -883,9 +886,20 @@ ul.pagination {
100% {
width: 100%; } }
@keyframes glissement {
from {
margin-left: 100%;
width: 300%; }
to {
margin-left: 0%;
width: 100%; } }
.after-h1 .test {
animation: anim 2.5s 1 normal ease-in-out forwards; }
.after-h1 .souligne {
animation: glissement 2.5s 1 normal ease-in-out forwards; }
.programmes {
display: flex;
flex-wrap: wrap;
@@ -1041,7 +1055,8 @@ ul.pagination {
background-color: transparent;
text-transform: uppercase;
align-self: flex-end;
margin: auto; }
margin: auto;
margin-bottom: 2rem; }
.modal {
position: fixed;
@@ -49,6 +49,13 @@
vertical-align: top;
}
#header #navbar ul.navigation li:last-child:after {
content: "" !important;
}
#header #navbar ul.navigation li:last-child
#header #navbar ul.navigation li a:hover {
font-weight: 900;
}
@@ -117,6 +124,7 @@
}
}
.titre_bsn {
display: block;
@@ -138,23 +146,30 @@
0% {width: 0%;}
100% {width: 100%;}
}
.after-h1 {
@keyframes glissement {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
.after-h1 {
.test {
// opacity: 0;
// transition: opacity 1s ease-in-out;
animation: anim 2.5s 1 normal ease-in-out forwards;
}
.souligne {
animation: glissement 2.5s 1 normal ease-in-out forwards;
}
}
// &:hover {
// .test {
// opacity: 1;
// }
// opacity: 1;
// transition: width 5s ease-in-out;
@@ -449,6 +464,7 @@
text-transform: uppercase;
align-self: flex-end;
margin:auto;
margin-bottom: 2rem;
}
//
// .bouton :hover {
@@ -26,7 +26,7 @@
<h1>EPAU</h1>
<div class="test" >
<div class="souligne" >
<svg width="100%" height="0.5rem">
<rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" />
</svg>
@@ -5,7 +5,7 @@
<h1>Gouvernance</h1>
<div class="test" >
<div class="souligne" >
<svg width="100%" height="0.5rem">
<rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" />
</svg>