We would like to know how to slide in left and right width exceeds.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#animationentry {<!-- ww w . j ava 2 s . c o m-->
width: 100%;
height: 200px;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
#cww_bg {
display: block;
float: left;
width: 50%;
background: red;
}
#myDiv {
display: block;
float: left;
width: 50%;
background: yellow;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes slideInLeft {
0% {opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100%{-webkit-transform:translateX(0);
transform:translateX(0);
}
}
@keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100%{
-webkit-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100%{
-webkit-transform:translateX(0);
transform:translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100%{-webkit-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
</style>
</head>
<body>
<div id="animationentry">
<div id="myDiv" class="animated slideInLeft">
<img src="http://www.java2s.com/style/download.png">
</div>
<div id="cww_bg" class="animated slideInRight">
<img src="http://www.java2s.com/style/download.png">
</div>
</div>
</body>
</html>
The code above is rendered as follows: