Triggering implicit animations by using -webkit-transition properties.
Example
The demo shows 2D animation with -webkit-transition by changing the values of -webkit-transform rotate and scale. Tap a photo to animate!
#gallery { position: relative; height: 300px } .gallery-photo { position: absolute; background: #fff; width: 200px; height: 240px; padding: 10px; border: 1px solid #999; -webkit-box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.5); -webkit-transition: -webkit-transform .3s ease-out; } .gallery-photo div { text-align: center; } .gallery-photo:active, .gallery-photo:focus { z-index: 10; -webkit-transform: rotate(0deg) scale(1, 1); } .p1{ top: 15px; left: -10px; -webkit-transform: rotate(-15deg) scale(.65,.65); } .p2 { left: 80px; -webkit-transform: rotate(10deg) scale(.75,.75); } * on touch screen with no cursor, there is no such action as hover, so the :hover pseudo-class is triggered when the element is tapped. Notice the "after" state stays after tap action, unlike hover.