Question

我已经在按钮中制作了一个动画，它在Firefox中正常工作但是在Chrome中开始动画时有大约30秒的延迟而在IE中没有工作。

Fiddle demo

HTML

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8"> 

    <link href="Untitled-2.css" rel="stylesheet" type="text/css">
    </head>

    <body>
     <input type="submit" class="submit" id="hue" value="Submit"/>
        <input type="submit" class="new_set" id="hue" value="New Set"/>
    </body>

    </html>

CSS

#hue {
background-color: hsl(0, 100%, 50%); /*red*/
animation: hue 3s infinite alternate;
-webkit-animation: hue 4s infinite alternate;
}
@keyframes hue {
/*hue will animate from 0 to 360. Saturation and Lightness remain      constant*/
20% {background-color: hsl(72, 100%, 50%);}
40% {background-color: hsl(144, 100%, 50%);}
60% {background-color: hsl(216, 100%, 50%);}
80% {background-color: hsl(288, 100%, 50%);}
100% {background-color: hsl(360, 100%, 50%);}
}
@-webkit-keyframes  hue {
/*hue will animate from 0 to 360. Saturation and Lightness remain constant*/
20% {background-color: hsl(72, 100%, 50%);}
40% {background-color: hsl(144, 100%, 50%);}
60% {background-color: hsl(216, 100%, 50%);}
80% {background-color: hsl(288, 100%, 50%);}
100% {background-color: hsl(360, 100%, 50%);}
}
.submit,.new_set{
/*We will create a white to black gradient using 'background-image' with 60% opacity. This will be later merged with animated 'background-color' to give the effect of an animated gradient*/
background-image: linear-gradient(
    rgba(255,255,255,0.6), 
    rgba(0,0,0,0.6)
)

display: inline-block;
height: 70px; width: 120px;
/*Same as height*/
margin: 5px;

color: white;
font-size: 12px;
font-weight: bold;

border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

在Firefox中工作正常，但动画在chrome中延迟而在ie中不起作用

0 个答案: