LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Heading it's awesome!

CSS
.main {
  position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-heading {
  color: #777;
  text-transform: uppercase;
}

.main-heading-primary {
  display: block;
  font-size: 5.0rem;
  font-weight: 400;
  letter-spacing: 35px;
  animation: moveInLeft 1s ease-out;
}

.main-heading-secondary {
  font-family: sans-serif;
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 31px;
  color: hotpink;
  animation: moveInRight 1s ease-out;
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  
  80% {
    transform: translateX(10px);
  }
  
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  
  80% {
    transform: translateX(-10px);
  }
  
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

Description

In this pen I use the animation property to make the heading on the page animated. It show one heading fading in from the right and the other from the left.
Term
Sat, 04/14/2018 - 20:46

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv