How To Create Image wipe Effect With CSS3 Webkit Animation

Hi Friends…

In this article we learn how to create a Image wipe effect with CSS. CSS transition and animations provide a way for web developers to describe various kind of animation of CSS properties.
you can use this code in your project copy this code and paste it.

Your Code is as under (html , css)

<!Doctype Html>

<head>
<meta charset=”utf-8″>
<title>C# jadu Image Wipe</title>
<style>
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -1200px -1200px;
}
}
#rollover {
width: 330px;
height: 310px;
position: relative;
border: 8px solid #eee;
            margin-left: 50px;
            margin-top: 50px;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
#rollover div {
position: absolute;
top: 0;
left: 0;
}
#rollover div:nth-child(2) {
-webkit-transition: -webkit-mask-position 1s ease;
-webkit-mask-size: 600px 600px;
-webkit-mask-image: -webkit-gradient(linear, left top, right top,
color-stop(0.00,  rgba(0,0,0,1)),
color-stop(0.35,  rgba(0,0,0,1)),
color-stop(0.50,  rgba(0,0,0,0)),
color-stop(0.75,  rgba(0,0,0,0)),
color-stop(1.00,  rgba(0,0,0,0)));
}
#rollover div:nth-child(2):hover {
-webkit-mask-position: -300px -300px;
}
</style>
</head>
<body>
<div id=”page-wrap”>
<div id=”rollover”>
<div><img src=”http://4.bp.blogspot.com/-rWU2czr6S0Q/VivJ_UMx7sI/AAAAAAAAAhg/AeOXq3s7TjM/s1600-r/finalc%2523logoPNGupdated.png” alt=”Smile”></div>
<div><img src=”http://4.bp.blogspot.com/-XTbSfbMmLc4/VipM4r19QQI/AAAAAAAAAhI/S1WtmPRFQWE/s320/3D%2BCube_C%2523%2Bjadu.jpg” alt=”Sleep”></div>
</div>
</div>
</body>
</html>