Добрый день уважаемые. Подскажите пожалуйста, как быть с таймингом анимации. Необходимо что б внутренний (innerBlock) двигался в такт с жёлтым блоком (lastBlock)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BlocksMoving</title>
<!-- <link rel="stylesheet" type="text/css" href="normalize.css"> -->
<!-- <link rel="stylesheet" type="text/css" href="blocksStyle.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
#field {
position: relative;
width: 100%;
height: 600px;
/*margin-left: 5%;*/
margin-top: 1%;
/*background-color: yellow;*/
border: 2px solid black;
}
.bigBlock {
position: absolute;
width: 200px;
height: 200px;
top: 200px;
left: 300px;
background-color: red;
border: 1px solid black;
z-index: 3;
/*overflow: hidden;*/
}
.innerBlock {
position: absolute;
width: 160px;
height: 160px;
top: 20px;
left: -300px; /*-162*/
background-color: red;
z-index: 2;
background: radial-gradient(circle, rgba(255, 0, 0, 0.8), rgba(64, 0, 0, 0.57));
box-shadow: 0 0 18px 5px rgba(64, 0, 0, 0.7);
/*animation: innerStep 2000ms linear 700ms;*/
animation: innerStep 2000ms linear infinite alternate;
animation-fill-mode: forwards;
}
@keyframes innerStep {
0%{
left: -300px;
}
100% {
left: 340px;
}
}
.firstBlock, .lastBlock {
position: absolute;
width: 160px;
height: 160px;
top: 220px;
left: 0;
background-color: green;
border: 1px solid black;
z-index: 1;
}
.firstBlock {
/*animation: firstStep 1500ms linear;*/
animation: firstStep 2000ms linear infinite alternate;
animation-fill-mode: forwards;
}
@keyframes firstStep {
0% {
left: 0;
}
/*14%{
left: 140px;
}*/
49.5%, 100% {
left: 300px;
}
}
.lastBlock {
left: 340px; /*340*/
/*left: 640px;*/
background-color: yellow;
/*animation: lastStep 1500ms linear 2000ms;*/
animation: lastStep 3200ms linear 1200ms infinite alternate;
animation-fill-mode: forwards;
}
@keyframes lastStep {
100%, 0% {
left: 340px;
}
30% {
left: 640px;
}
}
</style>
</head>
<body>
<div id="field">
<div class="firstBlock"></div>
<div class="bigBlock">
<div class="innerBlock"></div>
</div>
<div class="lastBlock"></div>
</div>
</body>
</html>
Если на первом этапе ещё можно последнему блоку поставить начальную задержку по времени, то уже на втором проходе блоки рассогласовываються