cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body>

  <div class="center">

    <h1 class="mimic"> 
        mimic.css
    </h1>

    <div class="description">
      everyone else is doing it.
    </div>

    <div class="controls">

      <form>
        <div class="select">
          <select>
                <option value="boomerang">boomerang</option>       
                <option value="swivelChair">swivel chair</option>
                <option value="gettinInYoFace">gettin' in yo face</option>
                <option value="airplanePropeller">airplane propeller</option>
                <option value="pulsate">pulsate</option>
                <option value="candleInTheWind">candle in the wind</option>
                <option value="highlighter">highlighter</option>
                <option value="lawnMower">lawn mower</option>
                <option value="iWanChuBack">i wan-chu back</option>               
                <option value="nope">nope</option>
                <option value="heartBeat">heartbeat</option>
                <option value="sleepyEyes">sleepy eyes</option>
                <option value="plummit">plummit</option>
                <option value="dropItLikeItsHot">drop it like it's hot</option>
                <option value="gettinLifted">gettin' lifted</option>
                <option value="glaucoma">glaucoma</option>
                <option value="chameleon">chameleon</option>
                <option value="backdrop">backdrop</option>
                <option value="tearDrop">tear drop *n e w*</option>
                <option value="acidTrip">acid trip *n e w*</option>
                <option value="spinner">spinner *in progress*</option>
                <option value="pageTurn">page turn *in progress*</option>
              </select>
        </div>

        <button>mimic</button>
      </form>

    </div>
    <hr />
    <div class="links">
      by <a href="//erictreacy.me">voneags</a> <span class="divider">&ofcir; <a href="//github.com/erictreacy/mimic.css" >github</a></span>


      
      
      <span class="divider">&ofcir; <a href="https://twitter.com/share"  data-show-count="false">tweet</a>
      <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></span>


    </div>
  </div>

  <!-- JS -->
  <script src='./js/index.js'></script>

  <!-- Tweet Button -->
  <script>
    !(function(d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0],
        p = /^http:/.test(d.location) ? "http" : "https";
      if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + "://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
      }
    })(document, "script", "twitter-wjs");
  </script>
</body>
            
          
!
            
              /*
 * Mimic.css Animations
 * This is an on-going project...
 * All rough code is done here and all commits
 * are found @ http://erictreacy.me OR 
 * @ https://github.com/erictreacy/mimic.css
 * Please Tweet if you like -Or- don't like ; ) 
 * TO DO: 
 *  1) Make it cross browser -  I'm too lazy to type that much right now.
 *  2) npm
 */

.animated {
  animation-fill-mode: both;
}

@keyframes gettinInYoFace {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 1;
    transform: scale(100);
  }
}

.gettinInYoFace {
  animation-timing-function: ease-in-out;
  animation-name: gettinInYoFace;
  animation-duration: 3s;
}

@keyframes airplanePropeller {
  from {
    transform-origin: center;
    transform: rotate(-20000deg);
    opacity: 1;
  }

  to {
    transform-origin: center;
    transform: none;
    opacity: 1;
  }
}

.airplanePropeller {
  animation-name: airplanePropeller;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes pulsate {
  from {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  to {
  }
}

.pulsate {
  animation-name: pulsate;
  animation-duration: 5s;
}

@keyframes boomerang {
  10% {
    z-index: 1;
    transform: rotate(-20deg);
  }
  35% {
    z-index: 1;
    transform: translate(220%, -55%) scale(0.5) rotate(-200deg);
  }
  74% {
    z-index: -1;
  }
  75% {
    transform: translate(-200%, 55%) scale(0.9) rotate(-860deg);
  }
  80% {
    z-index: 1;
  }
  90% {
    z-index: 1;
    transform: translate(0%, 0%) rotate(-10deg);
  }
}

.boomerang {
  animation-name: boomerang;
  animation-duration: 3s;
}

@keyframes iWanChuBack {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 1;
    transform: scale3d(0.1, 0.1, 0.1);
  }

  50% {
    opacity: 1;
    transform: scale3d(0.1, 0.1, 0.1);
  }

  to {
    opacity: 1;
  }
}

.iWanChuBack {
  animation-name: iWanChuBack;
  animation-duration: 3s;
}

@keyframes lawnMower {
  0% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(12225deg);
  }
}

.lawnMower {
  animation-duration: 5s;
  animation-name: lawnMower;
  animation-timing-function: ease-in-out;
}

@keyframes swivelChair {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 1;
  }

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.swivelChair {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: swivelChair;
  animation-duration: 2s;
}

.candleInTheWind {
  opacity: 0;
  animation-name: candleInTheWind;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
}

