CODEWITHSUNDEEP
htmlcss
Rywi
Rywi

Reputation: 143

CSS3 Image sliding starting with invisible image

I have this code for my image to nicely slide in to my website from the right side.

img.move
{
position:relative
-webkit-animation-name: image;
-webkit-animation-iteration-count: once;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 1s;
}
@-webkit-keyframes image {
0% {
right:-708px;
}
100% {
right: 0;
}
}

So right now in my webpage, this image starts in the right side background (it's gray) and ends up in its correct position in the container (it's white).
What I want to do (but have no idea how to) is to make the image appear from thin air. What I mean is that it would still have its sliding animation, but it would be invisible on the gray part, and only appear out of white part, like the corner of container was printing it. So I wonder, is there any way I could do it?

Thanks for help

EDIT: JSFIDDLE http://jsfiddle.net/EpCM7/

Upvotes: 1

Views: 76

Answers (2)

Josh Powell
Josh Powell

Reputation: 6297

Okay what I am doing is making the image a child of the div.parent.

Then I apply overflow: hidden; to the parent. When the image slides in from outside of it's parent it will not be visible due to the style.

The html:

<div class="parent">
    <img class="move" src="http://vabankbroker.com/templates/vabankbroker/images/2.jpg" style="margin-right: -3px;" />
</div>

The css:

div.parent {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

The Fiddle: JSFIDDLE, remove /show in url to view code

Better Practice

@-webkit-keyframes image {
    0% {
        left: 100%; /* removes the use of negative values */
    }
    100% {
        left: 0;
    }
}

Upvotes: 1

Mihnea Belcin
Mihnea Belcin

Reputation: 554

try adding opacity to the animation . might be the effect your looking for 

@-webkit-keyframes image {
  0% {
    opacity: 0;
    right:-708px;
  }
  100% {
    opacity: 1;
    right: 0;
  }
}

Upvotes: 0

Related Questions