1

我有一个 200 x 200 的图像。我希望我的图像有 2 种效果： 1. 图像缓慢浮动到<div>(320x240px) 的中心 2. 之后，它会自动调整大小 50%（即 100x100px）和浮动到左下角<div>

这是我的代码：

#ad-1 #alunaimg{
width: 200px;
height: 200px;
margin: 20px 60px;
position: absolute;
-webkit-animation: imgmove 3s linear 0s 1;
-webkit-animation: imgresize 2s linear 0s 1;
}

@-webkit-keyframes imgmove{
0%   {left: -200px; top: 0px;}
100% {left: 0px; top: 0px;}
}

@-webkit-keyframes imgresize{
0%  {left: 0px; top: 0px;}
100% {width: 50%; height: 50%; top: 130px; left: 40px;}

}

第一个效果完美，但第二个效果不起作用。

这是我的代码http://jsfiddle.net/DreamBig/pgQhJ

如果有人可以提供帮助，我将不胜感激。非常感谢！

4

2 回答 2

0

如果这始终是序列，您可能需要考虑将整个内容放入单个动画中，否则您将不得不使用 javascript 并分配一个新类来触发第二个动画。

@-webkit-keyframes imgmove{
    0%   {left: -200px; top: 0px;}
    50% {left: 0px; top: 0px;}
    100% {width: 50%; height: 50%; top: 130px; left: 40px;}
}

这是完全未经测试的，但你不能像那样添加多个动画。如果您要将其分开，我认为您可以尝试：

-webkit-animation: imgmove 3s linear 0s 1, imgresize 2s linear 3s 1;

注意3s第二个动画的延迟，这将使它在第一个动画之后直接发生。

顺便说一句，我可能会考虑使用 css 转换而不是leftand top。请参阅http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/。

这是更接近：http: //jsfiddle.net/pgQhJ/2/

#ad-1 #alunaimg{
    width: 200px;
    height: 200px;
    margin: 20px 60px;
    position: absolute;
    -webkit-animation: imgmove 3s linear 0s;
    top: 20px; left: -40px; width: 50%; height: 50%;
}
#ad-1 #alunaimg img {
    max-width: 100%;
}

@-webkit-keyframes imgmove{
    0%   {left: -200px; top: 0px; width: 100%; height: 100%;}
    50% {left: 0px; top: 0px; width: 100%; height: 100%;}
    100% {top: 20px; left: -40px; width: 50%; height: 50%; }
}

我将#alunaimgdiv 设置为与动画的 100% 相同，以便最后它保持原位，这也意味着添加width和height到动画中的其他关键帧。

于 2013-07-11T03:34:43.927 回答
0

你的 HTML 是这样的：

<div id="ad-1">
    <div id="alunaimg">
        <img></img>
    </div>
</div>

您正在更改 alunaimg 尺寸，但不是内部 img 尺寸。

添加

#alunaimg img {
    width: 100%;
    height: 100%; 
}

使img适应容器div的尺寸

于 2013-07-12T17:51:49.810 回答