<h2 class="heading"> Animating Text</h2>
<div class="box">
<p> Here we show you the basics of animation using CSS. We can learn a lot using keyframes transforms transitions.<br>
  Really Nice effects.
</p>
  </p>
.heading{
  font-family: Arial;
  color:cornflowerblue;
  text-transform:uppercase;
  animation: grower 3s 3;
}

.box{
  background-color: paleturquoise;
  width: 350px;
  height:auto;
  border-radius: 5px;
  animation-name: increase;
  animation-iteration-count: 3;
  animation-duration: 7s;
   
}
.box p{
  font-family: arial;
  padding: 5px;
}

@keyframes increase{
  from{
    margin-left: 90%;
    width: 300%;
    font-family: Arial;
    font-size: 250%;
    transform: skew(350deg,270deg);
  }
  to{
    margin-left:0%;
    background-color: cornflowerblue;
    font-family:Arial;
    width: 350px;
    font-size: auto;
  }
}

@keyframes grower{
  from{
    font-size:15%; 
  }
  to{
    font-size: 120%;
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.