Question

我有一个非常简单的CSS动画的奇怪问题。它并没有在Chrome中触发，我无法弄清楚原因。

/*** SPIN BUTTON ***/
@keyframes spinbutton {
    0%   { background-color: #e9b817; color: #177e78; }
    50%  { background-color: #177e78; color: #e9b817; }
    100% { background-color: #e9b817; color: #177e78; }
}

@-webkit-keyframes spinbutton {
    0%   { background-color: #e9b817; color: #177e78; }
    50%  { background-color: #177e78; color: #e9b817; }
    100% { background-color: #e9b817; color: #177e78; }
}

@-moz-keyframes spinbutton {
    0%   { background-color: #e9b817; color: #177e78; }
    50%  { background-color: #177e78; color: #e9b817; }
    100% { background-color: #e9b817; color: #177e78; }
}

@-o-keyframes spinbutton    {
     0%  { background-color: #e9b817; color: #177e78; }
    50%  { background-color: #177e78; color: #e9b817; }
    100% { background-color: #e9b817; color: #177e78; }
}


.spin-button-inner-active
{
    -webkit-animation: spinbutton 1s infinite;
    -moz-animation: spinbutton 1s infinite;
    -o-animation: spinbutton 1s infinite;
    animation: spinbutton 1s infinite;
}

它用于div元素

<div class="spin-button-inner spin-button-inner-active">SPIN!</div>

它在Firefox中完美播放

Answer 1

CSS动画应如下所示：

＆＃13;

@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

＆＃13;

添加您喜欢的任何属性

CSS动画在Chrome中无法触发

1 个答案: