Как сделать, чтобы в конце этой анимации оба объекта имели одинаковый отступ справа?

Question

[Роман Родионов]

Анимация заканчивается:

• Блок 1 спозиционирован с помощью left: 93.5%;
  
• Блок 2 имеет с помощью right: 50px.
  

Но при изменении ширины экрана все, естественно, ломается.
Мне нужно, чтобы оба блока находились друг над другом в конце анимации, даже при изменении ширины экрана.
Пробовал сделать через float, не получилось..
codepen.io/RRodionov/pen/qbOxdy

Answer 1

[Антон Щербаков]

.wrapper {
  width: 100%;
  height: 200px;
  padding: 20px;
  background-color: orange;
}

button {
  position: absolute;
  width: 50px;
  left: calc(50% - 50px);
  top: 200px;
}

.first {
  position: absolute;
  top: 20px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.second {
  position: absolute;
  right: 0;
  height: 100px;
  width: 100px;
  margin: 0 50px 0 0;
  background-color: indianred;
}

@keyframes first-animation {
  100% {
    left: 100%;
    top: 80px;
    height: 50px;
    width: 50px;
    margin: 0 0 0 -100px;
  }
}

.first-animation {
  animation: first-animation both 2s normal;
}

@keyframes second-animation {
  100% {
    height: 50px;
    width: 50px;
  }
}

.second-animation {
  animation: second-animation both 2s normal;
}

Comments

[Роман Родионов]

Благодарю, уважаемый!