werobot/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

animation

Browse source
This commit is contained in:
GZod01 2024-06-11 09:14:08 +02:00
parent 48a24578fc
commit 59bd4bbedc
1 changed files with 108 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

30
assets/scss/layouts/photos.scss
View file

@ -1,5 +1,4 @@
.photos-list { .photos-list {
.photos-list-title { .photos-list-title {
margin-bottom: 1em; margin-bottom: 1em;
.fa { .fa {
@ -25,7 +24,6 @@
--width: 100%; --width: 100%;
} }
} }
} }
&.photos-list-photos-len-2 { &.photos-list-photos-len-2 {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
@ -46,7 +44,11 @@
display: block; display: block;
transition: opacity 0.2s; transition: opacity 0.2s;
span#caption { span#caption {
transition: width .5s ease,height .5s ease, border-radius .5s ease, overflow .5s cubic-bezier(1, -0.44, 1, -0.46); transition:
width 0.5s ease,
height 0.5s ease,
border-radius 0.5s ease,
overflow 0.5s cubic-bezier(1, -0.44, 1, -0.46);
display: block; display: block;
background-color: rgba(27, 27, 27, 0.7); background-color: rgba(27, 27, 27, 0.7);
color: white; color: white;
@ -65,7 +67,6 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 100%; border-radius: 100%;
} }
} }
.photos-list-item:hover { .photos-list-item:hover {
opacity: 0.8; opacity: 0.8;
@ -77,6 +78,7 @@
overflow: auto; overflow: auto;
padding: 10px; padding: 10px;
border-radius: 0; border-radius: 0;
animation: in 1s;
} }
} }
@ -84,7 +86,25 @@
float: right; float: right;
} }
} }
@keyframes in {
0% {
overflow: hidden;
}
90% {
overflow: hidden;
}
100% {
overflow: auto;
}
}
// @keyframes out {
// 0% {
// overflow: auto;
// }
// 10% {
// overflow: hidden;
// }
// }
@media (max-width: $responsive-medium) { @media (max-width: $responsive-medium) {
.photos-list { .photos-list {