CSS3动画缩放属性在非webkit浏览器上不工作

我整个上午都在为这件事绞尽脑汁。我使用CSS3背景渐变在一个div上加上一个比例过渡，给人一种进度条效果的错觉。我只能让它在webkit浏览器上工作。所有其他的从一开始就显示最终结果。有什么想法吗?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#grad1
{
position:absolute;
top:10px;
left:10px;
height:30px;
width:110px;
visibility:visible;
background: -webkit-linear-gradient(left, #EF8E76, #E54D26);
background: -moz-gradient(right, #EF8E76, #E54D26);
background: -o-linear-gradient(right, #EF8E76, #E54D26);
background: linear-gradient(to right, #EF8E76, #E54D26);
-webkit-animation: grow 10s linear 0s 1;
-moz-animation: grow 10s linear 0s 1;
-o-animation: grow 10s linear 0s 1;
-ms-animation: grow 10s linear 0s 1;
animation: grow 10s linear 0s 1;
}
@-webkit-keyframes grow {
0% { -webkit-transform: scale(0,1);-webkit-transform-origin: 0% 0%; visibility:hidden;}
10% { -webkit-transform: scale(0,1);-webkit-transform-origin: 0% 0%; visibility:visible;}
100% { -webkit-transform: scale(1,1);-webkit-transform-origin: 0% 0%; visibility:visible;}
}
@-moz-keyframes grow {
0% { -webkit-transform: scale(0,1);-moz-transform-origin: 0% 0%; visibility:hidden;}
10% { -webkit-transform: scale(0,1);-moz-transform-origin: 0% 0%; visibility:visible;}
100% { -webkit-transform: scale(1,1);-moz-transform-origin: 0% 0%; visibility:visible;}
}
@-o-keyframes grow {
0% { -webkit-transform: scale(0,1);-o-transform-origin: 0% 0%; visibility:hidden;}
10% { -webkit-transform: scale(0,1);-o-transform-origin: 0% 0%; visibility:visible;}
100% { -webkit-transform: scale(1,1);-o-transform-origin: 0% 0%; visibility:visible;}
}
@-ms-keyframes grow {
0% { -webkit-transform: scale(0,1);-ms-transform-origin: 0% 0%; visibility:hidden;}
10% { -webkit-transform: scale(0,1);-ms-transform-origin: 0% 0%; visibility:visible;}
100% { -webkit-transform: scale(1,1);-ms-transform-origin: 0% 0%; visibility:visible;}
}
@keyframes grow {
0% { -webkit-transform: scale(0,1);transform-origin: 0% 0%; visibility:hidden;}
10% { -webkit-transform: scale(0,1);transform-origin: 0% 0%; visibility:visible;}
100% { -webkit-transform: scale(1,1);transform-origin: 0% 0%; visibility:visible;}
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>

正如@vals在评论中所说，您正在使用-webkit前缀来表示不同动画声明中的所有transform属性。

如果你将你的CSS更新为以下内容，它应该可以工作:

@-moz-keyframes grow {
    0% {
        -moz-transform: scale(0, 1);
        -moz-transform-origin: 0% 0%;
        visibility:hidden;
    }
    10% {
        -moz-transform: scale(0, 1);
        -moz-transform-origin: 0% 0%;
        visibility:visible;
    }
    100% {
        -moz-transform: scale(1, 1);
        -moz-transform-origin: 0% 0%;
        visibility:visible;
    }
}
@-o-keyframes grow {
    0% {
        -o-transform: scale(0, 1);
        -o-transform-origin: 0% 0%;
        visibility:hidden;
    }
    10% {
        -o-transform: scale(0, 1);
        -o-transform-origin: 0% 0%;
        visibility:visible;
    }
    100% {
        -o-transform: scale(1, 1);
        -o-transform-origin: 0% 0%;
        visibility:visible;
    }
}
@-ms-keyframes grow {
    0% {
        -ms-transform: scale(0, 1);
        -ms-transform-origin: 0% 0%;
        visibility:hidden;
    }
    10% {
        -ms-transform: scale(0, 1);
        -ms-transform-origin: 0% 0%;
        visibility:visible;
    }
    100% {
        -ms-transform: scale(1, 1);
        -ms-transform-origin: 0% 0%;
        visibility:visible;
    }
}
@keyframes grow {
    0% {
        transform: scale(0, 1);
        transform-origin: 0% 0%;
        visibility:hidden;
    }
    10% {
        transform: scale(0, 1);
        transform-origin: 0% 0%;
        visibility:visible;
    }
    100% {
        transform: scale(1, 1);
        transform-origin: 0% 0%;
        visibility:visible;
    }
}

注意:如果你不改变你的动画中的transform-origin值，你应该删除它们

相关内容

最新更新

热门标签：