CSS ile uygulamanızı animasyonlama

CSS, uygulamanizda guzel ve ilgi cekici animasyonlar olusturmaniz icin guclu bir arac seti sunar.

Yerel CSS'de animasyonlar nasıl yazılır

Daha once yerel CSS animasyonlari yazmadiysaniz, baslangic icin bir dizi mukemmel rehber vardir. Bunlardan biraci: MDN's CSS Animations guide W3Schools CSS3 Animations guide The Complete CSS Animations Tutorial CSS Animation for Beginners

ve birkaç video: Learn CSS Animation in 9 Minutes Net Ninja CSS Animation Tutorial Playlist

Bu cesitli rehber ve egitimlerin bazilarina goz atin, ardindan bu rehbere geri donun.

Yeniden kullanılabilir animasyonlar oluşturma

@keyframes kullanarak uygulamaniz genelinde paylasabileceginiz yeniden kullanilabilir animasyonlar olusturabilirsiniz. Paylasilmis bir CSS dosyasinda anahtar kare animasyonlari tanimlayin ve uygulamanizda istediginiz her yerde bu anahtar kare animasyonlarini yeniden kullanabileceksiniz.

animations.css

@keyframes sharedAnimation {
  to {
    height: 0;
    opacity: 1;
    background-color: 'red';
  }
}

.animated-class {
  animation: sharedAnimation 1s;
}

animated-class sinifini bir elemana eklemek, o eleman uzerinde animasyonu tetikler.

Bir geçişi animasyonlama

Durum ve stilleri animasyonlama

Iki farkli durum arasinda animasyon yapmak isteyebilirsiniz, ornegin bir eleman acildiginda veya kapatildiginda. Bunu anahtar kare animasyonu veya gecis stili kullanarak CSS siniflariyla gerceklestirebilirsiniz.

animations.css

.open {
  height: '200px';
  opacity: 1;
  background-color: 'yellow';
  transition: all 1s;
}

.closed {
  height: '100px';
  opacity: 0.8;
  background-color: 'blue';
  transition: all 1s;
}

open veya closed durumunu tetiklemek, bileseninizdeki eleman uzerinde siniflari degistirerek yapilir. Bunu nasil yapacaginiza dair ornekleri sablon rehberimizde bulabilirsiniz.

Stilleri dogrudan animasyonlama icin sablon rehberinde benzer ornekler gorebilirsiniz.

Geçişler, zamanlama ve yumuşatma

Animasyon genellikle zamanlama, gecikme ve yumusaklik davranislarini ayarlamayi gerektirir. Bu, bircok CSS ozelligi veya kisayol ozellikleri kullanilarak yapilabilir.

CSS'de bir anahtar kare animasyonu icin animation-duration, animation-delay ve animation-timing-function belirtin veya alternatif olarak animation kisayol ozelligini kullanin.

animations.css

.example-element {
  animation-duration: 1s;
  animation-delay: 500ms;
  animation-timing-function: ease-in-out;
}

.example-shorthand {
  animation: exampleAnimation 1s ease-in-out 500ms;
}

Benzer sekilde, @keyframes kullanmayan animasyonlar icin transition-duration, transition-delay, transition-timing-function ve transition kisayolunu kullanabilirsiniz.

animations.css

.example-element {
  transition-duration: 1s;
  transition-delay: 500ms;
  transition-timing-function: ease-in-out;
  transition-property: margin-right;
}

.example-shorthand {
  transition: margin-right 1s ease-in-out 500ms;
}

Bir animasyonu tetikleme

Animasyonlar CSS stilleri veya siniflari degistirerek tetiklenebilir. Bir sinif bir elemanda mevcut oldigunda, animasyon gerceklesir. Sinifi kaldirmak, elemani o eleman icin tanimlanmis CSS'e geri dondurecektir. Iste bir ornek:

Geçiş ve tetikleyiciler

Otomatik yüksekliği animasyonlama

Otomatik yukseklige animasyon yapmak icin CSS Grid kullanabilirsiniz.

