<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
  <meta name="description" content="Animate things using Web Components and Web Animations API" />
  
  <!--  Essential META Tags -->
  <meta property="og:site_name" content="Proyecto 26">
  <meta property="og:title" content="A WebComponent to use Web Animations API in a declarative way! 💅" />
  <meta property="og:url" content="https://proyecto26.github.io/animatable-component" />
  <meta property="og:description" content="Animate things using Web Components and Web Animations API" />
  <meta property="og:image" content="https://raw.githubusercontent.com/proyecto26/animatable-component/master/img/animatable.png" />

  <!--  Non-Essential, But Recommended -->
  <meta name="twitter:title" content="A WebComponent to use Web Animations API in a declarative way! 💅">
  <meta name="twitter:description" content="Animate things using Web Components and Web Animations API">
  <meta name="twitter:card" value="Animate things using Web Components and Web Animations API">
  <meta name="twitter:site" content="@proyecto26">
  <meta name="twitter:creator" content="@jdnichollsc">

  <title>Animatable Component</title>

  <link href="//fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700" rel="stylesheet" type="text/css">
  
  <script type="module" src="https://cdn.jsdelivr.net/npm/@proyecto26/animatable-component@1.1.10/dist/animatable-component/animatable-component.esm.js"></script>
</head>
<body>
  <section>
    <header>
      <animatable-component
        id="animatable"
        autoplay
        easing="ease-in-out"
        duration="800"
      >
        <h1>
          <span>&#60;</span>animatable <span> &#8725; &#62;</span>
        </h1>
        <h3>
          Animatable components with
          <animatable-component autoplay delay="1800" duration="800" animation="flash" easing="ease-in-out">
            <a target="_blank" href="https://developer.mozilla.org/docs/Web/API/Web_Animations_API">Web Animations API.</a>
          </animatable-component>
        </h2>
      </animatable-component>
    </header>
    <animatable-component autoplay animation="bounce" easing="ease-in" delay="500" duration="800">
      <main>
        <select>
          <optgroup label="Attention Seekers">
            <option value="bounce">bounce</option>
            <option value="flash">flash</option>
            <option value="pulse">pulse</option>
            <option value="rubberBand">rubberBand</option>
            <option value="shake">shake</option>
            <option value="swing">swing</option>
            <option value="tada">tada</option>
            <option value="wobble">wobble</option>
            <option value="jello">jello</option>
            <option value="heartBeat">heartBeat</option>
          </optgroup>
    
          <optgroup label="Bouncing Entrances">
            <option value="bounceIn">bounceIn</option>
            <option value="bounceInDown">bounceInDown</option>
            <option value="bounceInLeft">bounceInLeft</option>
            <option value="bounceInRight">bounceInRight</option>
            <option value="bounceInUp">bounceInUp</option>
          </optgroup>
          
          <optgroup label="Bouncing Exits">
            <option value="bounceOut">bounceOut</option>
            <option value="bounceOutDown">bounceOutDown</option>
            <option value="bounceOutLeft">bounceOutLeft</option>
            <option value="bounceOutRight">bounceOutRight</option>
            <option value="bounceOutUp">bounceOutUp</option>
          </optgroup>
           
          <optgroup label="Fading Entrances">
            <option value="fadeIn">fadeIn</option>
            <option value="fadeInDown">fadeInDown</option>
            <option value="fadeInDownBig">fadeInDownBig</option>
            <option value="fadeInLeft">fadeInLeft</option>
            <option value="fadeInLeftBig">fadeInLeftBig</option>
            <option value="fadeInRight">fadeInRight</option>
            <option value="fadeInRightBig">fadeInRightBig</option>
            <option value="fadeInUp">fadeInUp</option>
            <option value="fadeInUpBig">fadeInUpBig</option>
          </optgroup>
          
          <optgroup label="Fading Exits">
            <option value="fadeOut">fadeOut</option>
            <option value="fadeOutDown">fadeOutDown</option>
            <option value="fadeOutDownBig">fadeOutDownBig</option>
            <option value="fadeOutLeft">fadeOutLeft</option>
            <option value="fadeOutLeftBig">fadeOutLeftBig</option>
            <option value="fadeOutRight">fadeOutRight</option>
            <option value="fadeOutRightBig">fadeOutRightBig</option>
            <option value="fadeOutUp">fadeOutUp</option>
            <option value="fadeOutUpBig">fadeOutUpBig</option>
          </optgroup>
          
          <optgroup label="Flippers">
            <option value="flip">flip</option>
            <option value="flipInX">flipInX</option>
            <option value="flipInY">flipInY</option>
            <option value="flipOutX">flipOutX</option>
            <option value="flipOutY">flipOutY</option>
          </optgroup>
          
          <optgroup label="Lightspeed">
            <option value="lightSpeedIn">lightSpeedIn</option>
            <option value="lightSpeedOut">lightSpeedOut</option>
          </optgroup>

          <optgroup label="Rotating Entrances">
            <option value="rotateIn">rotateIn</option>
            <option value="rotateInClockwise">rotateInClockwise</option>
            <option value="rotateInDownLeft">rotateInDownLeft</option>
            <option value="rotateInDownRight">rotateInDownRight</option>
            <option value="rotateInUpLeft">rotateInUpLeft</option>
            <option value="rotateInUpRight">rotateInUpRight</option>
          </optgroup>
          
          <optgroup label="Rotating Exits">
            <option value="rotateOut">rotateOut</option>
            <option value="rotateOutClockwise">rotateOutClockwise</option>
            <option value="rotateOutDownLeft">rotateOutDownLeft</option>
            <option value="rotateOutDownRight">rotateOutDownRight</option>
            <option value="rotateOutUpLeft">rotateOutUpLeft</option>
            <option value="rotateOutUpRight">rotateOutUpRight</option>
          </optgroup>

          
          <optgroup label="Sliding Entrances">
            <option value="slideInUp">slideInUp</option>
            <option value="slideInDown">slideInDown</option>
            <option value="slideInLeft">slideInLeft</option>
            <option value="slideInRight">slideInRight</option>
          </optgroup>

          <optgroup label="Sliding Exits">
            <option value="slideOutUp">slideOutUp</option>
            <option value="slideOutDown">slideOutDown</option>
            <option value="slideOutLeft">slideOutLeft</option>
            <option value="slideOutRight">slideOutRight</option>
          </optgroup>
            
          <optgroup label="Zoom Entrances">
            <option value="zoomIn">zoomIn</option>
            <option value="zoomInDown">zoomInDown</option>
            <option value="zoomInLeft">zoomInLeft</option>
            <option value="zoomInRight">zoomInRight</option>
            <option value="zoomInUp">zoomInUp</option>
          </optgroup>
          
          <optgroup label="Zoom Exits">
            <option value="zoomOut">zoomOut</option>
            <option value="zoomOutDown">zoomOutDown</option>
            <option value="zoomOutLeft">zoomOutLeft</option>
            <option value="zoomOutRight">zoomOutRight</option>
            <option value="zoomOutUp">zoomOutUp</option>
          </optgroup>
          
          <optgroup label="Specials">
            <option value="hinge">hinge</option>
            <option value="jackInTheBox">jackInTheBox</option>
            <option value="rollIn">rollIn</option>
            <option value="rollOut">rollOut</option>
          </optgroup>

          <optgroup label="Scale Up">
            <option value="scale-up-center">scale-up-center</option>
            <option value="scale-up-top">scale-up-top</option>
            <option value="scale-up-tr">scale-up-tr</option>
            <option value="scale-up-right">scale-up-right</option>
            <option value="scale-up-br">scale-up-br</option>
            <option value="scale-up-bottom">scale-up-bottom</option>
            <option value="scale-up-bl">scale-up-bl</option>
            <option value="scale-up-left">scale-up-left</option>
            <option value="scale-up-tl">scale-up-tl</option>
            <option value="scale-up-hor-center">scale-up-hor-center</option>
            <option value="scale-up-hor-left">scale-up-hor-left</option>
            <option value="scale-up-hor-right">scale-up-hor-right</option>
            <option value="scale-up-ver-center">scale-up-ver-center</option>
            <option value="scale-up-ver-top">scale-up-ver-top</option>
            <option value="scale-up-ver-bottom">scale-up-ver-bottom</option>
          </optgroup>

          <optgroup label="Scale Down">
            <option value="scale-down-center">scale-down-center</option>
            <option value="scale-down-top">scale-down-top</option>
            <option value="scale-down-tr">scale-down-tr</option>
            <option value="scale-down-right">scale-down-right</option>
            <option value="scale-down-br">scale-down-br</option>
            <option value="scale-down-bottom">scale-down-bottom</option>
            <option value="scale-down-bl">scale-down-bl</option>
            <option value="scale-down-left">scale-down-left</option>
            <option value="scale-down-tl">scale-down-tl</option>
            <option value="scale-down-hor-center">scale-down-hor-center</option>
            <option value="scale-down-hor-left">scale-down-hor-left</option>
            <option value="scale-down-hor-right">scale-down-hor-right</option>
            <option value="scale-down-ver-center">scale-down-ver-center</option>
            <option value="scale-down-ver-top">scale-down-ver-top</option>
            <option value="scale-down-ver-bottom">scale-down-ver-bottom</option>
          </optgroup>

          <optgroup label="Rotate">
            <option value="rotate-center">rotate-center</option>
            <option value="rotate-top">rotate-top</option>
            <option value="rotate-tr">rotate-tr</option>
            <option value="rotate-right">rotate-right</option>
            <option value="rotate-br">rotate-br</option>
            <option value="rotate-bottom">rotate-bottom</option>
            <option value="rotate-bl">rotate-bl</option>
            <option value="rotate-left">rotate-left</option>
            <option value="rotate-tl">rotate-tl</option>
            <option value="rotate-hor-center">rotate-hor-center</option>
            <option value="rotate-hor-top">rotate-hor-top</option>
            <option value="rotate-hor-bottom">rotate-hor-bottom</option>
            <option value="rotate-vert-center">rotate-vert-center</option>
            <option value="rotate-vert-left">rotate-vert-left</option>
            <option value="rotate-vert-right">rotate-vert-right</option>
            <option value="rotate-diagonal-1">rotate-diagonal-1</option>
            <option value="rotate-diagonal-2">rotate-diagonal-2</option>
            <option value="rotate-diagonal-tr">rotate-diagonal-tr</option>
            <option value="rotate-diagonal-br">rotate-diagonal-br</option>
            <option value="rotate-diagonal-bl">rotate-diagonal-bl</option>
            <option value="rotate-diagonal-tl">rotate-diagonal-tl</option>
          </optgroup>

          <optgroup label="Rotate Scale">
            <option value="rotate-scale-up">rotate-scale-up</option>
            <option value="rotate-scale-down">rotate-scale-down</option>
            <option value="rotate-scale-up-hor">rotate-scale-up-hor</option>
            <option value="rotate-scale-down-hor">rotate-scale-down-hor</option>
            <option value="rotate-scale-up-ver">rotate-scale-up-ver</option>
            <option value="rotate-scale-down-ver">rotate-scale-down-ver</option>
            <option value="rotate-scale-up-diag-1">rotate-scale-up-diag-1</option>
            <option value="rotate-scale-down-diag-1">rotate-scale-down-diag-1</option>
            <option value="rotate-scale-up-diag-2">rotate-scale-up-diag-2</option>
            <option value="rotate-scale-down-diag-2">rotate-scale-down-diag-2</option>
          </optgroup>

          <optgroup label="Rotate 90">
            <option value="rotate-90-cw">rotate-90-cw</option>
            <option value="rotate-90-ccw">rotate-90-ccw</option>
            <option value="rotate-90-top-cw">rotate-90-top-cw</option>
            <option value="rotate-90-top-ccw">rotate-90-top-ccw</option>
            <option value="rotate-90-tr-cw">rotate-90-tr-cw</option>
            <option value="rotate-90-tr-ccw">rotate-90-tr-ccw</option>
            <option value="rotate-90-right-cw">rotate-90-right-cw</option>
            <option value="rotate-90-right-ccw">rotate-90-right-ccw</option>
            <option value="rotate-90-br-cw">rotate-90-br-cw</option>
            <option value="rotate-90-br-ccw">rotate-90-br-ccw</option>
            <option value="rotate-90-bottom-cw">rotate-90-bottom-cw</option>
            <option value="rotate-90-bottom-ccw">rotate-90-bottom-ccw</option>
            <option value="rotate-90-bl-cw">rotate-90-bl-cw</option>
            <option value="rotate-90-bl-ccw">rotate-90-bl-ccw</option>
            <option value="rotate-90-left-cw">rotate-90-left-cw</option>
            <option value="rotate-90-left-ccw">rotate-90-left-ccw</option>
            <option value="rotate-90-tl-cw">rotate-90-tl-cw</option>
            <option value="rotate-90-tl-ccw">rotate-90-tl-ccw</option>
            <option value="rotate-90-horizontal-fwd">rotate-90-horizontal-fwd</option>
            <option value="rotate-90-horizontal-bck">rotate-90-horizontal-bck</option>
            <option value="rotate-90-vertical-fwd">rotate-90-vertical-fwd</option>
            <option value="rotate-90-vertical-bck">rotate-90-vertical-bck</option>
          </optgroup>

          <optgroup label="Flip">
            <option value="flip-horizontal-bottom">flip-horizontal-bottom</option>
            <option value="flip-horizontal-top">flip-horizontal-top</option>
            <option value="flip-horizontal-bck">flip-horizontal-bck</option>
            <option value="flip-horizontal-fwd">flip-horizontal-fwd</option>
            <option value="flip-vertical-right">flip-vertical-right</option>
            <option value="flip-vertical-left">flip-vertical-left</option>
            <option value="flip-vertical-bck">flip-vertical-bck</option>
            <option value="flip-vertical-fwd">flip-vertical-fwd</option>
            <option value="flip-diagonal-1-tr">flip-diagonal-1-tr</option>
            <option value="flip-diagonal-1-bl">flip-diagonal-1-bl</option>
            <option value="flip-diagonal-1-bck">flip-diagonal-1-bck</option>
            <option value="flip-diagonal-1-fwd">flip-diagonal-1-fwd</option>
            <option value="flip-diagonal-2-br">flip-diagonal-2-br</option>
            <option value="flip-diagonal-2-tl">flip-diagonal-2-tl</option>
            <option value="flip-diagonal-2-bck">flip-diagonal-2-bck</option>
            <option value="flip-diagonal-2-fwd">flip-diagonal-2-fwd</option>
          </optgroup>

          <optgroup label="Flip 2">
            <option value="flip-2-hor-top-1">flip-2-hor-top-1</option>
            <option value="flip-2-hor-top-2">flip-2-hor-top-2</option>
            <option value="flip-2-hor-top-bck">flip-2-hor-top-bck</option>
            <option value="flip-2-hor-top-fwd">flip-2-hor-top-fwd</option>
            <option value="flip-2-ver-right-1">flip-2-ver-right-1</option>
            <option value="flip-2-ver-right-2">flip-2-ver-right-2</option>
            <option value="flip-2-ver-right-bck">flip-2-ver-right-bck</option>
            <option value="flip-2-ver-right-fwd">flip-2-ver-right-fwd</option>
            <option value="flip-2-hor-bottom-1">flip-2-hor-bottom-1</option>
            <option value="flip-2-hor-bottom-2">flip-2-hor-bottom-2</option>
            <option value="flip-2-hor-bottom-bck">flip-2-hor-bottom-bck</option>
            <option value="flip-2-hor-bottom-fwd">flip-2-hor-bottom-fwd</option>
            <option value="flip-2-ver-left-1">flip-2-ver-left-1</option>
            <option value="flip-2-ver-left-2">flip-2-ver-left-2</option>
            <option value="flip-2-ver-left-bck">flip-2-ver-left-bck</option>
            <option value="flip-2-ver-left-fwd">flip-2-ver-left-fwd</option>
          </optgroup>

          <optgroup label="Flip Scale">
            <option value="flip-scale-up-hor">flip-scale-up-hor</option>
            <option value="flip-scale-down-hor">flip-scale-down-hor</option>
            <option value="flip-scale-up-ver">flip-scale-up-ver</option>
            <option value="flip-scale-down-ver">flip-scale-down-ver</option>
            <option value="flip-scale-up-diag-1">flip-scale-up-diag-1</option>
            <option value="flip-scale-down-diag-1">flip-scale-down-diag-1</option>
            <option value="flip-scale-up-diag-2">flip-scale-up-diag-2</option>
            <option value="flip-scale-down-diag-2">flip-scale-down-diag-2</option>
          </optgroup>

          <optgroup label="Flip Scale 2">
            <option value="flip-scale-2-hor-top">flip-scale-2-hor-top</option>
            <option value="flip-scale-2-ver-right">flip-scale-2-ver-right</option>
            <option value="flip-scale-2-hor-bottom">flip-scale-2-hor-bottom</option>
            <option value="flip-scale-2-ver-left">flip-scale-2-ver-left</option>
          </optgroup>

          <optgroup label="Swing">
            <option value="swing-top-fwd">swing-top-fwd</option>
            <option value="swing-top-bck">swing-top-bck</option>
            <option value="swing-top-right-fwd">swing-top-right-fwd</option>
            <option value="swing-top-right-bck">swing-top-right-bck</option>
            <option value="swing-right-fwd">swing-right-fwd</option>
            <option value="swing-right-bck">swing-right-bck</option>
            <option value="swing-bottom-right-fwd">swing-bottom-right-fwd</option>
            <option value="swing-bottom-right-bck">swing-bottom-right-bck</option>
            <option value="swing-bottom-fwd">swing-bottom-fwd</option>
            <option value="swing-bottom-bck">swing-bottom-bck</option>
            <option value="swing-bottom-left-fwd">swing-bottom-left-fwd</option>
            <option value="swing-bottom-left-bck">swing-bottom-left-bck</option>
            <option value="swing-left-fwd">swing-left-fwd</option>
            <option value="swing-left-bck">swing-left-bck</option>
            <option value="swing-top-left-fwd">swing-top-left-fwd</option>
            <option value="swing-top-left-bck">swing-top-left-bck</option>
          </optgroup>

          <optgroup label="Slide">
            <option value="slide-top">slide-top</option>
            <option value="slide-tr">slide-tr</option>
            <option value="slide-right">slide-right</option>
            <option value="slide-br">slide-br</option>
            <option value="slide-bottom">slide-bottom</option>
            <option value="slide-bl">slide-bl</option>
            <option value="slide-left">slide-left</option>
            <option value="slide-tl">slide-tl</option>
          </optgroup>

          <optgroup label="Slide Back">
            <option value="slide-bck-center">slide-bck-center</option>
            <option value="slide-bck-top">slide-bck-top</option>
            <option value="slide-bck-tr">slide-bck-tr</option>
            <option value="slide-bck-right">slide-bck-right</option>
            <option value="slide-bck-br">slide-bck-br</option>
            <option value="slide-bck-bottom">slide-bck-bottom</option>
            <option value="slide-bck-bl">slide-bck-bl</option>
            <option value="slide-bck-left">slide-bck-left</option>
            <option value="slide-bck-tl">slide-bck-tl</option>
          </optgroup>

          <optgroup label="Slide Forward">
            <option value="slide-fwd-center">slide-fwd-center</option>
            <option value="slide-fwd-top">slide-fwd-top</option>
            <option value="slide-fwd-tr">slide-fwd-tr</option>
            <option value="slide-fwd-right">slide-fwd-right</option>
            <option value="slide-fwd-br">slide-fwd-br</option>
            <option value="slide-fwd-bottom">slide-fwd-bottom</option>
            <option value="slide-fwd-bl">slide-fwd-bl</option>
            <option value="slide-fwd-left">slide-fwd-left</option>
            <option value="slide-fwd-tl">slide-fwd-tl</option>
          </optgroup>

          <optgroup label="Shadow Drop">
            <option value="shadow-drop-center">shadow-drop-center</option>
            <option value="shadow-drop-top">shadow-drop-top</option>
            <option value="shadow-drop-right">shadow-drop-right</option>
            <option value="shadow-drop-bottom">shadow-drop-bottom</option>
            <option value="shadow-drop-left">shadow-drop-left</option>
            <option value="shadow-drop-lr">shadow-drop-lr</option>
            <option value="shadow-drop-tb">shadow-drop-tb</option>
            <option value="shadow-drop-tr">shadow-drop-tr</option>
            <option value="shadow-drop-br">shadow-drop-br</option>
            <option value="shadow-drop-bl">shadow-drop-bl</option>
            <option value="shadow-drop-tl">shadow-drop-tl</option>
          </optgroup>

          <optgroup label="Shadow Drop 2">
            <option value="shadow-drop-2-center">shadow-drop-2-center</option>
            <option value="shadow-drop-2-top">shadow-drop-2-top</option>
            <option value="shadow-drop-2-right">shadow-drop-2-right</option>
            <option value="shadow-drop-2-bottom">shadow-drop-2-bottom</option>
            <option value="shadow-drop-2-left">shadow-drop-2-left</option>
            <option value="shadow-drop-2-lr">shadow-drop-2-lr</option>
            <option value="shadow-drop-2-tb">shadow-drop-2-tb</option>
            <option value="shadow-drop-2-tr">shadow-drop-2-tr</option>
            <option value="shadow-drop-2-br">shadow-drop-2-br</option>
            <option value="shadow-drop-2-bl">shadow-drop-2-bl</option>
            <option value="shadow-drop-2-tl">shadow-drop-2-tl</option>
          </optgroup>

          <optgroup label="Shadow Pop">
            <option value="shadow-pop-tr">shadow-pop-tr</option>
            <option value="shadow-pop-br">shadow-pop-br</option>
            <option value="shadow-pop-bl">shadow-pop-bl</option>
            <option value="shadow-pop-tl">shadow-pop-tl</option>
          </optgroup>

          <optgroup label="Shadow Inset">
            <option value="shadow-inset-center">shadow-inset-center</option>
            <option value="shadow-inset-top">shadow-inset-top</option>
            <option value="shadow-inset-right">shadow-inset-right</option>
            <option value="shadow-inset-bottom">shadow-inset-bottom</option>
            <option value="shadow-inset-left">shadow-inset-left</option>
            <option value="shadow-inset-lr">shadow-inset-lr</option>
            <option value="shadow-inset-tb">shadow-inset-tb</option>
            <option value="shadow-inset-tr">shadow-inset-tr</option>
            <option value="shadow-inset-br">shadow-inset-br</option>
            <option value="shadow-inset-bl">shadow-inset-bl</option>
            <option value="shadow-inset-tl">shadow-inset-tl</option>
          </optgroup>

          <optgroup label="Scale In">
            <option value="scale-in-center">scale-in-center</option>
            <option value="scale-in-top">scale-in-top</option>
            <option value="scale-in-tr">scale-in-tr</option>
            <option value="scale-in-right">scale-in-right</option>
            <option value="scale-in-br">scale-in-br</option>
            <option value="scale-in-bottom">scale-in-bottom</option>
            <option value="scale-in-bl">scale-in-bl</option>
            <option value="scale-in-left">scale-in-left</option>
            <option value="scale-in-tl">scale-in-tl</option>
            <option value="scale-in-hor-center">scale-in-hor-center</option>
            <option value="scale-in-hor-left">scale-in-hor-left</option>
            <option value="scale-in-hor-right">scale-in-hor-right</option>
            <option value="scale-in-ver-center">scale-in-ver-center</option>
            <option value="scale-in-ver-top">scale-in-ver-top</option>
            <option value="scale-in-ver-bottom">scale-in-ver-bottom</option>
          </optgroup>

          <optgroup label="Rotate In">
            <option value="rotate-in-center">rotate-in-center</option>
            <option value="rotate-in-top">rotate-in-top</option>
            <option value="rotate-in-tr">rotate-in-tr</option>
            <option value="rotate-in-right">rotate-in-right</option>
            <option value="rotate-in-br">rotate-in-br</option>
            <option value="rotate-in-bottom">rotate-in-bottom</option>
            <option value="rotate-in-bl">rotate-in-bl</option>
            <option value="rotate-in-left">rotate-in-left</option>
            <option value="rotate-in-tl">rotate-in-tl</option>
            <option value="rotate-in-hor">rotate-in-hor</option>
            <option value="rotate-in-ver">rotate-in-ver</option>
            <option value="rotate-in-diag-1">rotate-in-diag-1</option>
            <option value="rotate-in-diag-2">rotate-in-diag-2</option>
          </optgroup>

          <optgroup label="Rotate In 2">
            <option value="rotate-in-2-cw">rotate-in-2-cw</option>
            <option value="rotate-in-2-ccw">rotate-in-2-ccw</option>
            <option value="rotate-in-2-fwd-cw">rotate-in-2-fwd-cw</option>
            <option value="rotate-in-2-fwd-ccw">rotate-in-2-fwd-ccw</option>
            <option value="rotate-in-2-bck-cw">rotate-in-2-bck-cw</option>
            <option value="rotate-in-2-bck-ccw">rotate-in-2-bck-ccw</option>
            <option value="rotate-in-2-tr-cw">rotate-in-2-tr-cw</option>
            <option value="rotate-in-2-tr-ccw">rotate-in-2-tr-ccw</option>
            <option value="rotate-in-2-br-cw">rotate-in-2-br-cw</option>
            <option value="rotate-in-2-br-ccw">rotate-in-2-br-ccw</option>
            <option value="rotate-in-2-bl-cw">rotate-in-2-bl-cw</option>
            <option value="rotate-in-2-bl-ccw">rotate-in-2-bl-ccw</option>
            <option value="rotate-in-2-tl-cw">rotate-in-2-tl-cw</option>
            <option value="rotate-in-2-tl-ccw">rotate-in-2-tl-ccw</option>
          </optgroup>

          <optgroup label="Swirl In">
            <option value="swirl-in-fwd">swirl-in-fwd</option>
            <option value="swirl-in-bck">swirl-in-bck</option>
            <option value="swirl-in-top-fwd">swirl-in-top-fwd</option>
            <option value="swirl-in-top-bck">swirl-in-top-bck</option>
            <option value="swirl-in-tr-fwd">swirl-in-tr-fwd</option>
            <option value="swirl-in-tr-bck">swirl-in-tr-bck</option>
            <option value="swirl-in-right-fwd">swirl-in-right-fwd</option>
            <option value="swirl-in-right-bck">swirl-in-right-bck</option>
            <option value="swirl-in-br-fwd">swirl-in-br-fwd</option>
            <option value="swirl-in-br-bck">swirl-in-br-bck</option>
            <option value="swirl-in-bottom-fwd">swirl-in-bottom-fwd</option>
            <option value="swirl-in-bottom-bck">swirl-in-bottom-bck</option>
            <option value="swirl-in-bl-fwd">swirl-in-bl-fwd</option>
            <option value="swirl-in-bl-bck">swirl-in-bl-bck</option>
            <option value="swirl-in-left-fwd">swirl-in-left-fwd</option>
            <option value="swirl-in-left-bck">swirl-in-left-bck</option>
            <option value="swirl-in-tl-fwd">swirl-in-tl-fwd</option>
            <option value="swirl-in-tl-bck">swirl-in-tl-bck</option>
          </optgroup>

          <optgroup label="Flip In">
            <option value="flip-in-hor-bottom">flip-in-hor-bottom</option>
            <option value="flip-in-hor-top">flip-in-hor-top</option>
            <option value="flip-in-ver-right">flip-in-ver-right</option>
            <option value="flip-in-ver-left">flip-in-ver-left</option>
            <option value="flip-in-diag-1-tr">flip-in-diag-1-tr</option>
            <option value="flip-in-diag-1-bl">flip-in-diag-1-bl</option>
            <option value="flip-in-diag-2-tl">flip-in-diag-2-tl</option>
            <option value="flip-in-diag-2-br">flip-in-diag-2-br</option>
          </optgroup>

          <optgroup label="Slit In">
            <option value="slit-in-vertical">slit-in-vertical</option>
            <option value="slit-in-horizontal">slit-in-horizontal</option>
            <option value="slit-in-diagonal-1">slit-in-diagonal-1</option>
            <option value="slit-in-diagonal-2">slit-in-diagonal-2</option>
          </optgroup>

          <optgroup label="Slide In">
            <option value="slide-in-top">slide-in-top</option>
            <option value="slide-in-tr">slide-in-tr</option>
            <option value="slide-in-right">slide-in-right</option>
            <option value="slide-in-br">slide-in-br</option>
            <option value="slide-in-bottom">slide-in-bottom</option>
            <option value="slide-in-bl">slide-in-bl</option>
            <option value="slide-in-left">slide-in-left</option>
            <option value="slide-in-tl">slide-in-tl</option>
          </optgroup>

          <optgroup label="Slide In Forward">
            <option value="slide-in-fwd-center">slide-in-fwd-center</option>
            <option value="slide-in-fwd-top">slide-in-fwd-top</option>
            <option value="slide-in-fwd-tr">slide-in-fwd-tr</option>
            <option value="slide-in-fwd-right">slide-in-fwd-right</option>
            <option value="slide-in-fwd-br">slide-in-fwd-br</option>
            <option value="slide-in-fwd-bottom">slide-in-fwd-bottom</option>
            <option value="slide-in-fwd-bl">slide-in-fwd-bl</option>
            <option value="slide-in-fwd-left">slide-in-fwd-left</option>
            <option value="slide-in-fwd-tl">slide-in-fwd-tl</option>
          </optgroup>

          <optgroup label="Slide In Back">
            <option value="slide-in-bck-center">slide-in-bck-center</option>
            <option value="slide-in-bck-top">slide-in-bck-top</option>
            <option value="slide-in-bck-tr">slide-in-bck-tr</option>
            <option value="slide-in-bck-right">slide-in-bck-right</option>
            <option value="slide-in-bck-br">slide-in-bck-br</option>
            <option value="slide-in-bck-bottom">slide-in-bck-bottom</option>
            <option value="slide-in-bck-bl">slide-in-bck-bl</option>
            <option value="slide-in-bck-left">slide-in-bck-left</option>
            <option value="slide-in-bck-tl">slide-in-bck-tl</option>
          </optgroup>

          <optgroup label="Slide In Blurred">
            <option value="slide-in-blurred-top">slide-in-blurred-top</option>
            <option value="slide-in-blurred-tr">slide-in-blurred-tr</option>
            <option value="slide-in-blurred-right">slide-in-blurred-right</option>
            <option value="slide-in-blurred-br">slide-in-blurred-br</option>
            <option value="slide-in-blurred-bottom">slide-in-blurred-bottom</option>
            <option value="slide-in-blurred-bl">slide-in-blurred-bl</option>
            <option value="slide-in-blurred-left">slide-in-blurred-left</option>
            <option value="slide-in-blurred-tl">slide-in-blurred-tl</option>
          </optgroup>

          <optgroup label="Slide In Elliptic">
            <option value="slide-in-elliptic-top-fwd">slide-in-elliptic-top-fwd</option>
            <option value="slide-in-elliptic-top-bck">slide-in-elliptic-top-bck</option>
            <option value="slide-in-elliptic-right-fwd">slide-in-elliptic-right-fwd</option>
            <option value="slide-in-elliptic-right-bck">slide-in-elliptic-right-bck</option>
            <option value="slide-in-elliptic-bottom-fwd">slide-in-elliptic-bottom-fwd</option>
            <option value="slide-in-elliptic-bottom-bck">slide-in-elliptic-bottom-bck</option>
            <option value="slide-in-elliptic-left-fwd">slide-in-elliptic-left-fwd</option>
            <option value="slide-in-elliptic-left-bck">slide-in-elliptic-left-bck</option>
          </optgroup>

          <optgroup label="Bounce In">
            <option value="bounce-in-top">bounce-in-top</option>
            <option value="bounce-in-right">bounce-in-right</option>
            <option value="bounce-in-bottom">bounce-in-bottom</option>
            <option value="bounce-in-left">bounce-in-left</option>
            <option value="bounce-in-fwd">bounce-in-fwd</option>
            <option value="bounce-in-bck">bounce-in-bck</option>
          </optgroup>

          <optgroup label="Roll In">
            <option value="roll-in-left">roll-in-left</option>
            <option value="roll-in-top">roll-in-top</option>
            <option value="roll-in-right">roll-in-right</option>
            <option value="roll-in-bottom">roll-in-bottom</option>
          </optgroup>

          <optgroup label="Roll In Blurred">
            <option value="roll-in-blurred-left">roll-in-blurred-left</option>
            <option value="roll-in-blurred-top">roll-in-blurred-top</option>
            <option value="roll-in-blurred-right">roll-in-blurred-right</option>
            <option value="roll-in-blurred-bottom">roll-in-blurred-bottom</option>
          </optgroup>

          <optgroup label="Tilt In">
            <option value="tilt-in-top-1">tilt-in-top-1</option>
            <option value="tilt-in-top-2">tilt-in-top-2</option>
            <option value="tilt-in-tr">tilt-in-tr</option>
            <option value="tilt-in-right-1">tilt-in-right-1</option>
            <option value="tilt-in-right-2">tilt-in-right-2</option>
            <option value="tilt-in-br">tilt-in-br</option>
            <option value="tilt-in-bottom-1">tilt-in-bottom-1</option>
            <option value="tilt-in-bottom-2">tilt-in-bottom-2</option>
            <option value="tilt-in-bl">tilt-in-bl</option>
            <option value="tilt-in-left-1">tilt-in-left-1</option>
            <option value="tilt-in-left-2">tilt-in-left-2</option>
            <option value="tilt-in-tl">tilt-in-tl</option>
          </optgroup>

          <optgroup label="Tilt In Forward">
            <option value="tilt-in-fwd-tr">tilt-in-fwd-tr</option>
            <option value="tilt-in-fwd-br">tilt-in-fwd-br</option>
            <option value="tilt-in-fwd-bl">tilt-in-fwd-bl</option>
            <option value="tilt-in-fwd-tl">tilt-in-fwd-tl</option>
          </optgroup>

          <optgroup label="Swing In">
            <option value="swing-in-top-fwd">swing-in-top-fwd</option>
            <option value="swing-in-top-bck">swing-in-top-bck</option>
            <option value="swing-in-right-fwd">swing-in-right-fwd</option>
            <option value="swing-in-right-bck">swing-in-right-bck</option>
            <option value="swing-in-bottom-fwd">swing-in-bottom-fwd</option>
            <option value="swing-in-bottom-bck">swing-in-bottom-bck</option>
            <option value="swing-in-left-fwd">swing-in-left-fwd</option>
            <option value="swing-in-left-bck">swing-in-left-bck</option>
          </optgroup>

          <optgroup label="Fade In">
            <option value="fade-in-fwd">fade-in-fwd</option>
            <option value="fade-in-bck">fade-in-bck</option>
            <option value="fade-in-top">fade-in-top</option>
            <option value="fade-in-tr">fade-in-tr</option>
            <option value="fade-in-right">fade-in-right</option>
            <option value="fade-in-br">fade-in-br</option>
            <option value="fade-in-bottom">fade-in-bottom</option>
            <option value="fade-in-bl">fade-in-bl</option>
            <option value="fade-in-left">fade-in-left</option>
            <option value="fade-in-tl">fade-in-tl</option>
          </optgroup>

          <optgroup label="Puff In">
            <option value="puff-in-center">puff-in-center</option>
            <option value="puff-in-top">puff-in-top</option>
            <option value="puff-in-tr">puff-in-tr</option>
            <option value="puff-in-right">puff-in-right</option>
            <option value="puff-in-br">puff-in-br</option>
            <option value="puff-in-bottom">puff-in-bottom</option>
            <option value="puff-in-bl">puff-in-bl</option>
            <option value="puff-in-left">puff-in-left</option>
            <option value="puff-in-tl">puff-in-tl</option>
            <option value="puff-in-hor">puff-in-hor</option>
            <option value="puff-in-ver">puff-in-ver</option>
          </optgroup>

          <optgroup label="Flicker In">
            <option value="flicker-in-1">flicker-in-1</option>
            <option value="flicker-in-2">flicker-in-2</option>
          </optgroup>

          <optgroup label="Tracking In">
            <option value="tracking-in-expand">tracking-in-expand</option>
            <option value="tracking-in-expand-fwd">tracking-in-expand-fwd</option>
            <option value="tracking-in-expand-fwd-top">tracking-in-expand-fwd-top</option>
            <option value="tracking-in-expand-fwd-bottom">tracking-in-expand-fwd-bottom</option>
            <option value="tracking-in-contract">tracking-in-contract</option>
            <option value="tracking-in-contract-bck">tracking-in-contract-bck</option>
            <option value="tracking-in-contract-bck-top">tracking-in-contract-bck-top</option>
            <option value="tracking-in-contract-bck-bottom">tracking-in-contract-bck-bottom</option>
          </optgroup>

          <optgroup label="Focus In">
            <option value="text-focus-in">text-focus-in</option>
            <option value="focus-in-expand">focus-in-expand</option>
            <option value="focus-in-expand-fwd">focus-in-expand-fwd</option>
            <option value="focus-in-contract">focus-in-contract</option>
            <option value="focus-in-contract-bck">focus-in-contract-bck</option>
          </optgroup>

          <optgroup label="Text Shadow Drop">
            <option value="text-shadow-drop-center">text-shadow-drop-center</option>
            <option value="text-shadow-drop-top">text-shadow-drop-top</option>
            <option value="text-shadow-drop-tr">text-shadow-drop-tr</option>
            <option value="text-shadow-drop-right">text-shadow-drop-right</option>
            <option value="text-shadow-drop-br">text-shadow-drop-br</option>
            <option value="text-shadow-drop-bottom">text-shadow-drop-bottom</option>
            <option value="text-shadow-drop-bl">text-shadow-drop-bl</option>
            <option value="text-shadow-drop-left">text-shadow-drop-left</option>
            <option value="text-shadow-drop-tl">text-shadow-drop-tl</option>
          </optgroup>

          <optgroup label="Text Shadow Pop">
            <option value="text-shadow-pop-top">text-shadow-pop-top</option>
            <option value="text-shadow-pop-tr">text-shadow-pop-tr</option>
            <option value="text-shadow-pop-right">text-shadow-pop-right</option>
            <option value="text-shadow-pop-br">text-shadow-pop-br</option>
            <option value="text-shadow-pop-bottom">text-shadow-pop-bottom</option>
            <option value="text-shadow-pop-bl">text-shadow-pop-bl</option>
            <option value="text-shadow-pop-left">text-shadow-pop-left</option>
            <option value="text-shadow-pop-tl">text-shadow-pop-tl</option>
          </optgroup>

          <optgroup label="Text Pop Up">
            <option value="text-pop-up-top">text-pop-up-top</option>
            <option value="text-pop-up-tr">text-pop-up-tr</option>
            <option value="text-pop-up-right">text-pop-up-right</option>
            <option value="text-pop-up-br">text-pop-up-br</option>
            <option value="text-pop-up-bottom">text-pop-up-bottom</option>
            <option value="text-pop-up-bl">text-pop-up-bl</option>
            <option value="text-pop-up-left">text-pop-up-left</option>
            <option value="text-pop-up-tl">text-pop-up-tl</option>
          </optgroup>

          <optgroup label="Vibrate">
            <option value="vibrate-1">vibrate-1</option>
            <option value="vibrate-2">vibrate-2</option>
          </optgroup>

          <optgroup label="Shake">
            <option value="shake-horizontal">shake-horizontal</option>
            <option value="shake-vertical">shake-vertical</option>
            <option value="shake-lr">shake-lr</option>
            <option value="shake-top">shake-top</option>
            <option value="shake-tr">shake-tr</option>
            <option value="shake-right">shake-right</option>
            <option value="shake-br">shake-br</option>
            <option value="shake-bottom">shake-bottom</option>
            <option value="shake-bl">shake-bl</option>
            <option value="shake-left">shake-left</option>
            <option value="shake-tl">shake-tl</option>
          </optgroup>

          <optgroup label="Jello">
            <option value="jello-horizontal">jello-horizontal</option>
            <option value="jello-vertical">jello-vertical</option>
            <option value="jello-diagonal-1">jello-diagonal-1</option>
            <option value="jello-diagonal-2">jello-diagonal-2</option>
          </optgroup>

          <optgroup label="Wobble">
            <option value="wobble-hor-bottom">wobble-hor-bottom</option>
            <option value="wobble-hor-top">wobble-hor-top</option>
            <option value="wobble-ver-left">wobble-ver-left</option>
            <option value="wobble-ver-right">wobble-ver-right</option>
          </optgroup>

          <optgroup label="Bounce">
            <option value="bounce-top">bounce-top</option>
            <option value="bounce-bottom">bounce-bottom</option>
            <option value="bounce-left">bounce-left</option>
            <option value="bounce-right">bounce-right</option>
          </optgroup>

          <optgroup label="Pulsate">
            <option value="pulsate-bck">pulsate-bck</option>
            <option value="pulsate-fwd">pulsate-fwd</option>
            <option value="ping">ping</option>
          </optgroup>

          <optgroup label="Ken Burns">
            <option value="ken-burns-top">ken-burns-top</option>
            <option value="ken-burns-top-right">ken-burns-top-right</option>
            <option value="ken-burns-right">ken-burns-right</option>
            <option value="ken-burns-bottom-right">ken-burns-bottom-right</option>
            <option value="ken-burns-bottom">ken-burns-bottom</option>
            <option value="ken-burns-bottom-left">ken-burns-bottom-left</option>
            <option value="ken-burns-left">ken-burns-left</option>
            <option value="ken-burns-top-left">ken-burns-top-left</option>
          </optgroup>

          <optgroup label="Background Pan">
            <option value="bg-pan-left">bg-pan-left</option>
            <option value="bg-pan-right">bg-pan-right</option>
            <option value="bg-pan-top">bg-pan-top</option>
            <option value="bg-pan-bottom">bg-pan-bottom</option>
            <option value="bg-pan-tr">bg-pan-tr</option>
            <option value="bg-pan-br">bg-pan-br</option>
            <option value="bg-pan-bl">bg-pan-bl</option>
            <option value="bg-pan-tl">bg-pan-tl</option>
          </optgroup>
          <option value="none">None</option>
        </select>
        <animatable-component id="animatableButton" animation="pulse" easing="ease-in" duration="200" autoplay="false">
          <button>Animate it</button>
        </animatable-component>
        <br />
      </main>
      <animatable-component autoplay animation="pulse" easing="ease-out" duration="600" delay="1500">
        <section>
          <p class="meta">
            <a target="_blank" href="https://www.npmjs.com/package/@proyecto26/animatable-component">
              Download <span>&#60;</span>animatable-component<span>&#8725;&#62;</span>
            </a>
            or
            <a target="_blank" href="https://github.com/proyecto26/animatable-component">View on GitHub</a>
          </p>
        </section>
      </animatable-component>
      <animatable-component autoplay iterations="3" animation="heartBeat" easing="ease-in" duration="1000" delay="2600">
        <section>
          <p class="meta">
            <small>
              Made with <span>❤️</span> by
              <a target="_blank" href="https://github.com/jdnichollsc">
                Juan D. Nicholls
              </a>
            </small>
          </p>
        </section>
      </animatable-component>   
    </animatable-component>
  </section>
