The practice of developing web resources has led to two significant trends: speed and understanding of quality. The first obliges the developer to do their work quickly, the second - defines the boundaries of the expedient.
The visitor has a specific goal when visiting the site and focuses on generally accepted ideas about where what is and how it should work. A developer can do his work as he sees fit, but if he is interested in attracting the attention of a greater number of visitors, then it is not practical to ignore their opinion.
Syntax and semantics of animation
The CSS animation property is easy to use and allows you to quickly perform interesting effects. In order for the elements of the web page to behave in a modern way, as the visitor expects, it is not necessary to be particularly smart and design your own animation options. Everything works by definition, as expected and in demand.
This example describes two elements. The first is an indicator strip that moves to the right and increases proportionally in size. The second element is a picture that just moves to the right.
Not all frames are shown here. The CSS animation property in this case is implemented smoothly. The visitor to the page observes a smooth movement with an increase in the volume of the line and the movement of the picture. Using various options for movement instead of the ease-in-out type, you can control the movement. The ease-in-out option gives acceleration at the beginning and braking at the end, but you can choose another option.
Superposition and interaction of elements
All elements that have the animation property are considered by CSS independently of each other and of the overall page flow. If the elements are superimposed on each other, the result is a combination of effects and as a result a new effect.
If during the animation the elements change the opacity property , then due to the laws of superimposing colors, you can get very original effects in just two or three elements.
Drawing an element is of great importance. In the above example, a strip is formed from a picture in which two lines of different colors. When the size of the strip increases, this is a saw, while the movement of the saw is a moving wave. By manipulating the lines and their slope, you can create effects according to the general laws of graphics.
Changing the animation time also leads to non-standard solutions. Using a transformation property, such as an element's rotation function, forms the original change. Example:
Here, the strip continuously changes its shape from an opaque to a transparent state. The bottom picture only changes shape.
Information animation
In CSS: text animation makes special sense. Text always matters and is present on a web page for a specific purpose. But the text is always less informative than the image, and takes up a lot of space.
The guarantee that a correctly written text will be adequately perceived by the visitor is much higher than the hope of a correct understanding of the image, especially when the site designer has his own idea of the forms of expression of meaning.
If earlier, when CSS animation just entered the world of typesetting, running lines, flashing hours, pulsating texts were popular, then in modern site building the principle is considered normal: without annoying the visitor, imagine the functionality of the web resource as effectively as possible.
In this context, any of the above examples is convenient for presenting textual information, but the option of using CSS as 3D animation is the most practical.
Here, in the “normal” state, the text takes up little space. You can highlight the main word or indicate the meaning. As soon as the mouse lands on the text area, it expands from CSS 3D animation to a normal readable state.
The option of saving space in combination with a 3D design allows you to compactly place information. Free space can be used for other or related purposes. Due to CSS animation, the right information will be available at the right time.
Consumer animation
Noticeable successes in creating high-quality web resources still leave one strange question out of the question: why is website design a developer’s concern?
A site is not a work of art or the result of a creative process for aesthetic purposes. A site is primarily a functionality that, in the opinion of the owner (developer), will lead new visitors to it and will provide an opportunity to work with its customers.
To sell a product, provide a service, perform a particular job ... A visitor comes for goods, services and work. Design and animation are important, but the visitor’s opinion is more important than the opinion of the owner (developer).
If the buyer is always right in a regular store, then why should he do everything in an online store as the developer came up with through the proposed design? Animation in the context of CSS is a great tool, but why not go a little further: how many consumers, so many options for expressing functionality and design.
A variant of “consumer animation” is when there is something that the developer has proposed, and what the previous consumers have chosen, and what the current consumer has thought of.