0

我正在尝试在此网页上实现“bounceInDown”效果，但没有任何反应。你知道什么是错的吗？见jsfiddle：http: //jsfiddle.net/N2Yx9/

HTML：

<div id="box" class="bounceInDown">test</div>

CSS：

#box {
    position: absolute;
    top: 317px;
    left: 295px;
    padding: 20px 20px 20px 55px;
    text-decoration: none;
    background:#0F6
}

/*
Animate.css - http://daneden.me/animate
*/

.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;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn {
    0% {opacity: 0;}    100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

@-o-keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

@keyframes fadeIn {
    0% {opacity: 0;}    
    100% {opacity: 1;}
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
}
@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

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

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

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

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

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

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

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    -moz-animation-name: fadeInDownBig;
    -o-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}
@-webkit-keyframes bounceInDown {
    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 bounceInDown {
    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 bounceInDown {
    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 bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }

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

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

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

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

2 回答 2

2

您必须添加两个类。将animated项目指定为动画的类。然后bounceInDown定义什么类型的动画。

<div id="box" class="animated bounceInDown">test</div>

在这里更新了小提琴

于 2013-06-08T13:05:17.503 回答
0

这是使用animate.css的简单解决方案：

首先创建一个 CSS 类myAnimation。然后在 HTML 中使用它：

.myAnimation {
  -webkit-animation: bounceInDown 1s ease-in-out 200ms both;
  animation: bounceInDown 1s ease-in-out 200ms both;
}
<h3 class="myAnimation"><span>Animation Using animate.css</span></h3>

于 2014-11-18T12:37:30.010 回答