CSS Animasyon düzgün çalışmıyor vay js

Projem için wow.js'yi entegre ettim ve animasyonla ilgili bir sorunla karşılaştım.CSS Animasyon düzgün çalışmıyor vay js

Divayı canlandırmakta kullandığım animasyon sınıfı, css sınıfını animate.css dosyasından katıştırılmış stil sayfası olarak sayfamıza yapıştırırsam ve ayrıca veri-vay içinde gecikme olsa bile div gösteriliyorsa çalışıyorum. -delay = "5s" ve animasyon 5 saniye sonra düzgün çalışıyor. Bunun neden olduğunu bilen var mı? İşte

benim kodudur

HTML:

<div class="cssAnimation hidediv"> 
    <div class="dial1 wow slideInLeft " data-wow-duration="2s" data-wow-delay="5s"> 
     Anmation goes here 1 
    </div> 
</div>

CSS:

<style type="text/css"> 

.dial1{ 
    width:200px; 
    height: 100px; 
    display: block; 
    position: absolute; 
    background: #000; 
    color:#fff; 
    padding: 10px; 
    right: 0; 
    z-index: 9999; 
} 

.dial2{ 
    width:200px; 
    height: 100px; 
    display: block; 
    position: absolute; 
    background: #000; 
    color:#fff; 
    padding: 10px; 
    right: 210px; 
} 


.hidediv{ 
-webkit-animation: hide 2s forwards; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-delay: 5s; 
animation: hide 2s forwards; 
animation-iteration-count: 1; 
animation-delay: 5s; 
} 

@-webkit-keyframes hide { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    visibility:hidden; 
    display: none; 
    } 
} 

@keyframes hide { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
     visibility:hidden; 
    display: none; 
} 
} 

    .cssAnimation{ 
     width:600px; 
     height: 300px; 
    position: absolute; 
    /* display: none; */ 
    z-index: 9999; 
    } 

@-webkit-keyframes slideInLeft { 
     0% { 
      opacity: 0; 
      -webkit-transform: translateX(-2000px); 
      transform: translateX(-2000px); 
      } 

     100% { 
     -webkit-transform: translateX(0); 
      transform: translateX(0); 
     } 
     } 

    @keyframes slideInLeft { 
     0% { 
     opacity: 0; 
     -webkit-transform: translateX(-2000px); 
     -ms-transform: translateX(-2000px); 
     transform: translateX(-2000px); 
     } 

     100% { 
    -webkit-transform: translateX(0); 
    -ms-transform: translateX(0); 
     transform: translateX(0); 
    } 
    } 

    .slideInLeft { 
     -webkit-animation-name: slideInLeft; 
     animation-name: slideInLeft; 
    } 

    </style>

kaynak

2016-02-03 Raj

Yalnızca sınıfları gömülü css olarak yerleştirdikten sonra çalışan animasyon sınıfı '' etiketlerinde, dosyaya doğru bir şekilde bağlanmadığınızı gösterir. Animasyon sadece beş saniye sonra (gecikme ile) çalışıyorsa, bu birçok soruna neden olabilir. – Defiant

Cevabınız için teşekkürler .. :) Tarayıcıda inceleme elemanını kullanarak dosyayı bulup yeni sekmeyi açtığımda, animate.css dosyası görüntülenir. Bu konuma bağlantı doğru değilse, yeni sekmede doğru görüntülenmez ..? Bu yüzden konumu veya bağlantı ile ilgili bir sorun değil düşünüyorum.Ve zaman gecikmesi için: - Eğer veri-wow-delay = "5s" kullanarak bir zaman gecikmesi verirsek div bu gecikme süresi 5sec sonra görünmelidir ve normal durum doğru. ama sayfada kendini gösteren div.Im codeiginter framework kullanarak ve benim css dosyaları header.php içinde bulundu ve – Raj

'hidediv' sayfa CSS göre yüklendiğinde gizlenmiş değil. Buna opacity: 0; 'özniteliğini eklemeyi deneyebilirsiniz. – Defiant

Kişisel css o olacak ne gibi animate.css gelen .animated sınıfını içermesi gerekir

Öğe görünümündeyken Wow.js tarafından (başka bir seçici belirtmediğiniz sürece), animasyonlarınızı tetikleyerek ekledi.

kaynak

2016-10-10 08:46:42

CSS Animasyon düzgün çalışmıyor vay js

cevap

İlgili konular