<div class="container"><div class="row"><h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2></div></div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Work Sans', sans-serif;
font-weight: 400;
height: 100vh;
}
.wrapper {
background: linear-gradient(60deg, #420285, #08BDBD);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
.carousel {
position: relative;
width: 100%;
max-width: 500px;
display: flex;
justify-content: center;
flex-direction: column;
}
.carousel__item {
display: flex;
align-items: center;
position: absolute;
width: 100%;
padding: 0 12px;
opacity: 0;
-webkit-filter: drop-shadow(0 2px 2px #555);
filter: drop-shadow(0 2px 2px #555);
will-change: transform, opacity;
-webkit-animation: carousel-animate-vertical 24s linear infinite;
animation: carousel-animate-vertical 24s linear infinite;
}
.carousel__item:nth-child(1) {
-webkit-animation-delay: calc(4.8s * -1);
animation-delay: calc(4.8s * -1);
}
.carousel__item:nth-child(2) {
-webkit-animation-delay: calc(4.8s * 0);
animation-delay: calc(4.8s * 0);
}
.carousel__item:nth-child(3) {
-webkit-animation-delay: calc(4.8s * 1);
animation-delay: calc(4.8s * 1);
}
.carousel__item:nth-child(4) {
-webkit-animation-delay: calc(4.8s * 2);
animation-delay: calc(4.8s * 2);
}
.carousel__item:last-child {
-webkit-animation-delay: calc(-4.8s * 2);
animation-delay: calc(-4.8s * 2);
}
.carousel__item-head {
border-radius: 50%;
background-color: #d7f7fc;
width: 90px;
height: 90px;
padding: 14px;
position: relative;
margin-right: -45px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
}
.carousel__item-body {
width: 100%;
background-color: #fff;
border-radius: 8px;
padding: 16px 20px 16px 70px;
}
.title {
text-transform: uppercase;
font-size: 20px;
margin-top: 10px;
}
@-webkit-keyframes carousel-animate-vertical {
0% {
-webkit-transform: translateX(100%) scale(0.5);
transform: translateX(100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
3%,
20% {
-webkit-transform: translateX(100%) scale(0.7);
transform: translateX(100%) scale(0.7);
opacity: .4;
visibility: visible;
}
23%,
40% {
-webkit-transform: translateX(0) scale(1);
transform: translateX(0) scale(1);
opacity: 1;
visibility: visible;
}
43%,
60% {
-webkit-transform: translateX(-100%) scale(0.7);
transform: translateX(-100%) scale(0.7);
opacity: .4;
visibility: visible;
}
63% {
-webkit-transform: translateX(-100%) scale(0.5);
transform: translateX(-100%) scale(0.5);
opacity: 0;
visibility: visible;
}
100% {
-webkit-transform: translateX(-100%) scale(0.5);
transform: translateX(-100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
}
@keyframes carousel-animate-vertical {
0% {
-webkit-transform: translateX(100%) scale(0.5);
transform: translateX(100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
3%,
20% {
-webkit-transform: translateX(100%) scale(0.7);
transform: translateX(100%) scale(0.7);
opacity: .4;
visibility: visible;
}
23%,
40% {
-webkit-transform: translateX(0) scale(1);
transform: translateX(0) scale(1);
opacity: 1;
visibility: visible;
}
43%,
60% {
-webkit-transform: translateX(-100%) scale(0.7);
transform: translateX(-100%) scale(0.7);
opacity: .4;
visibility: visible;
}
63% {
-webkit-transform: translateX(-100%) scale(0.5);
transform: translateX(-100%) scale(0.5);
opacity: 0;
visibility: visible;
}
100% {
-webkit-transform: translateX(-100%) scale(0.5);
transform: translateX(-100%) scale(0.5);
opacity: 0;
visibility: hidden;
}
}