Animation of page elements can function as an independent process or be performed to visualize visitor actions. In any case, the CSS transformation of the element does not affect the overall flow and is performed regardless of the content of the page as a whole.
When using rules and developing logic for changing elements, using the right values for properties and rules is very important. CSS transformation does not provide the developer with control capabilities. All conversions are performed according to the given functions and their values.
General Transformation Rules
The logic implemented in the idea of the transformation function is to distort the element. Page elements - this is a rectangular area, even if it is represented by smooth graphics inside it.
By changing the sizes of the sides of the region or their displacement (displacement), it can be:
- dynamics formed;
- educated perspective;
- volume completed.
In any case, all transformations occur on the plane, but the result is possible in both 2D and 3D display.
The following example shows four areas, each with a CSS transformation.
The top row of pictures is the original, the bottom row is the result of applying functions. To demonstrate the main features, the following CSS description was used and insertion into the HTML code of the page is shown.
In this example, the transformation occurs when you hover over an element and is assigned through the hover pseudo-class.
Regarding the transform property, when using the translate function, it should be noted that CSS transformation can be replaced by the left and top properties. Regarding distortion from the skew function, the result may not be predictable.
It is believed that skew is rarely used, but with the correct and complex application of CSS animation with skew, it will allow you to build dynamics in three-dimensional space when the element moves. For example, a “spaceship in orbit” in the context of a web page may be the movement of goods in a shop window in a store.
Transformation Perspective
Transforming text into CSS can have a special effect when applying perspective. The example shows how the normal representation of the text can be converted to pseudo-three-dimensional.
Perhaps this makes sense in some tasks, but the practicality of the inverse idea is obvious: you can place information in the future, and when you hover over it, transform the mouse into a normal display. It is compact and effective.
These transformation examples are described in CSS as follows:
Using the transform-origin property allows you to determine the point around which the transformation will be performed. By moving this point, you can control the center relative to which the CSS transformation is performed.
The rotate function, although it has two options - rotateX and rotateY - but without "X" and "Y" has one parameter.
In all cases, the transformation of elements should be debugged with simple examples to avoid unexpected results. It is better to first correctly formulate the rule and describe the property for a simple element, than to include immediately in the spectrum of the desired transformations. The correct formulation of rules and properties in CSS is the key to success and an effective result.
Using the animation property
CSS animation through animation and @keyframes complements the possibilities of transformation, allowing you to turn it into a real representation through the controlled movement of the element or the controlled transformation of its shape.
The top line of the elements is their normal state. The first column is moved, the second is rotated, and the third is scaled. A few frames are shown. To implement this functionality, the following code was used:
The dynamics and duration of the process can be set in animation and @keyframes. A smooth and stepwise process change is available. You can apply uniform change and acceleration.
Animation Property Capabilities
The animation property is usually written in a single line. It includes eight parameters:
- animation-name - name of the animation;
- animation-duration - duration of the animation (seconds "s", milliseconds "ms");
- animation-timing-function - type of animation (ease, linear, ease-out, ease-in, ease-in-out, cubic-bezier);
- animation-iteration-count - the number of repetitions of the animation or infinite;
- animation-direction - direction of movement (normal, reverse, alternate, alternate-reverse);
- animation-play-state - stop animation (running, paused);
- animation-delay - animation delay before playback starts (seconds "s", milliseconds "ms");
- animation-fill-mode - play the animation outside the specified playback time (
- none, forwards, backwards, both);
When developing animation through animation, transformation properties are specified in the @keyframes rule, which determines the sequence of transforming an element in steps.
Important animation options
Any animation has a name, duration and type. The name describes the desired @keyframes description, the duration determines the process time, and the type determines the movement variant.
If a uniform process (movement and / or transformation) is necessary, the linear value is used. If you need to have acceleration at the beginning - ease-out, if at the end - ease-in. Simply ease is gliding, and ease-in-out is its smoother version.
The cubic-bezier value allows you to formulate a complex version of the movement and build a more original version of the animation.
On the manufacturer’s website, you can choose any standard version of the movement and design your own. When you press the "GO!" two boxes will move in parallel and you can compare the differences and visually form the desired behavior of the element.
Building Animation Frames
The @keyframes property is the “qualifier” of frames (see the example above) through which the element transforms. The idea of a property is very simple, but it offers tremendous opportunities.
The process starts at 0% and ends at 100% of the total time allotted for the animation. You can use only endpoints from and to, or 0% and 100%. A greater effect can be achieved by dividing the entire animation / transformation process into sections. The pitch of the plot can be any.
Usually several options are accepted: 0%, 25%, 50%, 75% and 100%. Sometimes only three frames are enough: 0%, 50% and 100%. What to do in each case depends on the task and the developer.
When constructing any type of transformation, one essential rule should be observed. Using JavaScript is not always acceptable, especially when it comes to programmatically changing the properties of elements, for example, changing the value of the background-image property.
HTML, CSS, and JavaScript work well together, but in all cases you need to consider the actual functionality of each component. Ideally, when they work in a clear combination and do not interfere with each other.