Selam. CSS keyframes kullanımına örnek göstereceğim. Ve anlatacağım.
Öncelikle kodumuzu ve çıktısını gösterelim.
HTML Kodu:
CSS Kodu:
Bu videoda çıktısını görebilirsiniz.
Şimdi kodu açıklayalım.
CSS'deki @keyframes kuralı, animasyonlar oluşturmak için kullanılır. Söz konusu kod örneğinde, slideRight adında bir keyframe tanımlanmış. Bu keyframe, belirli bir animasyonu açıklar. Şimdi, içerisindeki kodları teker teker açıklayalım:
0% bloğu:
Bu kod, elemanın yatay (X ekseni) yönde -100 piksel kaydırılacağını belirtir. Yani, eleman başlangıçta sol tarafa doğru 100 piksel kayar.
Bu kod, elemanın başlangıçta tamamen görünmez olacağını belirtir. Yani, eleman başlangıçta saydamdır.
100% bloğu:
Bu kod, elemanın yatay (X ekseni) yönde hiçbir kaydırma yapmadan yerinde duracağını belirtir. Yani, eleman animasyon sonunda başlangıç konumuna geri döner.
Bu kod, elemanın animasyon sonunda tamamen görünür olacağını belirtir. Yani, eleman animasyon sonunda tamamen opaktır.
Bu keyframes tanımı, belirli bir animasyonu açıklar. Animasyonun ne kadar süreceği, hangi elemanlara uygulanacağı ve nasıl tetikleneceği gibi detaylar, CSS kurallarında ayrıca belirtilmelidir. Örneğin, bu keyframes tanımını bir 'animation' kurallarıyla birleştirerek bir elemana uygulayabilirsiniz.
Yukarıdaki HTML koduna tanımladığımız gibi animation kodunu sizde uygulayabilirsiniz. Sorunuz varsa cevaplamaya çalışırım. İyi Sosyaller.
Öncelikle kodumuzu ve çıktısını gösterelim.
HTML Kodu:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Site 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="yazi">
<h1>YouTube</h1>
</div>
</body>
</html>CSS Kodu:
CSS:
body {
background-color: yellow;
}
.yazi{
text-align: center;
position:relative;
top: 450px
color: black;
animation: slideRight 1.5s ease linear;
}
@keyframes slideRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}Bu videoda çıktısını görebilirsiniz.
Şimdi kodu açıklayalım.
CSS'deki @keyframes kuralı, animasyonlar oluşturmak için kullanılır. Söz konusu kod örneğinde, slideRight adında bir keyframe tanımlanmış. Bu keyframe, belirli bir animasyonu açıklar. Şimdi, içerisindeki kodları teker teker açıklayalım:
0% bloğu:
CSS:
transform: translateX(-100px);Bu kod, elemanın yatay (X ekseni) yönde -100 piksel kaydırılacağını belirtir. Yani, eleman başlangıçta sol tarafa doğru 100 piksel kayar.
CSS:
opacity: 0;Bu kod, elemanın başlangıçta tamamen görünmez olacağını belirtir. Yani, eleman başlangıçta saydamdır.
100% bloğu:
CSS:
transform: translateX(0);Bu kod, elemanın yatay (X ekseni) yönde hiçbir kaydırma yapmadan yerinde duracağını belirtir. Yani, eleman animasyon sonunda başlangıç konumuna geri döner.
CSS:
opacity: 1;Bu kod, elemanın animasyon sonunda tamamen görünür olacağını belirtir. Yani, eleman animasyon sonunda tamamen opaktır.
Bu keyframes tanımı, belirli bir animasyonu açıklar. Animasyonun ne kadar süreceği, hangi elemanlara uygulanacağı ve nasıl tetikleneceği gibi detaylar, CSS kurallarında ayrıca belirtilmelidir. Örneğin, bu keyframes tanımını bir 'animation' kurallarıyla birleştirerek bir elemana uygulayabilirsiniz.
CSS:
.yazi{
animation: slideRight 1.5s ease linear;
}Yukarıdaki HTML koduna tanımladığımız gibi animation kodunu sizde uygulayabilirsiniz. Sorunuz varsa cevaplamaya çalışırım. İyi Sosyaller.
