<input checked id="Slide" class="slide" name="s" type="radio" />
<label for="Slide"></label>

<input id="Width" class="width" name="s" type="radio" />
<label for="Width"></label>

<!-- Sometime i'll update this so you can edit the values live... -->
<input readonly type="text" value="cubic-bezier(.57,.21,.69,1.25)" />
<input readonly type="text" value="cubic-bezier(.22,.68,0,1.71)" />
<input readonly type="text" value="cubic-bezier(.57,.21,.69,3.25)" />
<input readonly type="text" value="cubic-bezier(.25,.75,.5,1.25)" />
<input readonly type="text" value="cubic-bezier(.51,.92,.24,1.15)" />
<input readonly type="text" value="cubic-bezier(.5,-.75,.7,2)" />
<input readonly type="text" value="cubic-bezier(.42,.97,.52,1.49)" />
<input readonly type="text" value="cubic-bezier(.32,2,.55,.27)" />
<input readonly type="text" value="cubic-bezier(.17,.67,1,1.23)" />
$duration: 2s;
$transition : .3s;
$color: tomato;

* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500);

html, body {
  position: relative;
  height: 100%;  
}

body {
  background:
    whitesmoke
    linear-gradient(90deg, gainsboro 50%, darken(gainsboro, 5%) 50%);
  background-size: 10% 1rem;
  background-position: center center;
  box-shadow: inset 0 4.5rem white;
  
  &:after, &:before {
    display: block;
    content: "";  
    position: fixed;
    top: 0;
    pointer-events: none;
  }
  
  &:before {
    $size : .8rem;
    
    width: 0;
    height: 0;
    left: calc(50% - #{($size/2)});
    border-width: $size/2 $size/2 0;
    border-color: rgba(0,0,0,.5) transparent;
    border-style: solid;
  }

  &:after {  
    $width : 1px;
 
    width: $width;
    height: 1000%;
    background: rgba(0,0,0,.5);
    left: calc(50% - #{$width/2});
  }
}


input[type="radio"]{
  width: 1.5rem;
  height: 1.5rem;
  background: dodgerblue;
  box-shadow: inset 0 0 0 .75rem whitesmoke;
  border-radius: 50%;
  appearance: none;
  vertical-align: middle;
  transition: $transition;
  margin: 1.5rem 0 1.5rem 2rem;
  
  &:focus {
    outline: 0;    
  }
  
  &:checked {
    box-shadow: inset 0 0 0 .375rem whitesmoke;
  }
}

label {
  display: inline-block;
  vertical-align: middle;
  margin: .75rem .125rem;
  cursor: pointer;
  font: 100%/2 "Source Code Pro", monospace;
  text-transform: uppercase;
  opacity: .2;
  transition: opacity $transition;

  &:after { content: attr(for); }
}

input:checked + label {
  opacity: 1;  
}


input[type="text"] {
  display: block;
  transition: opacity $transition;
  width: 50%;
  padding: 1rem 2rem;
  font: 1.5rem/1.5 "Source Code Pro", monospace;
  border: 0;
  background: transparent;
  
  &:focus {
    width: 75%;
    outline: 0;
   font-weight: bold;
  }
}

div {
  transition: opacity $transition;
  pointer-events: none;
  position: relative;
  margin-top: -4.25rem;
  left: 50%;
  height: 4.25rem;
  width: 25%;
  background: yellow;
  z-index: -1;
  transform: translate3d(0,0,0);
}


.slide:checked ~ div {  
  -webkit-animation: slide $duration infinite;
  animation: slide $duration infinite;  
}

.width:checked ~ div {
  left: 35%;
  width: 30%;
  
  -webkit-animation: width $duration infinite;
  animation: width $duration infinite;  
}


.reset input:not(:focus) {
  opacity: .2;
  
  & + div {
    animation-name: reset;
    opacity: .2;
  }
}



@for $item from 1 through 21 {
  div:nth-of-type(#{$item}) {
    background: adjust-hue($color, (($item - 1) * 7%));
  }
}


@keyframes slide {
  10% {
    transform: translate3d(0,0,0);
  }
  55% {
    transform: translate3d(-100%,0,0);  
  }
}

@keyframes width {
  10% {
    transform: scale3d(1,1,1);
  }
  55% {
    transform: scale3d(2,1,1);  
  }
}
$('input[type="text"]').each(function(){
  var val = $(this).attr("value");
  var easing = 'animation-timing-function: ' + val;
  
  $(this).after('<div style="' + easing + '"></div>');
});

$('input[type="text"]').focus(function(){
  $("body").addClass("reset");
}).blur(function(){
  $("body").removeClass("reset");

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js