Question

我有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

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

Answer 1

如果这总是序列，你可能要考虑将整个事物放到一个动画中，否则你将不得不使用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转换而不是left和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%; }
}

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

Answer 2

您的HTML就是这样：

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

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

添加

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

使img适应容器div的尺寸

在CSS3中自动调整图像效果

2 个答案: