animation

by Van Hai Le

HTML

<div class="container">
  <h1 class='animation1 animation-from-right'>Hello World</h1>
  <p class='animation animation-from-left'>Hello</p>
  <a class='animation1 animation-from-bottom' href="#">Learn More</a>
</div>

CSS

.container  {
  position: relative;
  left: 100px;
}

a {
  padding: 16px;
  background: skyblue;
}

.animation {
  position: relative;
  /* animation-name: animatebottom; */
  animation-duration: 1s;
}

.animation1 {
   position: relative;
  /* animation-name: animatebottom; */
  animation-duration: 1.5s;
}

.animation-from-right {
  animation-name: fromright;
}

@keyframes fromright {
  from{ left: 100px; opacity:0 } 
  to{ left: 0 ; opacity:1 }
}

.animation-from-bottom {
  animation-name: frombottom;
}

@keyframes frombottom {
  from{ bottom: -500px; opacity:0 } 
  to{ bottom: 0 ; opacity:1 }
}

.animation-from-left {
  animation-name: fromleft;
}

@keyframes fromleft {
  from{ left: -200px; opacity:0 } 
  to{ left: 0 ; opacity:1 }
}