7

尝试通过使用具有相同背景图像 [svg] 的两个居中 div 并为其宽度和背景位置设置动画来制作从中心淡入图像的 css 动画。问题是，在 chrome 上，有一个可怕的抖动问题（也许是从 chrome 循环动画步骤，而不是同时执行它们？）

这是 jsfiddle： http: //jsfiddle.net/evankford/s2uRV/4/，您可以在左侧看到抖动问题（同时具有宽度动画和背景位置动画）。

相关代码（对不起，它所在的网站有一些剩余的东西）

HTML：

    <div class="underheader-wrapper uhw-title">
       <div class="underheader uhleft undertitle">&nbsp;</div>
       <div class="underheader uhright undertitle">&nbsp;</div>
    </div>

和 CSS：

   .undertitle {
-webkit-backface-visibility: hidden;
 -webkit-transform: translateZ(0);
background-image:url(http://cereusbright.com/newsite/presskit/images/underheader.svg);
}

.underheader-wrapper {
position: relative;
margin:  auto;
width:320px;
height:100px;
}

.underheader {
-webkit-backface-visibility: hidden;
position:absolute;
width: 0px;
height:100px;
opacity: 0;
background-size: 320px 60px;
background-repeat: no-repeat;
-moz-animation-delay: 3s; -webkit-animation-delay:3s;
-moz-animation-duration: 3s; -webkit-animation-duration: 3s;
-moz-animation-name: part1; -webkit-animation-name:part1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards}

.uhleft {
background-position: -160px 40px;
right: 160px;
-webkit-backface-visibility: hidden;
-moz-animation-delay: 3s; -webkit-animation-delay:3s;
-moz-animation-duration: 3s; -webkit-animation-duration: 3s;
-moz-animation-name: part2; -webkit-animation-name:part2;
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards}

.uhright {
background-position: -160px 40px;
left: 160px;}

@-webkit-keyframes part1 {
from {
    width: 0px;
    opacity: 0;
}
to {
    width: 160px;
    opacity: 1;
}}

@-webkit-keyframes part2 {
from {
    background-position:-160px 40px;
    width: 0px;

    opacity: 0;
}
to {
    width: 160px;
    background-position: 0px 40px;
    opacity: 1;
}}

@-moz-keyframes part1 {
from {
    width: 0px;
    opacity: 0;
}
to {
    width: 160px;
    opacity: 1;
}}

@-moz-keyframes part2 {
from {
    background-position:-160px 40px;
    width: 0px;
    opacity: 0;
}
to {
    background-position: 0px 40px;
    width: 160px;
    opacity: 1;
}}

我被这种抖动困住了吗？我已经做了一个 JQuery 版本，发现人们说 CSS 更干净/更平滑，但抖动仍然存在。

4

2 回答 2

1

好的，没有找到使用双div来实现这个目标的方法。相反，我做了这样的事情。

<div class="outer">
     <div class="middle">
            <div class"inner">
             &nbsp
            </div>
      </div>
</div>

然后给它们设置样式

.outer {
position: relative;
width:321px;
height:100px;
padding: 15px;
} 

.middle {
text-align: center;
position: absolute;
left: 160px;
margin:auto;
background-image:url(images/underheader.svg);
background-position:center center;
background-size: 320px 70px;
background-repeat: no-repeat;
/*all the animation stuff */
 }

.inner {
position: relative;
display: inline-block;
width: 0px;
height: 100px;
/* all the animation stuff */
 }

然后，我使用 CSS 动画制作中间 div from left:160pxtoleft: 0px和内部 div from width: 0pxtowidth: 320px.动画，尽管它可以通过 jquery 或 CSS 转换轻松完成。

于 2013-11-03T21:05:02.670 回答
0

您在 Chrome 上看到的延迟由 给出-webkit-animation-delay:3s;。将其更改为-webkit-animation-delay:0s;，您会看到它会立即开始淡入。

于 2013-11-01T23:22:38.273 回答