</body>
</html>
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body {
  padding: 0px;
  margin: 0 auto;
  font: 100%/1.5 "Source Sans Pro", Verdana, sans-serif;
  background: #24252A;
  -webkit-font-smoothing: antialiased;
}

body, main {
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  text-align: center;
  color: white;
  margin: 10px;
}

header {
  display: block;
  padding: 1.5rem;
}

h1, h3 {
  text-align: center;
}

h1 {
  font-size: 2.4em;
  color: #f35626;
  margin-bottom: 4rem;
  background-image: linear-gradient(92deg, #f35626 0%,#feab3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

h3 {
  color: white;
  font: 100%/1.5 "Roboto", Verdana, sans-serif;
  margin-bottom: .75rem;
  margin-top: 1rem;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
}

span {
  color: white;
}

header span {
  margin: 5px;
}

select {
  font-size: 20px;
  line-height: 20px;
  font-family: "Roboto";
  width: 180px;
  height: 50px;
  background-color: white;
  border: 1px solid #c0c8c9;
  border-radius: 4px;
  padding: .75rem;
  margin: .375rem;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjRweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMjQgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNDMEM4QzkiIHBvaW50cz0iMTIuMzMzLDUgNy43OTQsMTAgMy4yNTQsNSAiLz4NCjwvc3ZnPg0K), none;
  background-repeat: no-repeat;
  background-size: 1.5rem 1rem;
  background-position: right center;
  -webkit-appearance: none;
  -moz-appearance: none;
}

a, button {
  color: #f35626;
}

button {
  max-height: 50px;
  font-size: 15px;
  font-family: "Roboto";
  border: 2px solid #f35626;
  line-height: 1.375;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  animation: hue 60s infinite linear;
  padding: 1rem;
  margin: 1.375rem;
  background-color: transparent;
  border-radius: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
}
button:focus {
  outline: none;
}

p {
  font: 100%/1.5 "Roboto", Verdana, sans-serif;
  font-size: 18px;
  max-width: 96%;
}

@media (min-width: 500px) {
  h1 {
    font-size: 4rem;
    line-height: 1;
  }
}

@media (min-width: 720px) {
  h1 {
    font-size: 6rem;
    line-height: 1;
  }
}
const animatable = document.querySelector('#animatable');
const selectAnimation = document.querySelector('select');

selectAnimation.addEventListener('change', function(e) {
  e.preventDefault();
  animatable.animation = this.value;
  animatable.play();
})

const animatableButton = document.querySelector('#animatableButton');
const button = document.querySelector('button');
button.addEventListener('click', function(e) {
  e.preventDefault();
  animatable.animation = selectAnimation.value;
  animatable.play();
  animatableButton.play();
})

animatable.keyFrames = [
  {
    offset: 0,
    opacity: '0',
    transform: 'translateY(100px) scale(1, 1)'
  },
  {
    offset: 0.4,
    opacity: '1',
    transform: 'translateY(-10px) scale(1, 1)'
  },
  {
    offset: 0.6,
    opacity: '1',
    transform: 'translateY(0px) scale(1, 1)'
  },
  {
    offset: 0.8,
    opacity: '1',
    transform: 'translateY(0px) scale(2, 2)'
  },
  {
    offset: 1,
    opacity: '1',
    transform: 'translateY(0px) scale(1, 1)',
  }
];

const startSecondAnimation = function() {
  //Remove listener and create my own infinity :)
  animatable.autoPlay = false;
  animatable.removeEventListener("finish", startSecondAnimation);
  animatable.options = {
    iterations: 1,
    duration: 1000
  }
  animatable.animation = 'bounce'
  animatable.play()
}

animatable.addEventListener("finish", startSecondAnimation);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js