/* Balığın içinde bulunacağı alan */ .fish-container { width: 100%; height: 300px; /* Balığın yüzme yüksekliği */ overflow: hidden; position: relative; background-color: transparent; /* Arka planı sitene göre ayarla */ } .swimming-fish { width: 200px; /* Balığın boyutu */ position: absolute; bottom: 20%; /* Animasyon ayarları: 15 saniyede bir, sonsuz döngü, lineer hız */ animation: swim 15s linear infinite; } /* Yüzme hareketi */ @keyframes swim { 0% { left: -250px; /* Ekranın sol dışından başla */ transform: scaleX(1); /* Sağa doğru bakıyor */ } 49% { transform: scaleX(1); } 50% { left: 100%; /* Ekranın sağ dışına ulaştığında */ transform: scaleX(-1); /* Geri dönerken yön değiştir (sola bak) */ } 99% { transform: scaleX(-1); } 100% { left: -250px; /* Tekrar başlangıca dön */ } } /* Opsiyonel: Hafif aşağı yukarı sallanma efekti (daha gerçekçi olması için) */ .swimming-fish { animation: swim 15s linear infinite, bobbing 3s ease-in-out infinite; } @keyframes bobbing { 0%, 100% { transform: translateY(0) scaleX(inherit); } 50% { transform: translateY(-20px) scaleX(inherit); } }