显示DIV CSS3动画

我想要做的CSS3动画像显示DIV 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下面显示，但我不想在转换时压缩图像。

来源

2016-12-29 vedankita kumbhar

你不想对图像进行压缩？你想让图像滑动而不是缩小？ – Manish

我想这样的想法.. https://jsfiddle.net/ypwuzqfk/1/ –

可以详细说明一点，因为在小提琴中显示只有一个div，在你的情况下，它说你重叠这个div另一个div。所以你只是想隐藏这个图像/ div，并显示它下面的div，也是动画的权利？ – Manish

给你两个图像Image类和动画从左到右，你可以使用动画完整回调。即传递一个函数作为回调函数，当图像完成从右到左的过渡时执行，这将从左到右触发动画，方式与从右到左一样，是一个演示。如果你想延迟从左到右的动画，你可以使用消除。试试这个，如果你需要不同的东西，请让我知道。

jQuery(document).ready(function($){ 
 
$('.splat').animate({width:"0%"},1000,function() { 
 
    $('.splat').animate({width:"100%"},1000) 
 
    }); 
 
});

.container{ 
 

 
    position:relative; 
 
width: 400px; 
 
\t height: 400px; 
 
} 
 
.splat { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background: blue; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.Image{ 
 
    width:100%; 
 
    height:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="splat"> 
 
    <img src="http://www.w3schools.com/css/img_fjords.jpg" class="Image"/> 
 
    </div> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/originals/1e/46/c2/1e46c2683f03cd969f6fb45e8a8083cf.jpg" class="Image" /> 
 
</div>

来源

2016-12-29 06:46:25 Manish

感谢您的帮助，但我想要这个https://jsfiddle.net/ypwuzqfk/4/。我已经完成了使用transform：rotate，这看起来有点奇怪。 –

我不知道这是否符合您的要求，但你只需要您的重叠两个图像（重叠的div或背景图像），并设置动画的前格你可以看到in this jsfiddle。

我设置的背景图像：

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

来源

2016-12-29 07:10:49 Gehtnet

显示DIV CSS3动画

回答

相关问题