Proste animowane tło

pytanie zadane 7 lipca 2019 w HTML i CSS przez Allen Obywatel (1,010 p.)
zamknięte 8 lipca 2019 przez Allen

Czy mógłby mi ktoś wytłumaczyć co robię źle i dlaczego kod nie działa. Chcę stworzyć płynne przesuwanie się drzew tak, aby dawało to złudzenie ruchu pojazdu.

html, body
{
    height: 100%;
    width: 100%;
    overflow: hidden; /*---------------------*/
    margin: 0;
}

.sky, .grass, .road
{
    position: relative; /*-------------*/
}

.sky
{
    background-color: skyblue;
    height: 40%;
}

.grass
{
    background-color: seagreen;
    height: 30%;
}

.road
{
    background: #1a1a1a; /*-------------*/
    box-sizing: border-box; /*-------------*/
    height: 30%;
    border-top: 10px solid grey;
    border-bottom: 10px solid grey;
    width: 100%;
}

.lines
{
    box-sizing: border-box;
    border: 5px dashed #fff;
    height: 0px;
    width: 100%;
    position: absolute;
    top: 45%; /*-------------*/
}

.car
{
    position: absolute;
    top: -40px;
    right: 120px;
    animation: jump .6s 8s ease;
    z-index: 100;
    animation: car 1.5s linear infinite;
}

.tree
{
    height: 160px;
    width: 130px;
    position: absolute;
}

.tree:nth-child(1)
{
    top: -60px;
    left: -530px;
    animation: trees1 9s linear infinite;
}

.tree:nth-child(2)
{
    top: 30px;
    left: -130px;
    animation: trees2 6s linear infinite;
}

@keyframes trees1 {
  0% {
    transform: translateX(0);
  }
  
  100% {
    -o-transform: translateX(-o-calc(100%+530px));
    -ms-transform: translateX(c-ms-alc(100%+530px));
    -moz-transform: translateX(-moz-calc(100%+530px));
    -webkit-transform: translateX(-webkit-calc(100%+530px));
    transform: translateX(calc(100%+530px));
  }
}

@keyframes trees2 {
  0% {
    transform: translateX(0);
  }
  
  100% {
     -o-transform: translateX(-o-calc(100%+130px));
    -ms-transform: translateX(c-ms-alc(100%+130px));
    -moz-transform: translateX(-moz-calc(100%+130px));
    -webkit-transform: translateX(-webkit-calc(100%+130px));
    transform: translateX(calc(100%+130px));
  }
}

@keyframes car
{
    50%
    {
        transform: translateY(10px);
    }
}

komentarz zamknięcia: samodzielnie rozwiązałem problem

1 odpowiedź

odpowiedź 7 lipca 2019 przez Hardwell Dyskutant (8,980 p.)

Podeślij cały kod razem z html

komentarz 7 lipca 2019 przez Allen Obywatel (1,010 p.)

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<title>Race</title>
	<meta http-equiv="X-UA-Compatibile" content="IE=edge,chrome=1"/>
	<link href="main.css" rel="stylesheet" type="text/css" />

</head>
<body>
   <div class="sky">
       <img class="cloud" src="cloud.png">
       <img class="cloud" src="cloud.png">
   </div>
   <div class="grass">
        <img src="tree.png" class="tree">
        <img src="tree.png" class="tree">
   </div>
   <div class="road">
       <div class="lines"></div>
       <img class="car" src="car.png">
       <img class="couple" src="couple.png">
       <img class="ue" src="ue.png">
       <img class="fem" src="fem.png">
       <img class="flame" src="flame.png">
       <img class="rocket" src="rocket.png">
    </div>
 
</body>
</html>

html, body
{
    height: 100%;
    width: 100%;
    overflow: hidden; /*---------------------*/
    margin: 0;
}

.sky, .grass, .road
{
    position: relative; /*-------------*/
}

.sky
{
    background-color: skyblue;
    height: 40%;
}

.grass
{
    background-color: seagreen;
    height: 30%;
}

.road
{
    background: #1a1a1a; /*-------------*/
    box-sizing: border-box; /*-------------*/
    height: 30%;
    border-top: 10px solid grey;
    border-bottom: 10px solid grey;
    width: 100%;
}

