javascript函数使动画div css

Question

我试图让一个 div 动画 onmouseover，但它不起作用

这是我的 javascript，我在 Internet Explorer 和 Firefox 上使用了 .style.animation，在 chrome 上使用了 .style.webkitanimation:

function emailhelp() { 

  document.getElementById('help-text').innerHTML = 'Enter you´re email';
  document.getElementById('help-box').style.animation ='myfirst 5s;';
  document.getElementById('help-box').style.webkitanimation ='myfirst 5s;';

}

这是 CSS:

@keyframes myfirst
{
  from {background-color:#00304c;}
  to {background-color:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  from {background-color:#00304c;}
  to {background-color:yellow;}
}
#help-box {
 position: fixed;
 top: 82px;
 left: 50%;
 margin-left: 289px;
 font-size: 12px;
 background-color: #00304c;
 height: 32px;
 width: 250px;
 line-height: 32px;
 padding-left: 10px;
 margin-right: 0px;
 text-align:center;
}

这是我的 HTML:

<input class="user-input" name="" type="text" value="email" onmouseover="emailhelp()" onmouseout="helphide()" onfocus="if(this.value == 'email') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'email'; }" onmouseover="emailhelp()" onmouseout="helphide()" />

Answer 1

您需要将属性大写(至少对于 webkit 而言):

document.getElementById('help-box').style.WebkitAnimation ='myfirst 5s';

对于 FF，你的代码应该没问题:

document.getElementById('help-box').style.animation ='myfirst 5s';

这是一个演示:http://jsfiddle.net/E4vSx/