ascii-heart.html

<link rel="import" href="../polymer/polymer.html">
<script href="../prefixfree/prefixfree.min.js"></script>

<!--
Animated ascii heart Polymer element.

Example:

    <ascii-heart></ascii-heart>

@demo
-->
<dom-module id="ascii-heart">
  <style>
      .ascii-heart {
        height: 25px;
        width: 25px;
        font: bold 22px monospace;
        letter-spacing: -1.5px;
        animation: animated_div 5s forwards 1;
        transform-origin: 50% 50%;
      }
      
      @keyframes animated_div {
        0% {
          transform: rotate(0deg);
        }
        45% {
          transform: rotate(-90deg);
        }
        100% {
          transform: rotate(-90deg);
        }
      }
  </style>
  
  <template>
    <div class="ascii-heart"><3</div>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'ascii-heart'
  });
</script>