jellyfish-web/src/components/images/style.css

47 lines
1.1 KiB
CSS
Raw Normal View History

2018-10-23 01:13:23 +03:00
.lazy-image-fadein {
animation: lazy-image-fadein 330ms ease-in normal both;
2018-10-23 01:13:23 +03:00
}
.lazy-image-fadein-fast {
animation: lazy-image-fadein 160ms ease-in normal both;
2018-10-23 01:13:23 +03:00
}
@keyframes lazy-image-fadein {
from {
opacity: 0;
2018-10-23 01:13:23 +03:00
}
to {
opacity: 1;
2018-10-23 01:13:23 +03:00
}
}
.lazy-image-fadein {
opacity: 0;
2020-01-09 19:35:19 +01:00
-webkit-animation-duration: .8s;
-moz-animation-duration: .8s;
-o-animation-duration: .8s;
2018-10-23 01:13:23 +03:00
animation-duration: .8s;
2020-01-09 19:35:19 +01:00
-webkit-animation-name: popInAnimation;
-moz-animation-name: popInAnimation;
-o-animation-name: popInAnimation;
2018-10-23 01:13:23 +03:00
animation-name: popInAnimation;
2020-01-09 19:35:19 +01:00
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
2018-10-23 01:13:23 +03:00
animation-fill-mode: forwards;
2020-01-09 19:35:19 +01:00
-webkit-animation-timing-function: cubic-bezier(0,0,.5,1);
-moz-animation-timing-function: cubic-bezier(0,0,.5,1);
-o-animation-timing-function: cubic-bezier(0,0,.5,1);
animation-timing-function: cubic-bezier(0,0,.5,1);
2018-10-23 01:13:23 +03:00
}
@keyframes popInAnimation {
0% {
opacity: 0;
2018-10-23 01:13:23 +03:00
}
100% {
opacity: 1;
2018-10-23 01:13:23 +03:00
}
}