CSS3 animation-name Örnek

Kasım 26, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css animation name örnek ve uygulaması</title> <style> div { width: 80px; height: 80px; background: gray; color:yellow; margin:10px; border-radius:10px; box-sizing:border-box; padding-top:26px; text-align:center; font-size:25px; position: relative; -webkit-animation-name: eren; /* Chrome, Safari, Opera / -webkit-animation-duration: 4s; / Chrome, Safari, Opera / animation-name: eren; animation-duration: 4s; } / Chrome, Safari, Opera */ @-webkit-keyframes eren{ from {top: 0px;} to {top: 180px;} } @keyframes eren{ from {top: 0px;} to {top: 180px;} } </style> </head> <body> <div>EREN</div> <article><b>Hatırlatma:</b> <strong> css animation-name</strong> özelliği internet explorer 9 ve önceki versiyonlarında desteklenmiyor..</article> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>css animation name örnek ve uygulaması</title>
  <style>
    div {
       width: 80px;
        height: 80px;
        background: gray;
     color:yellow;
     margin:10px;
     border-radius:10px;
     box-sizing:border-box;
     padding-top:26px;
     text-align:center;
     font-size:25px;
        position: relative;
        -webkit-animation-name: eren;  /* Chrome, Safari, Opera */
        -webkit-animation-duration: 4s;  /* Chrome, Safari, Opera */
        animation-name: eren;
        animation-duration: 4s;
    }
    
    /* Chrome, Safari, Opera */
    @-webkit-keyframes eren{
        from {top: 0px;}
        to {top: 180px;}
    }
    
    @keyframes eren{
        from {top: 0px;}
        to {top: 180px;}
    }
  </style>

</head>

<body>
  <div>EREN</div>
  <article><b>Hatırlatma:</b> <strong> css animation-name</strong> özelliği internet explorer 9 ve önceki versiyonlarında desteklenmiyor..</article>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS3 animation-name Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Uyurken Bile Para Kazanmak İster misin

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

Javascript Oyun Yapma Dersleri HTML5+CSS3

javascript yazım kuralları

html nedir

Javascript yapısı ve DOM nedir

Web Sitenizden Çok Para Kazanin

YouTube reklamları nasıl engellenir

Javascript kodları nereye yazılır

HTML DOCTYPE Bildirimi