Merhaba arkadaşlar sizlere css3 ile gelen bir özellik olan animation özelliğinden bahsetmek istiyorum.
animation özelliği sayesinde artık sitemizde flasha ihtiyaç duymadan animasyon yapabiliyoruz.
Nasıl yapılır diye bakacak olursak:
@keyframes animation_name
@keyframes ile css kodumuzda animasyon ile ilgili bilgiler yazılır.
@keyframes renkDegistir {
50% {
color:#f00;
}
100% {
color:#000;
}
}
/* firefox için */
@-moz-keyframes renkDegistir {
50% {
color:#f00;
}
100% {
color:#000;
}
}
/* safari ve chrome için */
@-webkit-keyframes renkDegistir {
50% {
color:#f00;
}
100% {
color:#000;
}
}
/* opera için */
@-o-keyframes renkDegistir {
50% {
color:#f00;
}
100% {
color:#000;
}
}
Açıklayacak olursak renkDegistir adında bir keyframes oluşturduk ve animasyonun yarısındayken renk #f00 biterken de #000 olmasını söyledik.
Keyframes in iki türlü kullanımı mevcut bir diğeri ise from do (başlangıç bitiş) mantığı onada bir örnek verecek olursak
@keyframes arkaplanDegistir {
from{
background:#ddd;
}
do {
background: #bbb;
}
}
@-moz-keyframes arkaplanDegistir {
from{
background:#ddd;
}
do {
background: #bbb;
}
}
@-webkit-keyframes arkaplanDegistir {
from{
background:#ddd;
}
do {
background: #bbb;
}
}
@-o-keyframes arkaplanDegistir {
from{
background:#ddd;
}
do {
background: #bbb;
}
}
arkaplanDegistir adında keyframes oluşturduk ve rengini başlangıçta #ddd bitişte #bbb olmasını belirttik.
Evet Arkadaşlar animasyonumuzu oluşturduk sıra geldi kullanmaya kullanmak için önce bir yapı hazırlayalım
<!DOCTYPE html>
<html>
<head>
<title>Vehbi Akdoğan Css3 animation kullanımı </title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="keyword" content="" />
<meta name="author" content="Vehbi Akdogan" />
</head>
<body>
<div class="rengiDegisenYazi"> Bu Yazının rengi değişecek </div>
<div class="arkaplaniDegisenYazi"> Bu Yazının Arkaplanı değişecek </div>
</body>
</html>
Evet daha sonra animasyonlarımızı uygulamak için css nin animation özelliğine göz atalım şimdi.
Animation Kullanımı
animation-name: Oluşturduğumuz keyframesin adını burda yazıyoruz.
animation-duration: Animasyonumuzun tamamlanma süresini yazıyoruz. (örn: 2s)
animation-delay: Animasyonunun gecikme süresidir. 1s dersek animasyonumuz 1s sonra başlar.
animation-iteration-count: Animasyonun kaç kere tekrarlanacağını belirtiriz. alabileceği değerler (1,2,3,4,….,infinite). infinite dersek sonsuz kere tekrar eder.
animation-direction: Animasyonunun yönünü belirtmemizi sağlar.
animation-play-state: Animasyonunun çalışma özelliğini burda veriyoruz alabileceği değerler: running,paused varsayılan olarak running yanı çalışsın şeklindedir.
Tabiki bu kadr çok kod 1 animasyon için kullanırsak o işin içinden çıkılmaz 🙂 bunun için sadece animate kullanarak tüm özellikleri tanımlayacağız
tam Örneğimizi verecek olursak :
<!DOCTYPE html>
<html>
<head>
<title>Vehbi Akdoğan Css3 animation kullanımı </title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="keyword" content="" />
<meta name="author" content="Vehbi Akdogan" />
<style type="text/css">
*,body {
padding:0;
margin:0;
}
@keyframes renkDegistir {
50% {
color:#f00;
}
100% {
color:#000;
}
}
/* firefox için */
@-moz-keyframes renkDegistir {
50% {
color:#f00;
}
100% {
color:#000;
}
}
/* safari ve chrome için */
@-webkit-keyframes renkDegistir {
50% {
color:#f00;
}
100% {
color:#000;
}
}
/* opera için */
@-o-keyframes renkDegistir {
50% {
color:#f00;
}
100% {
color:#000;
}
}
/* diğer bir kullanım */
@keyframes arkaplanDegistir {
from{
background:#ddd;
}
do {
background: #bbb;
}
}
@-moz-keyframes arkaplanDegistir {
from{
background:#ddd;
}
do {
background: #bbb;
}
}
@-webkit-keyframes arkaplanDegistir {
from{
background:#ddd;
}
do {
background: #bbb;
}
}
@-o-keyframes arkaplanDegistir {
from{
background:#ddd;
}
do {
background: #bbb;
}
}
.rengiDegisenYazi,.arkaplaniDegisenYazi {
color:#343434;
padding:5px 10px;
}
.rengiDegisenYazi {
-webkit-animation:renkDegistir .5s linear .5s infinite alternate;
-moz-animation:renkDegistir .5s linear .5s infinite alternate;
-o-animation:renkDegistir .5s linear .5s infinite alternate;
animation:renkDegistir .5s linear .5s infinite alternate;
}
.arkaplaniDegisenYazi {
animation:arkaplanDegistir .5s linear .5s infinite alternate;
-webkit-animation:arkaplanDegistir .5s linear .5s infinite alternate;
-moz-animation:arkaplanDegistir .5s linear .5s infinite alternate;
-o-animation:arkaplanDegistir .5s linear .5s infinite alternate;
}
body {
animation:arkaplanDegistir 1s linear 1s infinite alternate;
-moz-animation:arkaplanDegistir 1s linear 1s infinite alternate;
-webkit-animation:arkaplanDegistir 1s linear 1s infinite alternate;
-o-animation:arkaplanDegistir 1s linear 1s infinite alternate;
}
</style>
</head>
<body>
<div class="rengiDegisenYazi"> Bu Yazının rengi değişecek </div>
<div class="arkaplaniDegisenYazi"> Bu Yazının Arkaplanı değişecek </div>
</body>
</html>
Demo
