Simple typing Effect using css

This is one of the simple css trick and this is used to display flash messages in websites. This typing effects will attract the customers to display the important messages in websites.

Styles:

body{
  background: #F3F7FF;
  padding-top: 10px;
}

p{
  color: #3D3F46;
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 10s steps(60, end);
}

p:nth-child(2){
  animation: type2 8s steps(60, end);
}

p a{
  color: #3D3F46;
  text-decoration: none;
}

span{
  animation: blink 1s infinite;
}

@keyframes type{
  from { width: 0; }
}

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; }
}

@keyframes blink{
  to{opacity: .0;}
}

Html 

<p>Hi Welcome to Sanwebcorner.com, This is the sample text for typing effect using css <span>|</span></p>