Playground

index.html

<div class="cover__container">
  <h1 class="cover__text">Web Designer / Front End Developer</h1>
</div>

styles.css

@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
  background-color: #23211F; }

.cover__container {
  width: 100vw;
  height: 100vh;
  color: #FFF5A0;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center; }
  .cover__container h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 78px;
    -webkit-align-self: center;
    align-self: center;
    letter-spacing: 2px;
    width: 30em;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: type 7s steps(50, end);
    animation: type 7s steps(3, end); }

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

styles.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

//imports
@import "compass";

//@import url(https://fonts.googleapis.com/css?family=Bangers);

//@import url(https://fonts.googleapis.com/css?family=Fredoka+One);
//@import url(https://fonts.googleapis.com/css?family=Tillana:400,700);
//@import url(https://fonts.googleapis.com/css?family=Tillana:600);
@import url(https://fonts.googleapis.com/css?family=Oswald);
//Variables

$primary-color: #333;
$secondary-color: #ddd;
$yellow: #FFF5A0;
$red: #E83132;
$grey: #23211F;
$default-text-shadow-color: $yellow;
$default-text-shadow-blur: 0px;
$default-text-shadow-v-offset: 3px;
//Styles

body {
      background-color: $grey;  
  }
  .cover__container {
    width: 100vw;
    height: 100vh;
    color: $yellow;

    display: flex;
    @include justify-content(center);
    h1 {
    //font-family: 'Bangers', cursive;
    //font-family: 'Fredoka One', cursive;
    //font-family: 'Tillana', cursive;
    //font-family: 'Tillana', cursive;
    font-family: 'Oswald', sans-serif;
    font-size: 78px;
    @include align-self(center);
    letter-spacing: 2px;
    // @include single-text-shadow; 
    // Typing animation
    width: 30em;
    white-space: nowrap;
    overflow: hidden;    
    -webkit-animation: type 7s steps(50, end);
    animation: type 7s steps(3, end);
    } //ends h1
  } //ends .cover__contaniner

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

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

Typing effect with SASS

<div class="cover__container">
  <h1 class="cover__text">Web Designer / Front End Developer</h1>
</div>