CSS3’ün -webkit-animation Elementiyle Daktilo Yazısı

Daktilo YazıCSS ile basit animasyonlar hazırlamaya devam ediyoruz. Bu yazımızda -webkit-animation elementine merhaba diyeceğiz. Beraberinde birkaç küçük ayar ile daktilo yazı efekti hazırlayacağız. Aynı işlemi JavaScript ile de yapmak mümkün. Fakat söz konusu performans ve hız olduğunda CSS her zaman olduğu gibi bir adım önde!

ÖRNEĞİ GÖRÜNTÜLE

-webkit-animation

Animasyon elementinin içeriğinde typing ve steps isimli iki ayrı alan oluşturacağız. Typing bütün animasyonunun tamamlanma süresi. Steps ise bu animasyonun kaç saniyede tamamlanayacağını gösterir. Örnek bir kullanım yapalım :

-webkit-animation: typing 10s steps(2, end);

Yukarıdaki örnek kod 10 saniyelik bir animasyonu 2 adımda tamamlamaktadır.

Daktilo yazı nasıl hazırlanır?

Gayet basit bir yol izleyeceğiz. İlk olarak sayfamızın <body></body> tagı içerisine aşağıdaki gibi bir paragraf hazırlayalım. HTML kodlarımız bu kadar.

<p class="daktilo">CSS3 ile daktilo görüntüsü oluşturuyoruz.</p>

Şimdi CSS kodlarımız ile devam edelim. İlk olarak paragrafımız için basit bir tasarım oluşturalım.


p{
font:16px Georgia, 'Times New Roman';
color:#111;
}

Sırada daktilo classını oluşturmak var.


.daktilo{
-webkit-animation: typing 5s steps(30, end);
border-right: .1em solid black;
width: 20em;
width: 30ch;
white-space: nowrap;
overflow: hidden;
}

Ve yazım sürecinde paragraf tagını kapalı tutmaya yarayan kod ile devam ediyoruz.

@-webkit-keyframes typing {
from { width:0; }
}

Kapanış

Bu makalemizde kullandığımız teknik ile her türden animasyonunuzu adımlara bölebilirsiniz. Bu yüzden sadece daktilo yazı efekti olarak düşünmemek gerek.

İyi çalışmalar.