.box { background: #dddddd; font-size: 100%; border: 1px solid #000000; width: 500px; padding: 5px; color: #000000; } .box div { display: inline-block; width: 100px; border: 1px solid #000000; background: #aaaaaa; margin: 5px; padding: 5px; text-align: center; position: relative; left: 0px; } #test1:hover { animation-name: schuetteln; } #test2:hover { animation-name: blinken; } #test3:hover { animation-name: wachsen; } #test4:hover { animation-name: faerben; } .box div:hover { animation-duration: 250ms; animation-iteration-count: 2; animation-direction: alternate; } @keyframes schuetteln { from, 67% { transform: rotate(0deg); } 33% { transform: rotate(-5deg); } to { transform: rotate(5deg); } } @keyframes blinken { from { opacity: 1; } to { opacity: 0; } } @keyframes wachsen { from { transform: scale(1); } to { transform: scale(1.5); } } @keyframes faerben { from { color: #000; background: #aaa; border-color: #000; } to { color: #fff; background: #444; border-color: #fff; } }