Анимация изображений в CSS3

Question

я хочу изменить непрозрачность фонового изображения (оба изображения одинаковы), но изменение должно быть 30 to 45 degree

Кроме того, этот живой front image к background image затем снова backgroung image к front image

Два изображения:

и

Я хочу, чтобы анимация была показана, если будет показано первое изображение, а затем через некоторое время будет показано, но его высота должна быть увеличена с 0 до максимальной высоты изображения. Кроме того, анимация должна быть угол 30 degree

Я использовал код

HTML:

<div class="img_shake">   
     <img id="img_shake" src="img_shake.png" alt="img_shake">  
    </div> 

    <div id="div_img_shake_patchwork"> 
     <img id="img_shake_patchwork" src="img_shake_patchwork.png" alt="img_shake_patchwork"> 
    </div> 
</div> 

CSS:

#main-container{ 
    position: relative; 
    top:0%; 
    left:0%; 
    height: 480px; 
    width: 320px; 
    overflow: hidden;  
    background-size: 100% 100%; 
    background-position: center center; 
    opacity:1; 
} 


#img_shake { 
    position: absolute; 
    right: 27%; 
    opacity: 0; 
    top: 27%; 
    z-index:2; 
} 
@-webkit-keyframes img_shake_anim 
{ 
    from {right:-30%;} 
    to {right:27%;} 
} 

@-webkit-keyframes img_shake_anim_again 
{ 
    from {left:27%} 
    to {left:0%} 
} 
@-webkit-keyframes img_shake_fade_in 
{ 
    0% {opacity:0;} 
    100% {opacity:1;} 
} 


#img_shake_patchwork { 
    width:100%; 
} 


#div_img_shake_patchwork 
{ 
    position:absolute; 
    top:27%; 
    right:27%; 
    overflow : hidden; 
    z-index:2; 
    height:277px; 
    opacity:0; 
} 

@-webkit-keyframes div_img_shake_patchwork_anim 
{ 
    0% {height:0;opacity:1;/*-webkit-transform: rotate(-30deg);*/} 
    100% {height:277px;opacity:1;/*-webkit-transform: rotate(0deg);*/} 
} 

Answer 1

Изменяя стиль может быть сделано:

#img_shake_patchwork { 
    width:148px;/*Width of Image*/ 
    -webkit-transform: rotate(30deg); 
    left: 22%; 
    position: absolute; 
    top: 0%; 
} 

#div_img_shake_patchwork 
{ 
    position:absolute; 
    top:26%; 
    left:6%; 
    overflow : hidden; 
    z-index:2; 
    height:277px;/*Height of Image*/ 
    opacity:0; 
    width:296px;/*Double width of Image*/ 
    -webkit-transform: rotate(-30deg); 
} 

@-webkit-keyframes div_img_shake_patchwork_anim 
{ 
    0% {height:0;opacity:1;left:-16% ;top:30%; } 
    100% {height:277px;opacity:1;left:6%; top:26%; /*-webkit-transform: rotate(0deg);*/} 
} 

Answer 2

background-image не будет делать переходов. Вы должны использовать position: absolute и z-index, чтобы поместить одно изображение поверх другого. Затем вы можете переместить opacity верхнего изображения.