CodePen

HTML

            
              <h1 id="logo" class="run-animation">
  Fancy Text
</h1>
            
          
!

CSS

            
              @keyframes my-animation {        
  from {
    opacity : 0;
    left : -500px;
  }
  to {
    opacity : 1;
    left : 0;
  }      
}

.run-animation {
  position: relative;
  animation: my-animation 2s ease;
}

#logo {
  text-align: center;
  font-family : Palatino Linotype, Book Antiqua, Palatino, serif;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // retrieve the element
element = document.getElementById("logo");

// reset the transition by...
element.addEventListener("click", function(e){
  e.preventDefault;
  
  // -> removing the class
  element.classList.remove("run-animation");
  
  // -> triggering reflow /* The actual magic */
  // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
  element.offsetWidth = element.offsetWidth;
  
  // -> and re-adding the class
  element.classList.add("run-animation");
}, false);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................