Slide-in Animation (from right)

I used it for portfolio (Showcase) 04/2017

by Sebastian

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations -->
<body>
<div>The Caterpillar and Alice looked at each other for some time in </div>

</body>

CSS

body {
  overflow: hidden;
}

div {
  animation-duration: 1s;
  animation-name: slidein;
  height: 200px;
  width: 100%;
  background: darkred;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}