Articles
CSS'e Giriş
Animasyonla İlgili CSS Özellikleri

Animasyonla İlgili CSS Özellikleri

Bu makale, animasyonla ilgili CSS özelliklerini açıklar.

@keyframes, animation ve transition özelliklerinin kullanımını ve söz dizimini öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animasyon ve Geçiş

@keyframes Kuralı 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes, CSS animasyonlarında stillerin animasyon süresince nasıl değişeceğini belirtmek için kullanılır. @keyframes içinde, animasyonun başından sonuna kadar olan stil değişiklikleri zaman yüzdeleri veya anahtar kelimeler (from ve to) ile belirtilir.

  • Bu, bir öğenin soldan sağa kaydığı ve ardından orijinal konumuna geri döndüğü bir animasyon örneğidir.
  • Bu örnekte, @keyframes'in ardından slide yazılmış ve slide adında bir animasyon tanımlanmıştır.
  • 0%, animasyonun başlangıcıdır ve translateX(0) öğeyi orijinal konumuna yerleştirir.
  • 50%, animasyonun ortasıdır ve öğe translateX(200px) kullanılarak sağa doğru 200px hareket eder.
  • 100%, animasyonun sonudur ve öğe orijinal konumuna geri döner.
  • box-animation-slide sınıfında, animation özelliği 3 saniyelik aralıklarla slide animasyonunu uygulamak için kullanılır.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Animasyon sırasında stilleri ince bir şekilde kontrol edebilirsiniz. Yüzdeler belirleyerek, farklı zamanlarda farklı stiller uygulayabilirsiniz.
    • Bu örnekte, renk kırmızıdan maviye, maviden yeşile, yeşilden sarıya ve tekrar kırmızıya geçiş yapar.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • Bu örnekte, from 0% ile eşdeğerdir ve to 100% ile eşdeğerdir. Bu, basit animasyonlar tanımlamanıza olanak tanır.

Temel Sözdizimi 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: Animasyonun adı. animation özelliği veya animation-name özelliği kullanılarak belirtilir.
  • Yüzdeler veya Anahtar Kelimeler: 0% ile 100% arasındaki yüzdeleri veya from (yani 0%) ve to (yani 100%) anahtar kelimelerini kullanın.

animation Özelliği 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

animation özelliği, bir öğeye animasyon uygulamak için kullanılır. Animasyonlar, bir dizi CSS stilinin zamanla nasıl değiştiğini tanımlar. animation özelliğiyle, bir animasyonun zamanlamasını, davranışını, gecikmesini, tekrar sayısını ve daha fazlasını kontrol edebilirsiniz.

  • box-animation-ease-in-out sınıfı, animation-name olarak slideı belirtir ve @keyframes içinde tanımlanan slide animasyonunu kullanır.
    • 3s, her animasyon döngüsünün 3 saniyede tamamlandığını belirten animation-durationdır.
    • ease-in-out, animasyonun yavaş başlamasını, hızlanmasını ve sonunda tekrar yavaşlamasını sağlayan animation-timing-functiondır.
    • infinite, animasyonun sonsuza kadar tekrarlanacağını belirten animation-iteration-counttır.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • box-animation-alternate sınıfı, animation-name olarak color-changei belirtir ve @keyframes içinde tanımlanan color-change animasyonunu kullanır.
    • ease-in-out ardından gelen 1s, animasyon başlamadan önceki gecikmeyi belirten animation-delaydır. Animasyon 1 saniye sonra başlayacaktır.
    • 1s ardından gelen 3, animasyonun 3 kez tekrarlanacağı anlamına gelen animation-iteration-counttır.
    • alternate, animasyonun oynatma yönünü belirten animation-directiondır. alternate, animasyonun dönüşümlü olarak oynatılacağını belirtir.

animation Özelliğinin Bileşimi

