CSS transform animasyon
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
#kutu-1 {
margin: 50px;
border: 5px ridge pink;
width: 250px;
height: 150px;
background-color: yellow;
color: black;
-webkit-animation: animasyonismi 4s infinite;
animation: animasyonismi 4s infinite;
text-align:center;
}
@-webkit-keyframes animasyonismi {
50% {-webkit-transform: rotate(180deg);}
}
@keyframes animasyonismi {
50% {transform: rotate(180deg);}
}
</style>
</head>
<body>
<strong>css transform animasyon örnek</strong>
<br />
<p>Gradually rotate the DIV element 180 degrees, and back:
<p>
<div id="kutu-1">
<h2>HTML Dersleri <br />CSS Dersleri <br />Javascript Dersleri</h2>
</div>
<em style="color:red;">css transform </em>özelliğini bir html elemanını sayfanın üstüne veya yukarındaki elemente göre konumlandırırken kullanılır..
<br />
<u style="color:blue;"> css transform</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