Animation özelliğinde animasyon hızını değiştirmek, zamanlama fonksiyonlarını (ease-in-out gibi) uygulamak ve kutunun başlangıç pozisyonunu, boyutunu, renklerini ve sınır efektlerini değiştirmek mümkündür. İşte tüm bu iyileştirmeleri içeren güncellenmiş CSS ve HTML kodu örneğini core mvc ile yapalım.

1. Animasyon Hızını Değiştirme

Animasyon hızını değiştirmek için, animation özelliğindeki süreyi (8s) değiştirebiliriz. Örneğin, süreyi 6s yaparak animasyonu daha hızlı hale getirebiliriz. Ayrıca, animasyonun zamanlamasını ease-in-out olarak değiştirebiliriz. Bu, animasyonun başında ve sonunda yavaşlamasını sağlar.

2. Başlangıç Pozisyonu ve Boyutu

Kutunun başlangıç pozisyonunu değiştirebiliriz. Örneğin, kutu sayfa yüklendiğinde ekranın merkezine yerleştirilebilir. Ayrıca, kutunun boyutunu biraz büyütebiliriz.

3. Kutunun Rengi ve Sınır Efekti

Kutunun rengini animasyon sırasında değiştirebiliriz ve kutuya bir sınır (border) ekleyebiliriz.

/* CSS Animasyonu - 4 kenar hareketi */
@keyframes moveAround {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: red;
        border: 2px solid black;
    }

    25% {
        top: 0;
        left: 100%;
        transform: translateX(-100%) translateY(-50%);
        background-color: blue;
        border: 2px solid green;
    }

    50% {
        top: 100%;
        left: 100%;
        transform: translate(-100%, -100%);
        background-color: green;
        border: 2px solid yellow;
    }

    75% {
        top: 100%;
        left: 0;
        transform: translateX(0) translateY(-100%);
        background-color: orange;
        border: 2px solid red;
    }

    100% {
        top: 50%;
        left: 0;
        transform: translateX(0) translateY(-50%);
        background-color: purple;
        border: 2px solid blue;
    }
}

.animated-box {
    position: absolute;
    width: 120px;  /* Boyutunu büyüttük */
    height: 120px;
    background-color: red;
    animation: moveAround 6s infinite ease-in-out; /* 6 saniyeye hızlandırıldı ve ease-in-out eklendi */
    border-radius: 10px; /* Köşeleri yuvarladık */
    transition: transform 0.5s ease-in-out;
}

Animasyon Süresi ve Zamanlama:

animation: moveAround 6s infinite ease-in-out; animasyon süresi 6s olarak belirlendi ve ease-in-out zamanlaması eklendi. Bu, animasyonun başında ve sonunda yavaşlamasını sağlar.

Başlangıç Pozisyonu:

top: 50%; left: 50%; başlangıçta kutu ekranın merkezine yerleştirilir.

transform: translate(-50%, -50%); kutu tam olarak merkezde durur.

Renk ve Sınır Efekti:

background-color animasyon boyunca değişir: kırmızıdan maviye, yeşile, turuncuya ve mor rengine dönüşür.

border her aşamada değişir: siyah, yeşil, sarı, kırmızı ve mavi.

Boyut Değişikliği:

Kutu boyutu 120px'e çıkarıldı (width: 120px; height: 120px;).

border-radius: 10px; ile kutunun köşeleri yuvarlatıldı.

Geçiş Efekti:

transition: transform 0.5s ease-in-out; animasyon sırasında kutunun dönüşü daha yumuşak hale getirilmiştir.

@{

    ViewData["Title"] = "Home Page";
}

<h2>CSS Animasyonu - 4 Kenar Hareketi</h2>

<!-- Animasyonlu kutu -->
<div class="animated-box"></div>

<!-- CSS dosyasını dahil et -->
<link rel="stylesheet" href="~/css/styles.css">

Adım 4: Uygulamayı Çalıştırma

Projeyi başlatın ve tarayıcıda sonucu kontrol edin.