Tum tarayicilari destekleme konusunda endiselenmeniz gerekmiyorsa, otomatik yukseklige animasyon yapmanin gercek cozumu olan calc-size()'i da inceleyebilirsiniz. Daha fazla bilgi icin MDN belgelerine ve bu egitime bakin.

Görünüme giriş ve çıkış animasyonu

Bir oge gorünume girdiginde veya gorünumden ayrildiginda animasyonlar olusturabilirsiniz. Bir elemanin gorünume girisini animasyonlamaya bakalim. Bunu, eleman gorünume girdiginde animasyon siniflari uygulayacak olan animate.enter ile yapacagiz.

Bir elemanin gorünumden ayrilirken animasyonlanmasi, gorünume girerken animasyonlamaya benzer. Eleman gorünumden ayrilirken hangi CSS siniflarinin uygulanacagini belirtmek icin animate.leave kullanin.

animate.enter ve animate.leave hakkinda daha fazla bilgi icin Giris ve Cikis animasyonlari rehberine bakin.

Artırma ve azaltma animasyonu

Artirma ve azaltmada animasyon uygulamalarda yaygin bir kaliptir. Bu davranisi nasil gerceklestirebileceginize dair bir ornek.

increment-decrement.ts

import {Component, ElementRef, OnInit, signal, viewChild} from '@angular/core';

@Component({
  selector: 'app-increment-decrement',
  templateUrl: 'increment-decrement.html',
  styleUrls: ['increment-decrement.css'],
})
export class IncrementDecrement implements OnInit {
  num = signal(0);
  el = viewChild<ElementRef<HTMLParagraphElement>>('el');

  ngOnInit() {
    this.el()?.nativeElement.addEventListener('animationend', (ev) => {
      if (ev.animationName.endsWith('decrement') || ev.animationName.endsWith('increment')) {
        this.animationFinished();
      }
    });
  }

  modify(n: number) {
    const targetClass = n > 0 ? 'increment' : 'decrement';
    this.num.update((v) => (v += n));
    this.el()?.nativeElement.classList.add(targetClass);
  }

  animationFinished() {
    this.el()?.nativeElement.classList.remove('increment', 'decrement');
  }

  ngOnDestroy() {
    this.el()?.nativeElement.removeEventListener('animationend', this.animationFinished);
  }
}

increment-decrement.html

<h3>Increment and Decrement Example</h3>
<section>
  <p #el>Number {{ num() }}</p>
  <div class="controls">
    <button type="button" (click)="modify(1)">+</button>
    <button type="button" (click)="modify(-1)">-</button>
  </div>
</section>

increment-decrement.css

:host {
  display: block;
  font-size: 32px;
  margin: 20px;
  text-align: center;
}

section {
  border: 1px solid lightgray;
  border-radius: 50px;
}

p {
  display: inline-block;
  margin: 2rem 0;
  text-transform: uppercase;
}

.increment {
  animation: increment 300ms;
}

.decrement {
  animation: decrement 300ms;
}

.controls {
  padding-bottom: 2rem;
}

button {
  font: inherit;
  border: 0;
  background: lightgray;
  width: 50px;
  border-radius: 10px;
}

button + button {
  margin-left: 10px;
}

