CSS3 Animasyon Sorunu [Yardım!]

15/Haz/12 16:28

Kısayol

Şikayet

Özel Mesaj

sezeruludag

Kayıt Tarihi: 22/Ağustos/2011

Arkadaşlar basit bir animasyon yapıcam fakat takıldığım bir nokta oldu aşağıdaki resimdeki gibi üç tane kutucuk var sırayla aşağı doğru opacity değeri yükselerek iniyorlar fakat ilk açıldığında ilk kutu iniyor sonra diğer kutuların gecikme süreleri gelene kadar açık kalıyor sonra hareket ediyorlar istediğim şey hepsi görünmesin sırayla gecikme süreleri geldiğinde görünsünler fakat Visible değerleriyle nekadar oynasamda değişen birşey yok :/ kapattığımda tekrar açılmıyorlar.

CSS KODU :

#yon-info-first
{
animation-name: info-first;
animation-duration: 3s;
/*animation-delay: 2s;*/
/* Firefox: */
-moz-animation-name: info-first;
-moz-animation-duration: 3s;
/*-moz-animation-delay: 2s;*/
/* Safari and Chrome: */
-webkit-animation-name: info-first;
-webkit-animation-duration: 3s;
/*-webkit-animation-delay: 2s;*/
float: left;
height: 380px;
width: 260px;
margin-right: 8px;
background-color: #8b8682;
}


#yon-info-second
{
animation-name: info-second;
animation-duration: 3s;
animation-delay: 2s;
/* Firefox: */
-moz-animation-name: info-second;
-moz-animation-duration: 3s;
-moz-animation-delay: 2s;
/* Safari and Chrome: */
-webkit-animation-name: info-second;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;

float: left;
height: 380px;
width: 260px;
background-color: #8b8682;
}


#yon-info-third
{
animation-name: info-third;
animation-duration: 3s;
animation-delay: 4s;
/* Firefox: */
-moz-animation-name: info-third;
-moz-animation-duration: 3s;
-moz-animation-delay: 4s;
/* Safari and Chrome: */
-webkit-animation-name: info-third;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 4s;

float: right;
height: 380px;
width: 260px;
background-color: #8b8682;
}

@keyframes info-first
{

from {	float: left;	height: 380px;	width: 260px;	margin-right: 8px;	background-color: #8b8682;	margin-top:-100px;	display:none; opacity:0.0;}
to {float: left;height: 380px;width: 260px;	margin-right: 8px;	background-color: #8b8682; display:block; opacity:1;}
}
@-webkit-keyframes info-first
{
from {	float: left;	height: 380px;	width: 260px;	margin-right: 8px;	background-color: #8b8682;	margin-top:-100px;	display:none; opacity:0.0;}
to {float: left;height: 380px;width: 260px;	margin-right: 8px;	background-color: #8b8682; display:block; opacity:1;}
}
@-moz-keyframes info-first
{	
from {	float: left;	height: 380px;	width: 260px;	margin-right: 8px;	background-color: #8b8682;	margin-top:-100px;	display:none; opacity:0.0;}
to {float: left;height: 380px;width: 260px;	margin-right: 8px;	background-color: #8b8682; display:block; opacity:1;}
}

/*------------------------------------------------------------------------------*/


@keyframes info-second
{

from {	float: left; height: 380px;	width: 260px;	background-color: #8b8682;	margin-top:-100px;	display:none; opacity:0.0;}
to {float: left; height: 380px;	width: 260px;	background-color: #8b8682; display:block; opacity:1;}
}
@-webkit-keyframes info-second
{
from {	float: left; height: 380px;	width: 260px;	background-color: #8b8682;	margin-top:-100px;	display:none; opacity:0.0;}
to {float: left; height: 380px;	width: 260px;	background-color: #8b8682; display:block; opacity:1;}
}
@-moz-keyframes info-second
{	
from {	float: left; height: 380px;	width: 260px;	background-color: #8b8682;	margin-top:-100px;	display:none; opacity:0.0;}
to {float: left; height: 380px;	width: 260px;	background-color: #8b8682; display:block; opacity:1;}
}

/*------------------------------------------------------------------------------*/

@keyframes info-third
{
from {float: right;height: 380px;width: 260px;background-color: #8b8682;margin-top:-100px;	display:none; opacity:0.0;}
to {float: right;height: 380px;width: 260px;background-color: #8b8682; display:block; opacity:1;}
}
@-webkit-keyframes info-third
{
from {float: right;height: 380px;width: 260px;background-color: #8b8682;margin-top:-100px;	display:none; opacity:0.0;}
to {float: right;height: 380px;width: 260px;background-color: #8b8682; display:block; opacity:1;}
}
@-moz-keyframes info-third
{	
from {float: right;height: 380px;width: 260px;background-color: #8b8682;margin-top:-100px;	display:none; opacity:0.0;}
to {float: right;height: 380px;width: 260px;background-color: #8b8682; display:block; opacity:1;}
}

Hatasız Kod Olmaz... :)

Alıntı yap

15/Haz/12 21:01

Kısayol

Şikayet

Özel Mesaj

ASLIYUCE

Kayıt Tarihi: 17/Haziran/2006

git biraz gez dolaş hava al sezer (: uçmuşsun belli.

#yon-info-third ve #yon-info-second a opacity:0; ver istediğinin tıpkısı olur ;)

bu arada hasta oldum id lere (:

edit: animasyon aynı değil mi üçünde de neden tek animasyon yazıp hepsinde onu uygulamadın.

Alıntı yap

16/Haz/12 10:48

Kısayol

Şikayet

Özel Mesaj

sezeruludag

Kayıt Tarihi: 22/Ağustos/2011

ASLIYUCE bunu yazdı:
-----------------------------

git biraz gez dolaş hava al sezer (: uçmuşsun belli.

#yon-info-third ve #yon-info-second a opacity:0; ver istediğinin tıpkısı olur ;)

bu arada hasta oldum id lere (:

edit: animasyon aynı değil mi üçünde de neden tek animasyon yazıp hepsinde onu uygulamadın.

-----------------------------

hayır sırayla inmelerini istiyorum dediğinide denedim opacity verdim animasyon bittikten sonra o verdiğim opacity'yi kabul edip bu sefer'de sayfada görünmüyor :) uçmak değil bu zaten CSS3'te animasyon ilk'i insin sonra ikincisi sonra üçüncüsü şeklinde. Delay değerlerini verince animasyonlar oyle çalışıyor ama istediğim o değil

Hatasız Kod Olmaz... :)

Alıntı yap