<svg>
<pattern id="p-1" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
<image xlink:href="https://img-fotki.yandex.ru/get/366459/5091629.a5/0_93a5a_b49d3852_XL" width="200" height="200"/>
</pattern>
<pattern id="p-2" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
<image xlink:href="https://img-fotki.yandex.ru/get/508985/5091629.a5/0_93a58_d8962d8c_XL" width="200" height="200"/>
</pattern>
<pattern id="p-3" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
<image xlink:href="https://img-fotki.yandex.ru/get/404236/5091629.a5/0_93a59_ae3b0041_XL" width="200" height="200"/>
</pattern>
<pattern id="p-4" width="200" height="200" viewBox="0 0 200 200" patternUnits="userSpaceOnUse">
<image xlink:href="https://img-fotki.yandex.ru/get/243492/5091629.a5/0_93a5b_c98c9d9d_XL" width="200" height="200"/>
</pattern>
<mask id="m-lines">
<line x1="50%" y1="0%" x2="50%" y2="100%" class="elem-mask"/>
</mask>
<g class="rotation">
<rect width="100%" height="100%" fill="url(#p-1)" class="rotation__item"/>
<rect width="100%" height="100%" fill="url(#p-2)" class="rotation__item"/>
<rect width="100%" height="100%" fill="url(#p-3)" class="rotation__item"/>
<rect width="100%" height="100%" fill="url(#p-4)" class="rotation__item"/>
</g>
</svg>
<div class="progress"></div>
$mask-time: 7s;
.elem-mask {
stroke: #FFF;
stroke-width: 0;
animation: stroke-width $mask-time infinite;
}
@keyframes stroke-width {
50% {
stroke-width: 1000;
}
}
/* Change Image Animation
-------------------------------*/
$max: 4;
$duration: $mask-time * $max;//8s;
$step: $duration/$max;
$step-perc: percentage(1/$max);
.rotation__item {
opacity: 0;
animation: hide $duration step-end infinite;
mask: url(#m-lines);
@for $item from 2 through $max {
&:nth-child(#{$max}n + #{$item}) {
animation-delay: $step*($item - 1);
}
}
}
@keyframes hide {
0% {
opacity: 1;
}
#{$step-perc} {
opacity: 0;
}
}
/* Progress Bar
-------------------------------*/
.progress {
width: 0;
height: 5px;
background: rgba(154, 205, 50,.5);
animation: timer $duration infinite linear;
}
@keyframes timer {
100% {
width: 100%;
}
}
/* Common
-------------------------------*/
BODY {
background: #FFF linear-gradient(90deg, rgba(154, 205, 50,.3) 50%, rgba(154, 205, 50,.15) 50%);
background-size: 2em 2em;
perspective: 500px;
perspective-origin: center center;
}
/* Demo layers
-------------------------------*/
$rotation-height: 270px;
svg {
width: 100%;
height: $rotation-height;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.