animation özelliği, birkaç alt özelliği birleştirerek tek bir özellik haline getiren bir kısayol özelliğidir. İşte ana alt özellikler:.

  • animation-name özelliği: Uygulanacak animasyonun adını belirtir. @keyframes içinde tanımlanan animasyon adıyla eşleşmelidir.
  • animation-duration özelliği: Animasyonun bir döngüyü tamamlaması için geçen süreyi belirtir. Zaman birimleri saniyeler (s) veya milisaniyeler (ms)dir.
  • animation-timing-function özelliği: Animasyonun hız eğrisini belirtir. ease, linear, ease-in, ease-out, ease-in-out gibi değerler kullanılır.
    • ease belirtmek, animasyonun yavaş başlamasını, hızlanmasını ve sonunda tekrar yavaşlamasını sağlar.
    • linear belirtmek, animasyonun baştan sona sabit bir hızla ilerlemesini sağlar.
    • ease-in belirtmek, animasyonun yavaş başlayıp hızlı bitmesini sağlar.
    • ease-out belirtmek, animasyonun hızlı başlayıp yavaş bitmesini sağlar.
    • ease-in-out belirtmek, animasyonun yavaş başlayıp hızlanarak ilerlemesini ve sonunda tekrar yavaşlamasını sağlar.
  • animation-delay özelliği, animasyon başlamadan önceki gecikmeyi belirtir. Zaman birimi ya saniye ya da milisaniyedir.
  • animation-iteration-count özelliği, animasyonun kaç kez tekrarlanacağını belirtir. infinite belirtmek, animasyonun süresiz olarak tekrarlanmasını sağlar.
  • animation-direction özelliği, animasyonun oynatılma yönünü belirtir. Seçenekler şunları içerir: normal (ileri yönde), reverse (geri yönde), alternate (dönüşümlü oynatma) ve alternate-reverse (geri yönde başlayarak dönüşümlü oynatma).
  • animation-fill-mode özelliği, animasyon başlamadan önceki ve bittikten sonraki durumunu belirtir. none, forwards, backwards veya both seçeneklerinden birini belirtebilirsiniz.
  • animation-play-state özelliği, animasyonun çalışır durumda mı yoksa duraklatılmış mı olduğunu belirtir. running veya paused olarak belirtebilirsiniz.

Özet

animation özelliği, öğelerin stilini dinamik olarak değiştirmek için güçlü bir araçtır. @keyframes kullanarak, stillerin zamanla nasıl değişeceğini tanımlayabilir ve animationın her alt özelliğiyle animasyonun detaylı davranışını kontrol edebilirsiniz.

transition özelliği 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

transition özelliği, CSS stil değişikliklerine animasyon efektleri uygulamak için kullanılır. Bu, hover, focus, active gibi durum değişiklikleri veya JavaScript tarafından dinamik olarak değiştirilen stiller sırasında değişikliklerin düzgün bir şekilde görünmesini sağlar.

transition-box sınıfının, bir düğmenin üzerine gelindiğinde arka plan renginin yumuşak bir şekilde değiştiği bir örneğe bakalım. - transition-box sınıfında, transition özelliği arka plan rengindeki değişime 2 saniyelik bir geçiş uygular. Değişim ease olarak belirtilmiştir, bu da onu yumuşak hale getirir. - hover pseudo-class, farenin düğmenin üzerinde olduğu durumda arka plan rengini lightgraydan steelblueya değiştirir. Bu değişiklik, transition-box sınıfında belirtilen 2 saniye içinde yumuşak bir şekilde gerçekleşir.

transitionı aynı anda birden fazla özelliğe uygulamak mümkündür. - transition-2-properties sınıfı örneğinde, arka plan rengi 5 saniyede değişirken genişlik 0.5 saniyede değişir.

Temel Sözdizimi 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • property hangi CSS özelliklerine animasyonun uygulanacağını belirtir. all belirtildiğinde animasyon tüm özelliklere uygulanır.
  • duration animasyonun tamamlanması için gereken süreyi belirtir. Saniye (s) veya milisaniye (ms) kullanarak belirtin.
  • timing-function animasyonun hızındaki değişikliği belirtir. ease, linear, ease-in, ease-out, ease-in-out gibi seçenekler kullanabilirsiniz.
  • delay animasyon başlamadan önceki gecikme süresini belirtir. Saniye veya milisaniye cinsinden belirtin.

transition'ın detaylı özellikleri 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

transition aşağıdaki gibi bireysel özellikler olarak da kullanılabilir.

  • transition-property: Animasyonun uygulandığı özelliği belirtir.
  • transition-duration: Animasyonun tamamlanma süresini belirtir.
  • transition-timing-function: Animasyonun hız değişimini belirtir. ease, linear, ease-in, ease-out, ease-in-out gibi seçenekler kullanılabilir.
  • transition-delay: Animasyon başlamadan önceki gecikme süresini belirtir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Filtre Efektleriyle İlgili CSS Özellikleri