CSS Hakkında Yardım

Question

Selamlar hayırlı geceler,şöyle bir kodum varda tavşan en sağa gidince 180 derece dönerken sadece dönerkenki kısmı hızlandırmak istiyorum nasıl yapabilirim? 
 animation: hop 30s linear infinite; kısmını hızlandırınca sağa sola koşma hızıda hızlanıyor bunu istemiyorum

.rabbit {
            width: 100px;
            height: 100px;
            background-image: url('rabbit3.gif'); 
            background-size: cover;
            position: absolute;
            animation: hop 30s linear infinite;
            top: 60px;
        }
        @keyframes hop {
            0%, 100% {
                left: 0;
            }
            50% {
                left: 100%;
            }
        }
        @keyframes hop {
    0% {
        left: 0;
        transform: scaleX(1);
    }
    25% {
        left: 100%;
        transform: scaleX(1);
    }
    50% {
        left: 100%;
        transform: scaleX(-1);
    }
    75% {
        left: 0;
        transform: scaleX(-1);
    }
    100% {
        left: 0;
        transform: scaleX(1);
    }
}

agabeyoglugrup · Answer

Bu durumu çözmek için CSS keyframes içerisinde left ve transform özelliklerini ayrı ayrı animasyonlara bölüp, farklı hızlarda çalışmalarını sağlayabiliriz.

.rabbit {
    width: 100px;
    height: 100px;
    background-image: url('rabbit3.gif'); 
    background-size: cover;
    position: absolute;
    animation: run 30s linear infinite, flip 1s steps(1) infinite;
    top: 60px;
}

@keyframes run {
    0%, 100% {
        left: 0;
    }
    50% {
        left: 100%;
    }
}

@keyframes flip {
    0%, 100% {
        transform: scaleX(1);
    }
    49.9999% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(-1);
    }
    99.9999% {
        transform: scaleX(-1);
    }
}

run animasyonu tavşanın sağa ve sola hareketini kontrol ediyor ve 30 saniye boyunca sürekli çalışıyor. flip animasyonu ise tavşanın dönüşünü kontrol ediyor ve sadece 1 saniye sürüyor. Bu sayede dönüş hızlı bir şekilde gerçekleşiyor ama koşu hızı aynı kalıyor.
steps(1) fonksiyonu, animasyonun sadece bir adım içermesini sağlayarak aniden gerçekleşmesini sağlıyor. Bu, dönüşün çok hızlı olmasını sağlar. 49.9999% ve 99.9999% gibi değerler, dönüşün tam olarak %50 ve %100'de gerçekleşmesini sağlamak için kullanılıyor.

TheSeth · Answer

agabeyoglugrup adlı üyeden alıntı:						mesajı görüntüle									Bu durumu çözmek için CSS keyframes içerisinde left ve transform özelliklerini ayrı ayrı animasyonlara bölüp, farklı hızlarda çalışmalarını sağlayabiliriz.

.rabbit {
    width: 100px;
    height: 100px;
    background-image: url('rabbit3.gif');
    background-size: cover;
    position: absolute;
    animation: run 30s linear infinite, flip 1s steps(1) infinite;
    top: 60px;
}

@keyframes run {
    0%, 100% {
        left: 0;
    }
    50% {
        left: 100%;
    }
}

@keyframes flip {
    0%, 100% {
        transform: scaleX(1);
    }
    49.9999% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(-1);
    }
    99.9999% {
        transform: scaleX(-1);
    }
}run animasyonu tavşanın sağa ve sola hareketini kontrol ediyor ve 30 saniye boyunca sürekli çalışıyor. flip animasyonu ise tavşanın dönüşünü kontrol ediyor ve sadece 1 saniye sürüyor. Bu sayede dönüş hızlı bir şekilde gerçekleşiyor ama koşu hızı aynı kalıyor.
steps(1) fonksiyonu, animasyonun sadece bir adım içermesini sağlayarak aniden gerçekleşmesini sağlıyor. Bu, dönüşün çok hızlı olmasını sağlar. 49.9999% ve 99.9999% gibi değerler, dönüşün tam olarak %50 ve %100'de gerçekleşmesini sağlamak için kullanılıyor. 		Hocam böyle olunca sürekli 180 ve 0 dereceye dönüyor,bunu sitenin en sağına gidince 180 derece olarak tavşanın geri sitenin en sola gitmesini nasıl yapabilirim? En sola gidincede yine 0 derece olup sitenin en sağına gidecek

agabeyoglugrup · Answer

Birde bunu dener misiniz ?

.rabbit {
    width: 100px;
    height: 100px;
    background-image: url('rabbit3.gif');
    background-size: cover;
    position: absolute;
    animation: run 30s linear infinite, flip 0.5s steps(1) infinite;
    top: 60px;
}

@keyframes run {
    0%, 100% {
        left: 0;
        transform: scaleX(1);
    }
    25% {
        left: 100%;
        transform: scaleX(1);
    }
    50% {
        left: 100%;
        transform: scaleX(-1);
    }
    75% {
        left: 0;
        transform: scaleX(-1);
    }
}

@keyframes flip {
    0%, 24.9999% {
        transform: scaleX(1);
    }
    25%, 74.9999% {
        transform: scaleX(-1);
    }
    75%, 100% {
        transform: scaleX(1);
    }
}

TheSeth · Answer

agabeyoglugrup adlı üyeden alıntı:						mesajı görüntüle									Birde bunu dener misiniz ?

.rabbit {
    width: 100px;
    height: 100px;
    background-image: url('rabbit3.gif');
    background-size: cover;
    position: absolute;
    animation: run 30s linear infinite, flip 0.5s steps(1) infinite;
    top: 60px;
}

@keyframes run {
    0%, 100% {
        left: 0;
        transform: scaleX(1);
    }
    25% {
        left: 100%;
        transform: scaleX(1);
    }
    50% {
        left: 100%;
        transform: scaleX(-1);
    }
    75% {
        left: 0;
        transform: scaleX(-1);
    }
}

@keyframes flip {
    0%, 24.9999% {
        transform: scaleX(1);
    }
    25%, 74.9999% {
        transform: scaleX(-1);
    }
    75%, 100% {
        transform: scaleX(1);
    }
} 		Hocam aynı yine

TheSeth · Answer

@agabeyoglugrup; çözdüm hocam,yinede vaktinizi ayırdığınız için teşekkür ederim