HTML ve CSS ile Animasyonlara Giriş | Ders 2

Uzun(çok uzun) bir aradan sonra sizlerle birlikteyim. Genellikle seri yazmayı pek sevmesem de animasyonlar özel ilgi alanım.

Son derste bir animasyon oluşturup bunu bir elemente atamıştık. Bu derste ise animasyonlarda objelere hareket vermeyi ve animasyonun farklı aşamalarında objeye farklı şeyler yaptırmayı göreceksiniz. Umarım önceki dersteki örnekleri silmemişsinizdir(Sildiyseniz veya hiç yapmadıysanız sizi şöyle alalım).

En başta şunu söyleyeyim. Aşağıdaki sınıfa çok fazla dokunmayacağız.

div {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-name: renk-degistir;
    animation-duration: 4s;
}

Bizim işimiz @keyframes renk-degistir sınıfıyla şimdi o sınıfın içini tamamen silin. Şimdi aşağıdaki satırları @keyframes renk-degistir sınıfına  yazın:

50%  {
  background-color: red;
}
100% {
  background-color: blue;
}

Olanları muhtemelen birçoğunuz anladı. Yani animasyonumuzun belirli noktalarında farklı şeyler yapabiliriz. Bu noktaları yüzde ile belirtiyoruz biz burada animasyonun yarısında(%50’sinde yani 2. saniyede daha önce animasyonumuzun 4 sn süreceğini belirtmiştik) arkaplan rengini kırmızı yapmasını, animasyonun sonunda ise(%100’inde yani 4. saniyede) arkaplan rengini mavi yapmasını istedik. Bu zamanlamayı istediğiniz gibi değiştirebilirsiniz.

Buda tamamsa, artık animasyonlara biraz daha hareket ekleme zamanı. Aşağıdaki gibi düzenleyin.

0% {
  left: 0px;
  top:  0px;
}
50%  {
  left: 100px;
  top:100px;
}
75% {
  left: 50px;
  top: 50px;
}
100% {
  left: 0px;
  top: 0px;
}

Şimdi ise animasyonumuzu 4 e bölüp her parçasına hareket ekledik. CSS’te yaptığınız herşeyi burda da yapabilirsiniz. Tabi bu animasyon hiçbir işe yaramıyacaktır. nedeni ise; div sınıfının sabit bir yapıya sahip olması div sınıfına şu kısımı ekleyin; position: relative;.

Biraz fantezi yapabiliriz. Animasyon sınıfımızı aşağıdaki satırlarla değiştirin.

0% {
  left: 0px;
  top:  0px;
  background-color: yellow;
}
50%  {
  left: 100px;
  top:100px;
  background-color: blue;
}
75% {
  left: 50px;
  top: 50px;
  background-color: red;
}
100% {
  left: 0px;
  top: 0px;
  background-color: green;
}

Şimdi ise animasyonumuzun her parçasında farklı bir renk dönüşümü uyguladık. Aşağıdaki sonuca varmış olucaz.

Önceki ders için tıklayın.