显示div CSS3动画

Question

我想做像

这样的CSS3动画

@keyframes ImageAnimation {
    0% 
    {
        width:100%;
        opacity:1;
    }
   100% 
    {
        width:0;
        opacity:0;
    }
}

.ImageAnimation {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    right:0;
    overflow:hidden;
    animation: ImageAnimation 2s forwards;
}
.ImageAnimation img{
    width:100%;
    height:100%;
}

<div class="ImageAnimation">
 <img src="http://www.w3schools.com/css/img_fjords.jpg" />
</div>

我将这个div重叠在另一个包含相同图像并具有一些更改的div上。我想用CSS3动画揭示下面的div，但我不想在转换时压缩图像。

Answer 1

我不知道这是否符合您的要求，但您只需重叠两个图像（重叠的div或背景图像），并在前面div上设置动画，如您所见in this jsfiddle。

我将背景图像设置为：

.bg{
height: 400px;
background-image: url(images/the_image.jpg);
background-size: contain;
background-repeat: no-repeat;
}