Движение автомобиля

Question

Я только начал учиться, сильно не пинайте. А как сделать чтобы авто останавливалось не по центру, а ближе к левому краю?

Код взят из темы: "Как анимировать колеса картинки автомобиля в формате png, движущегося и останавливающегося с помощью CSS?"

.car{
  margin: 0 auto;
  position: relative;
  width: 400px;
  animation: moving 10s linear -2s infinite;
}
.car:before {
  content:"";
  display:block;
  animation: carmove 3.1s infinite linear;
  background: url('https://i.stack.imgur.com/xWNOG.png') center/cover;
  padding-top:45.25%;
}

.weel{
  animation: wheel 10s infinite -2s linear;
  background: url('https://i.stack.imgur.com/0Osjx.png') center/cover;
  position: absolute;
  bottom:0.8%;
  width: 14.15%;
}
.weel:before {
   content:"";
   display:block;
   padding-top:100%;
}
.weel1{left: 14.5%;}
.weel2{right: 10%;}

/*animations*/
@keyframes carmove{
  0%{transform: translateY(0px);}
  25%{transform: translateY(1px)}
  29%{transform: translateY(2px)}
  33%{transform: translateY(3px)}
  47%{transform: translateY(0px)}
  58%{transform: translateY(1px)}
  62%{transform: translateY(2px)}
  66%{transform: translateY(3px)}
  75%{transform: translateY(1px)}
  100%{transform: translateY(0px)}
}

@keyframes wheel{
 0%{
   transform: rotate(0deg)
  }
  35% {
    transform: rotate(-920deg)
  }
  36%,
  56% {
    transform: rotate(-920deg)
  }
 100%{
   transform: rotate(-1440deg)
  }
}

@keyframes moving {
  0% {
    right: -80em;
    animation-timing-function: ease-out;
  }
  35% {
    right: 0;
  }
  36%,
  56% {
    right: 0;
    animation-timing-function: ease-in;
  }
  100% {
    right: 120%;
  }
}

body {
  overflow:hidden;
}

<div class="car">
  <div class="weel weel1"></div>
  <div class="weel weel2"></div>
</div>

Answer 1

Основное "движение машины" завязано в @keyframes moving.

.car {
  position: relative;
  width: 400px;
  animation: moving 10s linear -2s infinite;
}

.car:before {
  content: "";
  display: block;
  animation: carmove 3.1s infinite linear;
  background: url('//i.stack.imgur.com/xWNOG.png') center/cover;
  padding-top: 45.25%;
}

.weel {
  animation: wheel 10s infinite -2s linear;
  background: url('//i.stack.imgur.com/0Osjx.png') center/cover;
  position: absolute;
  bottom: 0.8%;
  width: 14.15%;
}

.weel:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.weel1 {left: 14.5%;}

.weel2 {right: 10%;}


/*animations*/

@keyframes carmove {
  0%   {transform: translateY(0px);}
  25%  {transform: translateY(1px)}
  29%  {transform: translateY(2px)}
  33%  {transform: translateY(3px)}
  47%  {transform: translateY(0px)}
  58%  {transform: translateY(1px)}
  62%  {transform: translateY(2px)}
  66%  {transform: translateY(3px)}
  75%  {transform: translateY(1px)}
  100% {transform: translateY(0px)}
}

@keyframes wheel {
  0%      {transform: rotate(0deg)}
  35%     {transform: rotate(-920deg)}
  36%,56% {transform: rotate(-920deg)}
  100%    {transform: rotate(-1440deg)}
}

@keyframes moving {
  0% {
    left: calc(100% + 400px);
    animation-timing-function: ease-out;
  }
  35% {left: 0;}
  36%,
  56% {
    left: 0;
    animation-timing-function: ease-in;
  }
  100% {left: -400px;}
}

body {
  overflow: hidden;
}

<div class="car">
  <div class="weel weel1"></div>
  <div class="weel weel2"></div>
</div>

Дополнение по вопросам из комментария

.car {
  position: relative;
  width: 400px;
  animation: moving 10s linear -2s infinite;
}

.car:before {
  content: "";
  display: block;
  animation: carmove 3.1s infinite linear;
  background: url('//i.stack.imgur.com/xWNOG.png') center/cover;
  padding-top: 45.25%;
}

.weel {
  animation: wheel 10s infinite -2s linear;
  background: url('//i.stack.imgur.com/0Osjx.png') center/cover;
  position: absolute;
  bottom: 0.8%;
  width: 14.15%;
}

.weel:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.weel1 {left: 14.5%;}

.weel2 {right: 10%;}

.car-text {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}

/*animations*/

@keyframes carmove {
  0%   {transform: translateY(0px);}
  25%  {transform: translateY(1px)}
  29%  {transform: translateY(2px)}
  33%  {transform: translateY(3px)}
  47%  {transform: translateY(0px)}
  58%  {transform: translateY(1px)}
  62%  {transform: translateY(2px)}
  66%  {transform: translateY(3px)}
  75%  {transform: translateY(1px)}
  100% {transform: translateY(0px)}
}

@keyframes wheel {
  0%      {transform: rotate(0deg)}
  64%     {transform: rotate(-920deg)}
  65%,86% {transform: rotate(-920deg)}
  100%    {transform: rotate(-1440deg)}
}

@keyframes moving {
  0% {
    left: calc(100% + 400px);
    animation-timing-function: ease-out;
  }
  65% {left: 0;}
  66%,
  86% {
    left: 0;
    animation-timing-function: ease-in;
  }
  100% {left: -400px;}
}

body {
  overflow: hidden;
}

<div class="car">
  <div class="weel weel1"></div>
  <div class="weel weel2"></div>
  <div class="car-text">НОМЕР ТЕЛЕФОНА</div>
</div>

БЛОГ НА HUSL

Движение автомобиля

Ответы (1 шт):