@keyframes increment {
  33% {
    color: green;
    transform: scale(1.3, 1.2);
  }
  66% {
    color: green;
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes decrement {
  33% {
    color: red;
    transform: scale(0.8, 0.9);
  }
  66% {
    color: red;
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}

Bir animasyonu veya tüm animasyonları devre dışı bırakma

Belirttiginiz animasyonlari devre disi birakmak istiyorsaniz, birden fazla seceeneginiz vardir.

Animasyon ve gecisi none olarak zorlayan ozel bir sinif olusturun.

.no-animation {
  animation: none !important;
  transition: none !important;
}

Bu sinifi bir elemana uygulamak, o eleman uzerindeki herhangi bir animasyonun calismesini engeller. Alternatif olarak, bu davranisi uygulamak icin bunu tum DOM'unuza veya DOM'unuzun bir bolumune kapsayabilirsiniz. Ancak bu, animasyon olaylarinin calismesini engeller. Eleman kaldirma icin animasyon olaylarini bekliyorsaniz, bu cozum ise yaramaz. Gecici bir cozum, sureleri 1 milisaniyeye ayarlamaktir.

Daha az animasyon tercih eden kullanicilar icin hicbir animasyonun calmamasini saglamak icin prefers-reduced-motion medya sorgusunu kullanin.
Programatik olarak animasyon siniflari eklemeyi engelleyin

Animasyon geri çağırmaları

Animasyonlar sirasinda belirli noktalarda yurutmek istediginiz eylemleriniz varsa, dinleyebileceginiz bir dizi mevcut olay vardir. Birkazci:

OnAnimationStart OnAnimationEnd OnAnimationIteration OnAnimationCancel

OnTransitionStart OnTransitionRun OnTransitionEnd OnTransitionCancel

Web Animations API bircok ek islev sunar. Mevcut tum animasyon API'lerini gormek icin belgelere goz atin.

NOTE: Bu geri cagirmalarla kabarciklanma sorunlarina dikkat edin. Alt ve ust elemanlari animasyonluyorsaniz, olaylar alt elemanlardan ust elemanlara dogru kabarciklanir. Bir alt dugumden kabarciklanan bir olaya degil, istediginiz olay hedefine yanit verdiginizden emin olmak icin yayilimi durdurun veya olay icindeki daha fazla ayrinti inceleyin. Dogru dugumlere sahip oldugunuzu dogrulamak icin animationname ozelligini veya gecisi yapilan ozellikleri inceleyebilirsiniz.

Karmaşık diziler

Animasyonlar genellikle basit bir fade in veya fade out'tan daha karmasiktir. Calistirmak isteyeceginiz bircok karmasik animasyon dizisi olabilir. Bu olasi senaryolarin bazilarina goz atalim.

Listede kademeli animasyonlar

Yaygin efektlerden biri, kademeli bir etki olusturmak icin listedeki her ogenin animasyonlarini kademelilestirmektir. Bu, animation-delay veya transition-delay kullanilarak gerceklestirilebilir. Bu CSS'nin nasil gorunebilecegine dair bir ornek.

Paralel animasyonlar

animation kisayol ozelligini kullanarak bir elemana ayni anda birden fazla animasyon uygulayabilirsiniz. Her birinin kendi suresi ve gecikmesi olabilir. Bu, animasyonlari bir araya getirmenize ve karmasik efektler olusturmaniza olanak tanir.

.target-element {
  animation:
    rotate 3s,
    fade-in 2s;
}

Bu ornekte, rotate ve fade-in animasyonlari ayni anda baslar, ancak farkli surelere sahiptir.

Yeniden sıralanan listenin öğelerini animasyonlama

Bir @for dongusundeki ogeler kaldirilip yeniden eklenecek, bu da giris animasyonlari icin @starting-styles kullanilarak animasyonlari tetikleyecektir. Alternatif olarak, ayni davranis icin animate.enter kullanabilirsiniz. Asagidaki ornekte gorulduğu gibi elemanlar kaldirilirken animasyonlamak icin animate.leave kullanin.

Animasyonların programatik kontrolü

Element.getAnimations() kullanarak bir elemandaki animasyonlari dogrudan alabilirsiniz. Bu, o elemandaki her Animation'in bir dizisini dondurur. Animasyon paketinin AnimationPlayer'inin sundugu seylerden cok daha fazlasini yapmak icin Animation API'sini kullanabilirsiniz. Buradan cancel(), play(), pause(), reverse() ve cok daha fazlasini yapabilirsiniz. Bu yerel API, animasyonlarinizi kontrol etmeniz icin ihtiyaciniz olan her seyi saglamalidir.

Angular animasyonları hakkında daha fazla bilgi

Asagidakilerle de ilgilenebilirsiniz:

animations.css

animations.css

animations.css

animations.css

open-close.ts

open-close.html

open-close.css

auto-height.ts

auto-height.html

auto-height.css

insert.ts

insert.html

insert.css

remove.ts

remove.html

remove.css

increment-decrement.ts

increment-decrement.html

increment-decrement.css

stagger.ts

stagger.html

stagger.css

reorder.ts

reorder.html

reorder.css