@keyframes candleInTheWind {
  0% {
    opacity: 0;
  }

  12.5% {
    opacity: 0.25;
    transform: skewX(-10deg);
  }

  25% {
    opacity: 0;
  }

  37.5% {
    opacity: 0;
    transform: skewX(-10deg);
  }

  50% {
    opacity: 0.75;
  }

  62.5% {
    opacity: 0;
  }

  75% {
    opacity: 1;
    transform: skewX(-5deg);
  }

  87.5% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.highlighter {
  animation-name: highlighter;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.highlight-text {
  animation-name: highlighter-text;
  animation-duration: 2s;
}

@keyframes highlighter {
  0% {
    background-color: rgba(0, 255, 255, 0);
    background-color: rgba(0, 255, 255, 128);
  }

  100% {
    background-color: rgba(0, 255, 255, 0);
    background-color: rgba(127, 219, 255, 0);
  }
}

@keyframes highlighter-text {
  0% {
    color: yellow;
    color: #0074d9;
  }

  100% {
    color: inherit;
  }
}

@keyframes nope {
  0% {
    transform: translateX(0);
  }

  6.5% {
    transform: translateX(-7px) rotateY(-10deg);
  }

  18.5% {
    transform: translateX(6px) rotateY(8deg);
  }

  31.5% {
    transform: translateX(-4px) rotateY(-6deg);
  }

  43.5% {
    transform: translateX(3px) rotateY(4deg);
  }

  50% {
    transform: translateX(0);
  }
}

.nope {
  animation-name: nope;

  animation-duration: 2s;
  animation-timing-function: ease-in-out;
}

@keyframes heartBeat {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  to {
    transform: scale(1.1);
  }
}

.heartBeat {
  animation-name: heartBeat;
  animation: heartBeat 0.66s alternate;
  animation-iteration-count: 8;
}

@keyframes sleepyEyes {
  0% {
    transform: perspective(400px);
  }
  5% {
    transform: perspective(400px) rotateX(-20deg);
    opacity: 0.5;
  }
  15% {
    transform: perspective(400px);
    opacity: 1;
  }
  35% {
    transform: perspective(400px) rotateX(-20deg);
    opacity: 0.75;
  }

  45% {
    transform: perspective(400px) rotateX(-2deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotateX(-90deg);
    opacity: 0;
  }
}

.sleepyEyes {
  animation-name: sleepyEyes;
  animation-duration: 5s;
  backface-visibility: visible !important;
}

@keyframes plummit {
  from {
    opacity: 1;
    transform: scale(10);
  }

  to {
    opacity: 1;
    transform: scale(0);
  }
}

.plummit {
  animation-timing-function: ease-in-out;
  animation-name: plummit;
  animation-duration: 5s;
}

@keyframes dropItLikeItsHot {
  from {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 1;
    transform: translate3d(0, 1000px, 0);
  }
}

.dropItLikeItsHot {
  animation-name: dropItLikeItsHot;
  animation-duration: 0.5s;
}

@keyframes gettinLifted {
  from {
    opacity: 1;
    transform: translate3d(0, 500px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.gettinLifted {
  animation-name: gettinLifted;
  animation-duration: 3s;
  animation-timing-function: ease-in;
}

@keyframes glaucoma {
  from {
    opacity: 1;
    text-shadow: 0 0 75px black;
    color: transparent;
  }

  to {
    opacity: 1;
    text-shadow: 0;
    color: transparent;
  }
}

.glaucoma {
  animation-name: glaucoma;
  animation-duration: 5s;
  animation-timing-function: ease-out;
}

@keyframes chameleon {
  0% {
    color: red;
  }

  14.2999% {
    color: orange;
  }

  28.5999% {
    color: yellow;
  }

  42.8998% {
    color: green;
  }

  57.1996% {
    color: blue;
  }

  71.4995% {
    color: indigo;
  }

  85.7994% {
    color: violet;
  }
  100% {
    color: red;
  }
}

.chameleon {
  animation-name: chameleon;
  animation-duration: 5s;
}

@keyframes backdrop {
  0% {
    background-color: red;
    color: white;
  }

  14.2999% {
    background-color: orange;
    color: black;
  }

  28.5999% {
    background-color: yellow;
    color: black;
  }

  42.8998% {
    background-color: green;
    color: white;
  }

  57.1996% {
    background-color: blue;
    color: white;
  }

  71.4995% {
    background-color: indigo;
    color: white;
  }

  85.7994% {
    background-color: violet;
    color: white;
  }
  100% {
    background-color: red;
    color: white;
  }
}

.backdrop {
  animation-name: backdrop;
  animation-duration: 10s;
}

/* Line-up for next github commit. */

@keyframes tearDrop {
  0% {
    top: 5px;
    opacity: 0;
  }

  30% {
    top: 10px;
    opacity: 1;
  }

  100% {
    top: 25px;
    opacity: 0;
  }
}

.tearDrop {
  animation-name: tearDrop;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 5;
  animation-play-state: running;
}



@keyframes acidTrip {
  from {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
  to {
    filter: hue-rotate(-360deg);
  }
}

.acidTrip {
  animation-name: acidTrip;
  color: red;
  background-image: linear-gradient(50deg, purple, orange);
  background-clip: text;
  text-fill-color: transparent;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: 3;
}


@keyframes spinner {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation-name: spinner;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
}


 /* not really sure what I want to do with this one... */

@keyframes pageTurn {
  0% {
    transform: translate3d(0,0,0) scale(1, 1) translate(-50%, -50%);
  }
  50% {   
    transform: translate3d(0,0,0) scale(-1 ,1) translate(-50%, -50%);
  }
  100% {
    transform: translate3d(0,0,0) scale(1, 1) translate(-50%, -50%);
  }
}

.pageTurn {  
  animation-name: pageTurn; 
  animation-duration: 1s;
  animation-iteration-count: 5; 
  animation-timing-function: linear;  
}
            
          
!
            
              (function() {
  var header = document.querySelector("h1");
  var selectBox = document.querySelector("select");
  var runButton = document.querySelector("button");

  // On SelectBox Change
  selectBox.addEventListener("change", function() {
    triggerAnimation();
  });

  // On "run animation" button clicked
  runButton.addEventListener("click", function(e) {
    e.preventDefault();
    triggerAnimation();
  });

  function triggerAnimation() {
    var animation = selectBox.value;
    header.className = "";
    setTimeout(function() {
      header.className = "mimic " + animation;
    }, 10);
  }
})();

            
          
!
999px
Loading ..................

Console