body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
@keyframes sokak{
    from{
        left: 0;
    }to{
        left: calc(-5300px + 100vw);
    }
}
div.sokak{
    position: absolute;
    left: 0;
    top: 0;
    width: 5300px;
    height: 600px;
    background-image: url(street/street.png);
    background-size: 100% 100%;
    background-position: center center;
    animation: sokak 10s linear infinite;
}
div.ambulans{
    height: 250px;
    width: 350px;
    background-image: url(ambulans/ambulans.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 25vw;
    top: 40vh;
    z-index: 1;
}

@keyframes sedan{
    0% { right: calc(0 - 260px);}
    100% {right: calc(100% + 250px);}
}
div.sedan{
    height:150px;
    width: 250px;
    background-image: url(sedan/sedan.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    right: -250px;
    top: 22vw;
    animation: sedan 10s linear infinite;
}

div.suv{
    height:150px;
    width: 250px;
    background-image: url(suv/suv.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    right: -250px;
    top: 22vw;
    animation: sedan 10s linear infinite;
    animation-delay: 4s;
}
div.ucak{
    height:50px;
    width: 150px;
    background-image: url(ucak/ucak.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    right: -250px;
    top: 2vw;
    animation: sedan 4s  linear infinite ;
    
}
div.ambulans > div{
    width: 50px;
    height:50px;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 65%;
    transition: all liner 1s;
    transform: rotate(0deg);
}
@keyframes teker {
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(360deg);
    }
}
div.ambulans > div:nth-child(1){
    
    background-image: url(ambulans/teker-a.png);
    left: 22%;
    animation: teker 1s linear    infinite;
}
div.ambulans > div:nth-child(2){
    left: 75%;
    background-image: url(ambulans/teker-b.png);
    animation: teker 1s linear    infinite;
}

div.sedan > div{
    width: 38px;
    height:38px;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 58%;
    transition: all liner 1s;
    transform: rotate(0deg);
}

div.sedan > div:nth-child(1){
    
    background-image: url(sedan/teker-a.png);
    right: 71%;
    animation: teker 1s linear    infinite;
}
div.sedan > div:nth-child(2){
    right: 11%;
    background-image: url(sedan/teker-b.png);
    animation: teker 1s linear    infinite;
}
div.suv > div{
    width: 33px;
    height:33px;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 61%;
    transition: all liner 1s;
    transform: rotate(0deg);
}

div.suv > div:nth-child(1){
    
    background-image: url(sedan/teker-a.png);
    right: 63.5%;
    animation: teker 1s linear    infinite;
}
div.suv > div:nth-child(2){
    right: 18%;
    background-image: url(sedan/teker-b.png);
    animation: teker 1s linear    infinite;
}