Living the CSS-only life

index.html

<span class="part part--left">
	<span class="letter">L</span>	
</span>
<span class="part part--center">
	<span class="letter letter--i">I</span>
	<span class="letter letter--o">O</span>
</span>
<span class="part part--right">
	<span class="letter">V</span>
	<span class="letter">E</span>
</span>

living-the-css-only-life.markdown

Living the CSS-only life

A Pen by Lisi on CodePen.

License.

style.scss

$bezier: cubic-bezier(.5,.05,.46,1.04);
$anim-duration: 1.8s;
$move-duration: 0.9s;
$c-1: #F6C667;
$c-2: #FC4442;
$c-shadow: rgba(255 ,255, 255, 1);

html {
  height: 100%;
  display: flex;
}

body {
  position: relative;
  margin: auto;
  background: #3E333F;
	color: $c-1;
  font-family: 'Open Sans', sans-serif;
  font-size: calc(50px + (150 - 50) * ((100vw - 300px) / (1600 - 300)));
	animation: font_color $anim-duration $bezier 0s forwards alternate;
}

.part {
  position: relative;
  display: inline-block;
  line-height: 1;
	letter-spacing: -0.06em;

  &--center {
    width: 0.35em;
    height: 0.89em;
  }
	
	&--left {
		animation: move_left $move-duration $bezier $move-duration forwards alternate;
	}
	
	&--right {
		animation: move_right $move-duration $bezier $move-duration forwards alternate;
	}
}

.letter {
  transform-origin: 50% 50%;
	backface-visibility: visible;
	text-shadow: -2px 1px $c-shadow, 
		-3px 2px $c-shadow, 
		-4px 3px $c-shadow,            
		-5px 4px $c-shadow, 
		-6px 5px $c-shadow;
	
  &--i, &--o {
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  &--i {
    animation: letter_i $anim-duration $bezier 0s forwards alternate;
  }
  
  &--o {
		transform-origin: 50% 53%;
    animation: letter_o $anim-duration $bezier 0s forwards alternate;
		text-shadow: -2px -1px $c-shadow, 
		-3px -2px $c-shadow, 
		-4px -3px $c-shadow,            
		-5px -4px $c-shadow, 
		-6px -5px $c-shadow;
  }
}

@keyframes letter_i {
  0% {
    transform: translateX(-50%) rotateY(0deg) rotateX(0deg) ;
  }
  48% {
    transform: translateX(-50%) rotateY(90deg) rotateX(90deg) ;
  }
  100% {
    transform: translateX(-50%) rotateY(90deg) rotateX(180deg) ;
  }
}

@keyframes letter_o {
  0% {
    transform: translateX(-50%) rotateY(90deg) rotateX(90deg) ;
  }
  50% {
    transform: translateX(-50%) rotateY(45deg) rotateX(90deg) ;
  }
  100% {
    transform: translateX(-50%) rotateY(0deg) rotateX(180deg) ;
  }
}


@keyframes move_left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-0.12em);
  }
}

@keyframes move_right {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(0.12em);
  }
}

@keyframes font_color {
  0% {
    color: $c-1;
  }
	50% {
		color: $c-1;
	}
  100% {
    color: $c-2;
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet" />