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; padding: 0 .1em;
vertical-align: top; } 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; } font-weight: 900; }
#header.scrolled #navbar ul.navigation li a { #header.scrolled #navbar ul.navigation li a {
@@ -883,9 +886,20 @@ ul.pagination {
100% { 100% {
width: 100%; } } width: 100%; } }
@keyframes glissement {
from {
margin-left: 100%;
width: 300%; }
to {
margin-left: 0%;
width: 100%; } }
.after-h1 .test { .after-h1 .test {
animation: anim 2.5s 1 normal ease-in-out forwards; } animation: anim 2.5s 1 normal ease-in-out forwards; }
.after-h1 .souligne {
animation: glissement 2.5s 1 normal ease-in-out forwards; }
.programmes { .programmes {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -1041,7 +1055,8 @@ ul.pagination {
background-color: transparent; background-color: transparent;
text-transform: uppercase; text-transform: uppercase;
align-self: flex-end; align-self: flex-end;
margin: auto; } margin: auto;
margin-bottom: 2rem; }
.modal { .modal {
position: fixed; position: fixed;
@@ -49,6 +49,13 @@
vertical-align: top; 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 { #header #navbar ul.navigation li a:hover {
font-weight: 900; font-weight: 900;
} }
@@ -117,6 +124,7 @@
} }
} }
.titre_bsn { .titre_bsn {
display: block; display: block;
@@ -138,23 +146,30 @@
0% {width: 0%;} 0% {width: 0%;}
100% {width: 100%;} 100% {width: 100%;}
} }
.after-h1 { @keyframes glissement {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
.after-h1 {
.test { .test {
// opacity: 0; // opacity: 0;
// transition: opacity 1s ease-in-out; // transition: opacity 1s ease-in-out;
animation: anim 2.5s 1 normal ease-in-out forwards; 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; text-transform: uppercase;
align-self: flex-end; align-self: flex-end;
margin:auto; margin:auto;
margin-bottom: 2rem;
} }
// //
// .bouton :hover { // .bouton :hover {
@@ -26,7 +26,7 @@
<h1>EPAU</h1> <h1>EPAU</h1>
<div class="test" > <div class="souligne" >
<svg width="100%" height="0.5rem"> <svg width="100%" height="0.5rem">
<rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" /> <rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" />
</svg> </svg>
@@ -5,7 +5,7 @@
<h1>Gouvernance</h1> <h1>Gouvernance</h1>
<div class="test" > <div class="souligne" >
<svg width="100%" height="0.5rem"> <svg width="100%" height="0.5rem">
<rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" /> <rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" />
</svg> </svg>