css bounce并在javascript中添加类 [英] css bounce and add class in javascript

问题描述

我的css有什么问题，弹跳动画只是不会发生？
我想要一个图像根据我的css动画反弹bounce不发生

HTML CODE ::

 < div class =hair> 
< img src =images / single.pngid =hair1class =hair_animatewidth =13height =40onclick =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'; 
} 
  

解决方案

看起来更像这样

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 
} 
 40％{
 -webkit-transform：translateY（-60px）; 
} 
 60％{
 -webkit-transform：translateY（-35px）; 
} 
} 
 @ -moz-keyframes bounce {
 0％，20％，50％，80％，100％{
 -moz-transformation：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 
} 
 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; 
} 
  

运行示例：
$ b

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

what is wrong with my css,the bounce animation just doesn`t happen??? I want an image to bounce on click according to my css animation which is not happening

HTML CODE::

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

Css Code:

.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 code:

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

解决方案

I would expect your code to look more like this

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";
}

Running Example:

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

这篇关于css bounce并在javascript中添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！