Javascript-форум - Согласование анимации движения нескольких моделей

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Согласование анимации движения нескольких моделей (https://javascript.ru/forum/xhtml-html-css/65927-soglasovanie-animacii-dvizheniya-neskolkikh-modelejj.html)

Согласование анимации движения нескольких моделей

Добрый день уважаемые. Подскажите пожалуйста, как быть с таймингом анимации. Необходимо что б внутренний (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>

Если на первом этапе ещё можно последнему блоку поставить начальную задержку по времени, то уже на втором проходе блоки рассогласовываються

Black_Star,
Тебе надо высчитать пропорции относительно позиции и сдвига

Black_Star,
Отставить. Почему нельзя поставить один анимационный класс?

Цитата:

Сообщение от Coriolan161

Отставить. Почему нельзя поставить один анимационный класс?

Не понял вопроса.
У меня три элемента. 1-й и 2-й синхронизированые по времени. Последний, нет.
Если у класса .bigBlock разкоментировать overflow: hidden; Вы увидете что я хочу получить на выходе

<!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;
        }
 
        50%, 100% {
                left: 300px;
        }
}
 
.lastBlock {
        left: 340px; /*340*/
        /*left: 640px;*/
        background-color: yellow;
        /*animation: lastStep 1500ms linear 2000ms;*/
        animation: lastStep 2000ms linear 1005ms infinite alternate;
        animation-fill-mode: forwards;
}
 
@keyframes lastStep {
 
        100%, 0% {
                left: 340px;
        }
 
        50%  {
                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>

join, спасибо
Интересно получилось. Не совсем то что надо, но спасибо :)