Animasyonlar

Sizler için önceden hazırlanmış bazı animasyonları aşağıdaki class'lar ile kullanabilirsiniz.

v5 Animasyon

Aşağı Kaydırme Animasyonu

Live Editor

<div class="p-2 mb-2 bg-primary text-white rounded"> <div class="slide-in-down text-center fw-bold">Aşağı Kaydırme</div> </div>

<div class="p-2 mb-2 bg-primary text-white rounded">
  <div class="slide-in-down text-center fw-bold">Aşağı Kaydırme</div>
</div>

Result

Aşağı Kaydırme

<div class="slide-in-down">...</div>

Yukarı Kaydırme Animasyonu

Live Editor

<div class="p-2 mb-2 bg-primary text-white rounded"> <div class="slide-in-up text-center fw-bold">Yukarı Kaydırme</div> </div>

<div class="p-2 mb-2 bg-primary text-white rounded">
  <div class="slide-in-up text-center fw-bold">Yukarı Kaydırme</div>
</div>

Result

Yukarı Kaydırme

<div class="slide-in-up">...</div>

360° Dönme Animasyonu

Live Editor

<div class="p-2 mb-2 bg-primary text-white rounded position-relative"> <div class="transform-rotate text-center fw-bold">360° Dönme</div> </div>

<div class="p-2 mb-2 bg-primary text-white rounded position-relative">
  <div class="transform-rotate text-center fw-bold">360° Dönme</div>
</div>

Result

360° Dönme

<div class="transform-rotate">...</div>

Sonradan Gelen Animasyon

Live Editor

<div class="p-2 mb-2 bg-primary text-white rounded position-relative"> <div class="fade-in text-center fw-bold">Sonradan gelen alan</div> </div>

<div class="p-2 mb-2 bg-primary text-white rounded position-relative">
  <div class="fade-in text-center fw-bold">Sonradan gelen alan</div>
</div>

Result

Sonradan gelen alan

<div class="fade-in">...</div>

Kaybolan Animasyon

Live Editor

<div class="p-2 mb-2 bg-primary text-white rounded position-relative"> <div class="fade-out text-center fw-bold">Kaybolan alan</div> </div>

<div class="p-2 mb-2 bg-primary text-white rounded position-relative">
  <div class="fade-out text-center fw-bold">Kaybolan alan</div>
</div>

Result

Kaybolan alan

<div class="fade-out">...</div>