47 lines
838 B
CSS
47 lines
838 B
CSS
.progressive {
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #efefef
|
|
}
|
|
|
|
.progressive__img {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0)
|
|
}
|
|
|
|
.progressive--not-loaded {
|
|
filter: blur(30px);
|
|
-webkit-filter: blur(30px)
|
|
}
|
|
|
|
.progressive--is-loaded {
|
|
filter: blur(20px);
|
|
-webkit-filter: blur(20px);
|
|
-webkit-animation: sharpen .5s both;
|
|
animation: sharpen .5s both
|
|
}
|
|
|
|
@-webkit-keyframes sharpen {
|
|
from {
|
|
filter: blur(20px);
|
|
-webkit-filter: blur(20px)
|
|
}
|
|
to {
|
|
filter: blur(0);
|
|
-webkit-filter: blur(0)
|
|
}
|
|
}
|
|
|
|
@keyframes sharpen {
|
|
from {
|
|
filter: blur(20px);
|
|
-webkit-filter: blur(20px)
|
|
}
|
|
to {
|
|
filter: blur(0);
|
|
-webkit-filter: blur(0)
|
|
}
|
|
} |