CSS3 animation Animasyon Yapımı

CSS3 ile birlikte gelen ve animasyon yapmak için kullanılan animation ve @keyframes özelliklerinin kullanımı ile ilgili bilgiler yer almakta.

CSS3 animasyon nasıl yapılır

Bir animasyon bir öğenin bir stilden diğerine belirlediğimiz sürede değişmesini sağlar.

CSS özelliklerini istediğiniz gibi değiştirebilir animasyon özelliği katabiliriz.

Animasyon yapmak için önce animasyon adımlarını @keyframes ile oluşturmamız gerekiyor.

CSS3 @keyframes öğenin belirli zamanlarda hangi stillerin uygulanacağını belirtir.

Animasyon kareleri oluşturmak @keyframes

CSS3 @keyframes ile oluşturacağımız animasyonun kare kurallarını belirlememize imkan verir.

Daha sonraki adımda ise oluşturduğumuz animasyon karesini HTML elemanına bağlamamız yeterli olacaktır.

Aşağıdaki örnekte ornek animasyonu 4 saniye sürecek ve <div> elemanının arka plan rengini belirlenen sürede kırmızıdan sarıya değiştirecektir.

@keyframes ornek{
    from {background-color: red;}
    to {background-color: yellow;}
}

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: ornek;
    animation-duration: 4s;
}

Yukarıdaki örnekte from ve to anahtar kelimelerini kullanarak stilin ne zaman değişeceğini belirttik.

Animasyon karelerini yüzde kullanarak uygulayabiliriz.

Yüzdeyi kullanarak istediğimiz kadar stil değişikliği adımı ekleyebilirsiniz.

Yukardaki örnekte from yerine %0, to yerine 100% kullanabiliriz.

Aşağıdaki örnek, animasyon süresinin %25‘i tamamlandığında, %50‘si tamamlandığında ve animasyonun %100‘ü tamamlandığında <div> elemanının arka plan rengini değiştirecektir.

@keyframes ornek {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: ornek;
    animation-duration: 4s;
}

Aşağıdaki örnek elemanının arka plan rengini ve konumunu değiştirecektir.

@keyframes ornek {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: ornek;
    animation-duration: 4s;
}

Animasyonu zamanlamak

Animasyonu belirlediğimiz süreden sonra başlamasını animation-delay ile belirleyebiliriz.

Aşağıdaki örnekte animasyon 2 saniye sonra başlayacaktır.

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

Animasyon tekrar sayısını belirlemek

Oluşturduğumuz animasyonu animation-iteration-count ile istediğimiz kadar tekrarlanmasını sağlayabiliriz.

Aşağıdaki örnek animasyonu 3 kez çalıştıracaktır.

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}

Animasyonun sürekli olarak tekrarlanmasını sağlamak için infinite değerini kullanabiliriz.

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

Animasyonu yönünü belirlemek

Animasyona herhangi bir yön belirlemediğimizde animasyon başlangıçtan sona doğru hareket edecektir.

Animasyon yönünü belirlemek için animation-direction özelliğini kullanabiliriz.

Aşağıdaki örnek animasyon karelerini ters yönde çalıştıracaktır.

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}

Animasyonu ilk önce ileriye, sonra geriye, sonra ileri kaydırmak için alternate değerini kullanabiliriz.

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}

Animasyon için zaman belirlemek

CSS3 animation-timing-function özelliğiyle animasyon için zaman belirleyebiliriz.

Alacağı değerler

• ease – Yavaş bir başlangıç, ardından hızlı, daha sonra yavaş yavaş sona eren geçiş efekti belirtir. (Varsayılan)
• linear – Başlangıç ve bitişi aynı hızda bir geçiş efekti belirtir.
• ease-in – Yavaş bir başlangıç geçiş efekti belirtir.
• ease-out – Yavaş bir bitiş geçiş efekti belirtir.
• ease-in-out – Yavaş başlangıç-bitiş geçiş efekti belirtir.
• cubic-bezier(n,n,n,n) – Bezier yöntemi ile zaman belirlememizi sağlar.

.

Animasyon özeliklerini belirlemek

Aşağıdaki örnekte olduğu gibi animasyon özelliğini ayrı ayrı yazabiliriz.

div {
    animation-name: ornek;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Veya animation özelliğiyle animasyon özelliklerini tek satırda belirleyebiliriz.

div {
    animation: ornek 5s linear 2s infinite alternate;
}

CSS3 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.