Tablodaki CSS kodları, geçiş efektlerini ayarlamak için kullanılan transition-duration ve transition-delay özelliklerini tanımlar.

 

transition-duration özelliği, bir geçişin tamamlanması için harcanacak süreyi belirtir. Değer olarak saniye (s) veya milisaniye (ms) cinsinden bir sayı kullanılır. Örneğin, transition-duration: 4s; ifadesi, bir geçişin 4 saniye boyunca süreceğini belirtir. Bu süre boyunca geçiş etkisi yavaşça gerçekleşir.

 

transition-delay özelliği ise geçişin başlamasının ertelenmesi için kullanılır. Bu özelliğin değeri de saniye (s) veya milisaniye (ms) cinsinden olabilir. Örneğin, transition-delay: 2s; ifadesi, bir geçişin 2 saniye sonra başlamasını sağlar. Bu süre boyunca herhangi bir görsel değişiklik olmaz, ancak geçiş süresi geçtikten sonra belirtilen efekt gerçekleşir.

 

Bu kodlar bir CSS seçicisiyle birlikte kullanılarak belirli bir HTML öğesine geçiş efektleri uygulanabilir. Örneğin, aşağıdaki kod, bir div öğesine 4 saniyelik bir geçiş süresi ve 2 saniye gecikme ile bir efekt uygular:

 

.div 

  transition-duration: 4s;

  transition-delay: 2s;

 

 

 

Bu şekilde, div öğesindeki herhangi bir özellik değiştiğinde (örneğin, arka plan rengi veya boyutu), geçiş efekti 4 saniye sürecektir. Ayrıca, özellik değişimi başladıktan 2 saniye sonra geçiş etkisi gerçekleşecektir