1

このサイトの最下部の CSS3 アニメーションから<main>要素にスライドアップを追加しようとしていますが、アニメーションが再生/実行されません。

理由はありますか？

発生していないページへのリンクは次のとおりです: https://dl.dropboxusercontent.com/u/270523/help/animate/new.html

アニメーション用の CSS は次のとおりです。

.animated{
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
   -moz-animation-duration:1s;
   -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
 }
 @-webkit-keyframes bounceInUp {
0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
}
    60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
}
80% {
    -webkit-transform: translateY(10px);
}
100% {
    -webkit-transform: translateY(0);
    }
}
@-moz-keyframes bounceInUp {
0% {
    opacity: 0;
    -moz-transform: translateY(2000px);
}

60% {
    opacity: 1;
    -moz-transform: translateY(-30px);
}

80% {
    -moz-transform: translateY(10px);
}

100% {
    -moz-transform: translateY(0);
    }
}

@-o-keyframes bounceInUp {
0% {
    opacity: 0;
    -o-transform: translateY(2000px);
}

60% {
    opacity: 1;
    -o-transform: translateY(-30px);
}

80% {
    -o-transform: translateY(10px);
}

100% {
    -o-transform: translateY(0);
    }
}

@keyframes bounceInUp {
0% {
    opacity: 0;
    transform: translateY(2000px);
}

60% {
    opacity: 1;
    transform: translateY(-30px);
}

80% {
    transform: translateY(10px);
}

100% {
    transform: translateY(0);
    }
}

.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
4

1 に答える 1

2

あなたの HTML コードでは、ここにタイプミスがあります:

<link rel="stylsheet" href="animate.css" type="text/css">

それは"stylesheet"！

于 2013-04-30T19:05:35.220 に答える