I need to split my 2 block, on 4 blocks. I mean calibrate
,connect
,train
,analyze
needs to be separately, but in my code calibrate
and connect
are in one block, and train
and analyze
the same in another block with boxshadow. I splited them, but in this case my animation does not work correctly. How can I split them without losing my animation and bring them closely to image?
.div-wrap {
display: flex;
align-items: center;
flex-flow: column nowrap;
justify-content: space-between;
text-align: center;
}
:root {
--time: 24;
}
.div-txt p.label {
color: #0065de;
font: bold 16px 'Arial';
animation-duration: calc(var(--time) * 1s);
animation-iteration-count: infinite;
animation-name: color-change;
}
.div-txt:nth-child(1) p.label:nth-child(2) {
animation-delay: 0s;
}
.div-txt:nth-child(1) p.label:nth-child(5) {
animation-delay: calc(var(--time) / 4 * 1s);
}
.div-txt:nth-child(3) p.label:nth-child(2) {
animation-delay: calc(var(--time) / 2 * 1s);
}
.div-txt:nth-child(3) p.label:nth-child(5) {
animation-delay: calc(var(--time) / 1.33 * 1s);
}
.div-img {
position: relative;
height: 600px;
width: 600px;
/* border: 2px solid #ccc;*/
/* background: radial-gradient(ellipse at center, rgba(153,153,153,1) 0%,rgba(0,0,0,1) 100%);*/
}
.div-img img {
position: absolute;
top: 0;
left: 50%;
display: block;
transform: translateX(-50%);
opacity: 0;
animation-duration: calc(var(--time) * 1s);
animation-iteration-count: infinite;
animation-name: fade;
}
.div-img img:nth-child(1) {
animation-delay: 0s;
}
.div-img img:nth-child(2) {
animation-delay: calc(var(--time) / 8 * 1s);
}
.div-img img:nth-child(3) {
animation-delay: calc(var(--time) / 4 * 1s);
}
.div-img img:nth-child(4) {
animation-delay: calc(var(--time) / 2.66 * 1s);
}
.div-img img:nth-child(5) {
animation-delay: calc(var(--time) / 2 * 1s);
}
.div-img img:nth-child(6) {
animation-delay: calc(var(--time) / 1.6 * 1s);
}
.div-img img:nth-child(7) {
animation-delay: calc(var(--time) / 1.33 * 1s);
}
.div-img img:nth-child(8) {
animation-delay: calc(var(--time) / 1.14 * 1s);
}
.div-txt {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
width: 300px;
margin: 0 auto;
}
@keyframes color-change {
0%,
25%,
100% {
color: black;
}
1%,
24% {
color: #ED0400;
}
}
@keyframes fade {
0%,
20%,
100% {
opacity: 0;
z-index: auto;
}
1%,
99% {
z-index: 1;
}
8%,
12% {
opacity: 1;
}
}
@media all and (min-width: 1170px) {
.div-wrap {
flex-flow: row nowrap;
justify-content: space-around;
}
}
@media all and (max-width: 600px) {
.div-img {
max-width: 100%;
}
}
<div class="div-wrap">
<div class="div-txt">
<img src="img/svgforlia/connect.svg" style="width: 36px; height: 36px;">
<p class="label" style="margin-top: 15px;">Connect</p>
<p>Wear Lia device on the shoulders, <br>turn on it and connect application <br>with device.</p>
<img src="img/svgforlia/calibrate.svg" style="width: 36px; height: 36px;">
<p class="label" style="margin-top: 15px;">Calibrate</p>
<p>After connection, set up calibration to <br>help device remember your upright <br>and slouch positions.</p>
</div>
<div class="div-img">
<img src="img/mockups/2.png" title="Image 1">
<img src="img/mockups/3.png" title="Image 2">
<img src="img/mockups/5.png" title="Image 3">
<img src="img/mockups/6.png" title="Image 4">
<img src="img/mockups/7.png" title="Image 5">
<img src="img/mockups/8.png" title="Image 6">
<img src="img/mockups/9.png" title="Image 7">
<img src="img/mockups/10.png" title="Image 8">
</div>
<div class="div-txt">
<img src="img/svgforlia/train.svg" style="width: 36px; height: 36px;">
<p class="label" style="color: #0065de; margin-top: 10px;">Train</p>
<p>Train your posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>
<img src="img/svgforlia/analyze.svg" style="width: 36px; height: 36px;">
<p class="label" style="margin-top: 15px;">Analyze</p>
<p>Statistics let you track and analyze <br>the progress you’ve made from first <br>training to the last.</p>
</div>
</div>
See Question&Answers more detail:os