Over the last few years of surfing the Internet, we can observe more and more websites which have well-designed and creative error pages. This article proposes an idea how to do it using simple animation in CSS3.
This loader consists of three fading blocks and an effect of a passing wave. Whole animation is done by using @keyframes rule in CSS3 and doesn't require any animated GIF image.
Expanding effect for appearing text that is used in this article consists of two parts where each part performs after another is finished. This effect is only made possible by using @keyframes rule in CSS3.
In HTML5, there is a new element - progress which acts as a regular progress bar and is used to visualize the progress completion of a certain task such as data download on a server.
Horizontal and vertical animated stretching effect for appearing text placed over an image using only CSS3
Animation demonstrated in this article uses only CSS3. It consists of one simple semi-transparent layer placed over the image and appearing text with zoom and rotate effects.
This property controls selection of text and other elements on a page, except text fields of form, their contents can be selected whether it's allowed or not by user-select CSS property.
The following article is intended for demonstration purposes and shows how animation in CSS3 can be used to create analog clock with responsive design.