CODEWITHSUNDEEP
htmlcss
Rohan Kumar
Rohan Kumar

Reputation: 40639

Animation of images in css3

I want to change opacity of a background image (both the images are same), but the changing should be of 30 to 45 degree

Also this animate front image to background image then again the backgroung image to front image

Two images are:

enter image description here and enter image description here

I want the animation like if the first image is shown then after some time second will be shown but its height should be grown from 0 to max height of the image. Also the animation should be of angle 30 degree

I used the code

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);*/} 
}

Upvotes: 0

Views: 193

Answers (2)

Rohan Kumar
Rohan Kumar

Reputation: 40639

By changing the style it can be done:

#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);*/} 
}

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

background-image will not do transitions. You need to use position: absolute and z-index to put one image on top of the other. You can then transition the opacity of the top image.

Upvotes: 1

Related Questions