etoiledebethleem/website
4
1
Fork 1
Code Issues 5 Pull requests 1 Projects 1 Releases Packages Activity Actions

fix(landing/compare): leave hover animation

Browse source
This commit is contained in:
Matthieu Bessat 2023-06-19 00:20:33 +02:00
parent 2ee7f2732a
commit abfd55d14e
2 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
assets/sass/landing.scss
View file

@ -108,14 +108,13 @@
@keyframes compare-anim {
0% {
clip-path: inset(100% 100% 100% 0%);
}
100% {
clip-path: inset(100% 100% 100% 100%);
}
}
.compare-items-dynamic {
.compare-duet {
border-radius: 4px;
overflow: hidden;
position: relative;
@ -126,12 +125,16 @@
overflow: hidden;
clip-path: inset(100% 100% 100% 0%);
}
.compare-hidden {
clip-path: inset(100% 100% 100% 0%);
transition: clip-path 2s cubic-bezier(.86,0,.07,1);
animation-fill-mode: forwards;
}
}
.compare-duet:hover {
.compare-hidden {
animation: compare-anim 2s cubic-bezier(.86,0,.07,1);
animation-fill-mode: forwards;
clip-path: inset(100% 100% 100% 100%);
}
}
}

4
layouts/landing-matthieu/list.html
View file

@ -76,7 +76,7 @@
</div>
</div>
<figcaption>Comparaison crypte vers l'est</figcaption>
<figcaption>Comparaison de la crypte vers l'est</figcaption>
</figure>
</div>
<div class="compare-item compare-west">
@ -93,7 +93,7 @@
</div>
</div>
<figcaption>Comparaison crypte vers l'ouest</figcaption>
<figcaption>Comparaison de la crypte vers l'ouest</figcaption>
</figure>
</figure>
</div>