There are many example out there that using CSS3 transform and animation for enhancing the webpage and today I’m going to share one of them. Using CSS3 transform and animation we will create a bouncing effect when an item (in this case image) is showing or added to our webpage.We will have an image list positioned on the bottom of the page wrapped by a single div, it will be opened by clicking a plus sign. If one of these image is clicked it will be showed on the middle of the page with bouncing, if other image clicked it also be showed next to previous showed image.
To have a bouncing effect is a little bit tricky, we can use transform with playing scale value and helped by animation keyframes. Bouncing like zooming in and zooming out with different scale in some interval, for our bounce effect, the image will be showed bigger than its original size then scaling to smaller, bigger but smaller than the first and back to original size.
