Animation How to - Slide in left and right width exceeds








Question

We would like to know how to slide in left and right width exceeds.

Answer


<!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: