6
私のプロジェクトにwow.jsを統合しましたが、アニメーションに問題が発生しました。CSSアニメーションが正しく動作しません
divをアニメーション化するために使用したアニメーションクラスは、animate.cssのCSSクラスを埋め込みスタイルシートとして私のページに貼り付けただけで動作します。また、データワウで遅延を与えてもdivも表示されます-delay = "5s"、アニメーションは5秒後に正常に動作します。誰がなぜこれが起こっているのか分かっているなら、私を助けてください。ここで
私のコードがある
..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>
「」タグの埋め込みCSSとしてクラスを挿入した後にのみ動作するアニメーションクラスは、ファイルに正しくリンクしていないことを示しています。 5秒後に（遅れて）動作するアニメーションは、多くの問題が原因である可能性があります。 – Defiant
返信いただきありがとうございます。:)ブラウザでinspect要素を使用してファイルを検索し、新しいタブを開くと、animate.cssファイルが表示されます。その場所へのリンクが正しくない場合は、新しいタブには表示されません。だから、私はその場所またはlink.Andの問題ではないと思うと時間の遅延： - 私たちは、その時間遅れて5秒後に表示される必要がありますdata-wow-delay = "5s"を使用して時間の遅延を与え、正常な場合の権利。？ページが読み込まれるとdivが表示されます.If codeiginterフレームワークを使用していて、CSSファイルはfooter.phpのヘッダーとスクリプトにあります。 – Raj
CSSによると、ページが読み込まれると 'hidediv'が非表示になりません。属性 'opacity：0;'を追加することができます。 – Defiant