A CodePen by Mike Fowler. Letterpress'd - Yesterday I started playing the brilliant game for iOS called Letterpress. I liked the simple interface animations they did, so I recreated it. Some of the pieces have animations initially, but all pieces will animate if you hover on them.

index.html

<div id="board"></div>

script.coffee

class TileBoard
  
  constructor: (@size)->
    @LETTERS = 'abcdefghijklmnopqrstuvxyz'
    @draw()

  draw: ->
    board = document.getElementById 'board'
    tileCount = @size * @size
    tileSize = (100 / @size) + "%"
      
    for num in [1..tileCount]
      tile = document.createElement 'div'
      tile.classList.add 'tile'
      tile.classList.add 'tile-hover' if (Math.random() < 0.2)
      tile.style.width = tileSize
      tile.style.height = tileSize
      tile.style.backgroundColor = @getRandomColor()
                                                   
      letters = @LETTERS.split('')
      letter = document.createTextNode letters[Math.floor(Math.random()*letters.length)]
      tile.appendChild letter
      tile.style.lineHeight = (board.offsetHeight/@size) + "px"
      
      tile.addEventListener 'mouseover', @animate, no
      tile.addEventListener 'webkitAnimationEnd', @unanimate, no
      tile.addEventListener 'mozAnimationEnd', @unanimate, no
      tile.addEventListener 'animationEnd', @unanimate, no
      
      board.appendChild tile
      
  animate: (e)->
     e.target.classList.add 'tile-hover'
            
  unanimate: (e)->
     e.target.classList.remove 'tile-hover'
       
  getRandomColor: ->
    number = Math.floor(Math.random() * (3 - 1 + 1)) + 1
    switch number
      when 1 then "#983a30"
      when 2 then "#187598"
      
window.onload =->
  new TileBoard(5)

style.scss

@import "compass";
$board-size: 300px;
$red: #983a30;
$blue: #187598;

body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif; 
  -webkit-font-smoothing: antialiased;
}

.tile {
  background: #373737;
  float: left;
  font-size: 1.3em;
  text-align: center;
  text-transform: uppercase;
  color: white;
  font-weight: bold;
  user-select: none;
  cursor: pointer;
  
  &.tile-hover {
    animation-name: boogy;
    animation-duration: 2s;
    animation-timing-function: ease;
  }
  
}

#board {
  width: $board-size;
  height: $board-size;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -($board-size/2);
  margin-top: -($board-size/2);
}

@keyframes boogy {
  35%, 65% {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }
  20%, 40%, 60%, 80%, { transform: scale(1.05) rotate(5deg); }
  10%, 30%, 50%, 70%, 90% { transform: scale(1.05) rotate(-5deg); }
}