Css3 Animation kullanımı
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>
