Let's animate things a little with CSS only
A nice tool to add random pixel images is http://lorempixel.com/ - just append the pixel size you want like http://lorempixel.com/400/200/ and you will get:
I will start to animate this random image on interaction - in this case on hover. This is also to see how this is handled by a touch device. First let's start with a 1 second delayed rotation by 15 degree. This is achieved via the transition property. To have the same decent animation when the mouse does not hover anymore just put the transition property in the original state (in this case: img.ani)
Transitions with different timings of multiple properties
Hovering this image will move it to the left by 20 pixel and set the opacity to .2. Nothing fancy so far,
but I want them to transistion in different timings. Set the transition-property to opacity, left, so you can add different timings seperated with a comma: "transition-duration: 1s, 2s". This will fade out the image in 1 second while moving to the right in 2 seconds.
Still fancy some delay? just add the transition-delay;
I experienced, that this does ONLY work in Firefox if you specify the left position value in the original state as "0" (or whatever you need it to be). Otherwise Firefox just skips the duration transition of the 20 pixel left movement and does it without animation/transition.
Doing the same thing as above, but with translateX and easing
Let's be honest: there is hardly any difference recognizable here. But I had to do it. Please consider the proper use of an easing funciton to smooth the animation even a bit more.
No delays this time.
For evaluation purposes on mobile browsers: adding a grouped selector with the pseudo class :focus
As some mobile browser do not support the hover pseudo class (which makes sense, since there is no hovering when touching a display directly), there is another pseudo class named :focus. All I changed here, is to add a grouped selector to the img.ani4:hover state img.ani4:focus.
Of course, I also changed the size of the image - so see, if you can spot a difference in the behaviour to the images above when you are visiting with a mobile browser.