CSS width animasyon
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
#kutu-1 {
width: 100px;
background-color: crimson;
color: white;
-webkit-animation: animasyonismi 4s infinite;
animation: animasyonismi 4s infinite;
border:3px ridge yellow;
}
@-webkit-keyframes animasyonismi {
50% {width: 300px;}
}
@keyframes animasyonismi {
50% {width: 300px;}
}
</style>
</head>
<body>
<strong>css width animasyon örnek</strong>
<br /> .
<div id="kutu-1">
<h1>Genişleyecek kutu</h1>
</div>
<em style="color:red;">css width </em>özelliğini bir html elemanını genişliğini belirtmek için kullanılır.
<br />
<u style="color:blue;"> css width</u> özelliğinin animasyon özelliği vardır.
<p style="color:green;"><b>Hatırlatma:</b> internet explorer 9 ve önceki versiyonları CSS animasyon özellikleri desteklemez !</p>
</body>
</html>
Yorumlar
Yorum Gönder