[data-interlace] {
position: relative;
overflow: hidden;
}
[data-interlace] img {
display: block;
top: 0;
width: 100%;
height: 100%;
}
[data-interlace] img:first-of-type {
z-index: 1;
}
[data-interlace=loaded] img:first-of-type {
position: absolute;
}
[data-interlace] img + img {
position: absolute;
opacity: 0;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
-webkit-transition-property: opacity;
transition-property: opacity;
}
[data-interlace=loaded] img + img {
position: absolute;
opacity: 1;
z-index: 1;
}
[data-interlace=loading]::after {
position: absolute;
display: block;
margin-top: -10px;
margin-left: -10px;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
border-radius: 10px;
content: '';
-webkit-box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.8);
box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.8);
-webkit-animation: interlace-load-anim 600ms linear infinite;
animation: interlace-load-anim 600ms linear infinite;
}
@-webkit-keyframes interlace-load-anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes interlace-load-anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}