aurelia-animator-css/test/fixtures/addremove.html

An implementation of the abstract Animator interface from templating which enables css-based animations.

<style type="text/css">
  @keyframes hide-animation {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @-webkit-keyframes hide-animation{
    from { opacity: 1; }
    to { opacity: 0; }
  }
  
  @keyframes show-animation {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @-webkit-keyframes show-animation{
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .aurelia-hide-add {
    -webkit-animation:0.2s show-animation;
    animation:0.2s show-animation;
  }
  
  .aurelia-hide-remove {
    -webkit-animation:0.2s show-animation;
    animation:0.2s show-animation;
  }

  .aurelia-hide { 
    display: none !important;
  }
  .fade-in { 
    animation: show-animation 1s;
    -webkit-animation: show-animation 1s;
  }
</style>

<div>
  <span id="elem" class="">
    Quickly animated element
  </span>
</div>

<div id="overlap" class="fade-in au-animate aurelia-hide">Clean up</div>