CSS3 动画比例在 Safari 中无法按预期工作
所需的效果在 Firefox 和 Chrome 中有效，但在 Safari 中无效。
动画的行为如下：
- 立即向左
- 平移 放大
- 缓慢向右平移
- 缩小
这些都工作正常，只是在 Safari 中没有缩小功能。 我一生都无法弄清楚为什么。 如有任何帮助，我们将不胜感激。
#frame {
position:relative;
width:660px;
margin:5% auto 0;
height:177px;
border:1px solid #999;
overflow:hidden;
-webkit-transform:scale(.5);
}
.paper {
position:absolute;
top:0;
left:0;
width:660px;
height:177px;
}
.scribble {
position:absolute;
top:0;
left:0;
width:0;
height:177px;
}
.green {
background:url(scribble1.png) no-repeat 0 0;
top:0;
}
.red {
background:url(scribble2.png) no-repeat 0 0;
top:45px;
}
.blue {
background:url(scribble3.png) no-repeat 0 0;
top:82px;
}
/*
* Add Zoom-in Routine
*
*/
@-webkit-keyframes zoomin {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(2);
}
}
/*
* Add Zoom-out Routine
*
*/
@-webkit-keyframes zoomout {
0% {
-webkit-transform: scale(2);
}
100% {
-webkit-transform: scale(1);
}
}
/*
* Add Pan Routine
*
*/
@-webkit-keyframes pan {
0% {
left:660px;
}
50% {
left:-80px;
}
100% {
left:0;
}
}
/*
* Add Draw Routine
*
*/
@-webkit-keyframes draw {
0% {
width:0;
}
100% {
width:660px;
}
}
/*
* Begin Animation
*
*/
.paper {
-webkit-animation:
pan 10s ease-out,
zoomin 3s ease,
zoomout 5s 5s ease;
-webkit-animation-fill-mode:forwards;
}
.green {
-webkit-animation:draw 10s ease;
-webkit-animation-fill-mode:forwards;
}
.red {
-webkit-animation:draw 9s linear;
-webkit-animation-fill-mode:forwards;
}
.blue {
-webkit-animation:draw 8s ease-in-out;
-webkit-animation-delay:2s;
-webkit-animation-fill-mode:forwards;
}
<body>
<div id="frame">
<div class="paper">
<div class="scribble blue"></div>
<div class="scribble green"></div>
<div class="scribble red"></div>
</div>
</div>
</body>
</html>
演示和实时代码可以在以下位置查看： http://blindmikey.com/dev/animation/scribbles2 .php
The desired effect is working in Firefox and Chrome, but not Safari.
The Animation is to behave as follows:
- Pan Immediately to the left
- Zoom in
- Slowly Pan to the right
- Zoom out
These all work fine except that in Safari, there is no Zooming Out.
I can't for the life of me figure out why.
Please, any help is appreciated.
#frame {
position:relative;
width:660px;
margin:5% auto 0;
height:177px;
border:1px solid #999;
overflow:hidden;
-webkit-transform:scale(.5);
}
.paper {
position:absolute;
top:0;
left:0;
width:660px;
height:177px;
}
.scribble {
position:absolute;
top:0;
left:0;
width:0;
height:177px;
}
.green {
background:url(scribble1.png) no-repeat 0 0;
top:0;
}
.red {
background:url(scribble2.png) no-repeat 0 0;
top:45px;
}
.blue {
background:url(scribble3.png) no-repeat 0 0;
top:82px;
}
/*
* Add Zoom-in Routine
*
*/
@-webkit-keyframes zoomin {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(2);
}
}
/*
* Add Zoom-out Routine
*
*/
@-webkit-keyframes zoomout {
0% {
-webkit-transform: scale(2);
}
100% {
-webkit-transform: scale(1);
}
}
/*
* Add Pan Routine
*
*/
@-webkit-keyframes pan {
0% {
left:660px;
}
50% {
left:-80px;
}
100% {
left:0;
}
}
/*
* Add Draw Routine
*
*/
@-webkit-keyframes draw {
0% {
width:0;
}
100% {
width:660px;
}
}
/*
* Begin Animation
*
*/
.paper {
-webkit-animation:
pan 10s ease-out,
zoomin 3s ease,
zoomout 5s 5s ease;
-webkit-animation-fill-mode:forwards;
}
.green {
-webkit-animation:draw 10s ease;
-webkit-animation-fill-mode:forwards;
}
.red {
-webkit-animation:draw 9s linear;
-webkit-animation-fill-mode:forwards;
}
.blue {
-webkit-animation:draw 8s ease-in-out;
-webkit-animation-delay:2s;
-webkit-animation-fill-mode:forwards;
}
<body>
<div id="frame">
<div class="paper">
<div class="scribble blue"></div>
<div class="scribble green"></div>
<div class="scribble red"></div>
</div>
</div>
</body>
</html>
The demonstration and live Code can be viewed at: http://blindmikey.com/dev/animation/scribbles2.php
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我遇到了类似的问题，并在这里找到了答案： Safari : 绝对定位的 DIV 在通过 DOM 更新时不移动
简而言之，对于 Safari 5.1，在 setTimeout() 中自行设置转换样式
I had a similar problem and found my answer here: Safari: Absolutely positioned DIVs not moving when updated via DOM
In short, set the transform style in a setTimeout() by itself for Safari 5.1