Question

整个上午一直在绞尽脑汁。我在div上使用CSS3背景渐变以及缩放过渡来给出进度条效果的错觉。我只能在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>

Answer 1

正如@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值，则应将其删除。

CSS3动画比例属性不适用于非webkit浏览器

1 个答案: