Merhaba arkadaşlar bir önceki CSS3 @keyframes Nedir? Nasıl Kullanılır ? adlı yazımda Keyframes`e giriş yapmıştık bu dersimdede video lu bir şekilde Keyframes ile animasyonlar yapımını anlattım.
Not: Video uzamasın diye ön ek eklemedim siz animation-duration, animation-name ve keyframes kodlarına ön ekleri ekleyiniz.(-moz-, -webkit- vs.)
İpucu: Kutu Divine şu kodu yazarsak animasyon tekrarlar:
animation-iteration-count:infinite;
CSS3 @keyframes ile Basit Animasyonlar Yapmak
Kodlara videonun altından ulaşabilirsiniz, İyi Seyirler.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
*{margin:0; padding:0;} .kutu{ width:100px; height:50px; background:#000; color:#fff; animation-name:kutu; animation-duration:2s; } @keyframes kutu{ from{background:red;width:150px} to{background:green; width:300px;} } |
1 |
<div class="kutu">Bu bir deneme yazıdır.</div> |
Yorumlar