Welcome to my CSS animations playground!
This is a playful site that displays animations and effects created using only HTML and CSS. It is experimental and uses many new features that are not supported in all browsers. As such it is best view on a computer using an updated version of Firefox or Chrome.
Use the arrows on the sides to navigate.
Light Bulbs
NextDynamic Blurred Background
The background outside the box gets blurred when you put your cursor inside the box.
Reload the page to get a new background picture.
The Wheel
Dropping Down
The dropping down effect is created by transitioning a combination of translateY and opacity.
Smoothness
The smoothness of an individual animation can be controlled the timing-function, and a combination of different animation can look more smooth by having different durations and delays.
Background Images
As transitioning the background image is done using the after psuedo-element, covering the entire screen.
The Has-selector
If the has selector gets impemented we no longer need to have a separate elements for each background. Instead we could have one element that switches background depending on which item is hovered over.
Dropping Grid
Previous NextSnake
Previous NextFrog
Previous Next♠
If you are interested in learning about CSS I recommend that you check out Kevin Powell's Youtube Channel.
♠
♦
On a commercial website, an animated card like these could be used to display things like products, team members or important articles.
♦
♣
These cards were made to look like playing cards just for fun, as this page is suppose to have a bit of a playful theme.
♣
Cards
Next3D Scene
NextSteps
To be continue...?