.lines
{
    box-sizing: border-box;
    border: 5px dashed #fff;
    height: 0px;
    width: 100%;
    position: absolute;
    top: 45%; /*-------------*/
}

.car
{
    position: absolute;
    top: -40px;
    right: 120px;
    animation: jump .6s 8s ease;
    z-index: 100;
    animation: car 1.5s linear infinite, jump 1.7s 3.8s ease-in-out;
}

.couple
{
    height: 190px;
    width: 220px;
    position: absolute;
    left: 80px;
    animation: moving 2.8s both linear;
}

.ue
{
    width: 180px;
    height: 180px;
    position: absolute;
    left: -300px;
    top: 10px;
    animation: ue 2.2s 3s forwards ease;
}

.cloud
{
    position: absolute;
}

.cloud:nth-child(1)
{
    width: 200px;
    top: 120px;
    opacity: .5;
    animation: wind 70s linear infinite;
}
.cloud:nth-child(2)
{
    width: 300px;
    top: 0px;
    animation: wind 40s linear infinite;
}

.tree
{
    height: 160px;
    width: 130px;
    position: absolute;
}

.tree:nth-child(1)
{
    top: -60px;
    left: -530px;
    animation: trees1 9s linear infinite;
}

.tree:nth-child(2)
{
    top: 30px;
    left: -130px;
    animation: trees2 6s linear infinite;
}

.fem
{
    width: 180px;
    height: 180px;
    z-index: 100;
    position: absolute;
    left: -900px;
    animation: fem 4s 5s forwards linear;
}

.flame
{
    width: 240px;
    height: 240px;
    z-index: 100;
    position: absolute;
    right: 200px;
    top: -55px;
    animation: flame 3s 8.2s both ease;
}

.rocket
{
    height: 250px;
    width: 300px;
    transform: rotate(180deg);
    position: absolute;
    top: -750px;
    right: 100px;
    z-index: 100;
    animation: rocket 2s 9s forwards ease-in-out;
}

@keyframes trees1 {
  0% {
    transform: translateX(0);
  }
  
  100% {
    -o-transform: translateX(-o-calc(100%+530px));
    -ms-transform: translateX(c-ms-alc(100%+530px));
    -moz-transform: translateX(-moz-calc(100%+530px));
    -webkit-transform: translateX(-webkit-calc(100%+530px));
    transform: translateX(calc(100%+530px));
  }
}

@keyframes trees2 {
  0% {
    transform: translateX(0);
  }
  
  100% {
    -o-transform: translateX(-o-calc(100%+130px));
    -ms-transform: translateX(c-ms-alc(100%+130px));
    -moz-transform: translateX(-moz-calc(100%+130px));
    -webkit-transform: translateX(-webkit-calc(100%+130px));
    transform: translateX(calc(100%+130px));
  }
}

@keyframes car
{
    50%
    {
        transform: translateY(10px);
    }
}

@keyframes wind
{
    from
    {
        left: -300px;
    }
    to
    {
        left: 100%;
    }
}

@keyframes moving
{
    0%
    {
       transform: translateX(0);
    }
    60%
    {
       transform: translateX(790px);
    }
    100%
    {
       transform: translate(1200px, -700px)
    }
}

@keyframes ue
{
    0%
    {
        transform: translateX(0);
        height: 180px;
        top: 10px;
    }
    97%
    {
        transform: translateX(1300px);
        height: 180px;
        top: 10px;
    }
    100%
    {
        transform: translateX(1300px);
        height: 15px;
        top: 100px;
    }
}

@keyframes jump
{
    0%
    {
        top: -40px;
    }
    50%
    {
        top:-190px;
    }
    100%
    {
       top: -40px; 
    }
}

@keyframes fem
{
    0%
    {
        transform: translateX(0);
        opacity: 1;
    }
    90%
    {
        transform: translateX(1900px);
        opacity: .8;
    }
    95%
    {
        transform: translateX(1900px);
        opacity: .7;
    }
    96%
    {
        opacity: .6;
    }
    97%
    {
        opacity: .4;
    }
    98%
    {
        opacity: .2;
    }
    100%
    {
        transform: translateX(1900px);
        opacity: 0;
    }
}

@keyframes flame
{
    0%
    {
        opacity: 0;
    }
    5%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@keyframes rocket
{
    0%
    {
        transform: translateY(0);
    }
    100%
    {
        transform: translateY(760px);
    }
}