css弹跳并在javascript中添加类答案

【问题标题】：css bounce and add class in javascriptcss弹跳并在javascript中添加类
【发布时间】：2013-06-04 20:45:02
【问题描述】：

我的 css 出了什么问题，弹跳动画没有发生？？？我希望根据我没有发生的 css 动画在点击时反弹图像

HTML 代码::

<div class="hair">
    <img src="images/single.png" id="hair1" class="hair_animate"  width="13" height="40" onclick="bounce();" >
</div>

CSS代码：

.hair{
    position: absolute;
    top: 500px;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-60px);}
    60% {-webkit-transform: translateY(-35px);}
}
.bounce_css
{
    -webkit-animation-name: bounce;
}

Javascript 代码：

function bounce(){
    alert("reached")
document.getElementById('hair1').style.WebkitAnimationName = 'bounce_css';
}

【问题讨论】：

请解释清楚是和应该在这段代码中会发生什么。
好的！！！我会编辑问题
document.getElementById('hair1').style.className = 'bounce_css';
@epascarello:在上面的css中
有什么错误吗？好吧也试试这个：document.getElementById('hair1').style.WebkitAnimationName = 'bounce';

标签： javascript css css-animations

【解决方案1】：

我希望你的代码看起来更像这样

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 bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-60px);
    }
    60% {
        -webkit-transform: translateY(-35px);
    }
}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-60px);
    }
    60% {
        -moz-transform: translateY(-35px);
    }
}
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -o-transform: translateY(0);
    }
    40% {
        -o-transform: translateY(-60px);
    }
    60% {
        -o-transform: translateY(-35px);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-60px);
    }
    60% {
        transform: translateY(-35px);
    }
}
.bounce_css {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;
}

JavaScript：

function bounce() {
    document.getElementById('hair1').className = "animated bounce_css";
}

运行示例：

http://jsfiddle.net/GALU5/1/

【讨论】：

【解决方案2】：

试试：

function bounce(){
    alert("reached")
    document.getElementById('hair1').classList.add('bounce_css');
}

或者：

function bounce(){
    alert("reached")
    document.getElementById('hair1').style.WebkitAnimationName = 'bounce';
}

【讨论】：