顯示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動畫

回答

相關問題