Buradasın

HTML5 ve CSS3 Animasyon Eğitimi: Timing Function

Yapay zekadan makale özeti

Bu video, HTML5 ve CSS3 eğitim setinin 41. dersi olup, bir eğitmen tarafından sunulan bir eğitim içeriğidir.
Videoda animasyonların timing function özellikleri detaylı olarak anlatılmaktadır. Eğitmen, beş adet div oluşturarak linear, ease, ease-in, ease-out ve ease-in-out timing function'larının nasıl çalıştığını göstermektedir. Ayrıca animasyonun name, duration, timing function, delay, iteration count ve direction gibi parametrelerinin nasıl kullanılacağı örneklerle açıklanmaktadır. Video sonunda eğitmen, bir sonraki derste animasyon ve dönüşümlerle ilgili bir örnek göstereceğini belirtmektedir.

00:09HTML ve CSS Animasyon Eğitimi: HTML 5 ve CSS 3 eğitim setinin 41. dersinde animasyonlara devam edilecek.
Animasyonların özelliklerini göstermek için beş adet division oluşturulmuş ve "time1", "time2" gibi sınıflar atanmış.
Animasyon timing function komutunun nasıl çalıştığı gösterilecek.
01:33Animasyon Kodlama: Animasyon kodunda ilk parametre "animation name" olarak "move" ismi verilmiş.
İkinci parametre "animation duration" olarak 5 saniye süre belirlenmiş.
Animasyonda "from" soldan başlayıp "to" 450 piksel sağa kayma hareketi tasarlanmış.
04:01Animasyon Timing Function'ları: "Linear" timing function doğrusal bir hızla hareket eder ve hız değişmez.
"Ease-in" timing function yavaş başlayıp hızlanır.
"Ease-out" timing function hızlı başlayıp yavaşlar.
"Ease-in-out" timing function hem başta hem sonda yavaş bir hareketle süreci tamamlar.
06:14İleri-Geri Animasyon: Tek bir kutu için "animation name", "animation duration", "animation timing function", "delay", "animation interaction count" ve "animation direction" parametreleri tek satırda tanımlanmış.
Animasyon 2 saniye geciktirilerek ve bir ileri bir geri çalışarak sonsuza kadar devam ediyor.
Animasyon "rose" class'ın içerisine doğrudan eklenmiş, hover veya üzerine geldiğinde değil.