CSS animations

There are many programs where you can edit, create montages or even create animations, every time there are many softwares that add this type of interactive projects. In this post we are not only going to introduce you to the world of animations, but we are also going to introduce you to a new friend.

As you well know, the world of computing is full of commands and useful tools for the development of web pages or online media, which currently coexist. Stay with us and discover in this new tutorial another way to increase your level with computing and interactivity.

What are animations?

We want you to fully enter the tutorial, but for this, it is necessary to enter the world of animations or what in graphic design is concerned, the world of interactive design. 

Animations are also part of the audiovisual world, in fact they would be nothing if or because in them, an audio and a moving image are introduced. For this reason, when we speak of "animation", we refer to what is popularly known as "cartoons."

As summarized above, animation arises from the ability to give movement to something, in this case cartoons. But how are all these movements achieved? Well, without a doubt, they arise from what we call, sequences of drawings or photographs that by being ordered consecutively, one after the other, they manage to generate a credible movement before our eyes, which lend themselves and enter the game of visual illusion.

Formerly, the first animations were designed on sheets of paper, in each of them, the animated character was drawn taking steps, and once the end of the sheet was reached, it was passed one by one quickly to achieve the effect of movement in the drawing.

Animation types

There are different types of animation:

Cartoon or Traditional Animation

This style consists of giving movement to the protagonist frame by frame. At the beginning, when there were not enough audiovisual means, they were carried out through the drawing and painting of each frame (including the background, stage or background of the animation), to later be filmed on what we know as a film tape.

Stop Motion

Stop Motion is an animation technique that has nothing to do with cartoons. Furthermore, its main objective is to simulate the movements of objects that in reality are totally static and it is divided into two phases: animation of clay or claymotion and animation of rigid objects.

Pixelation

Pixelation is a technique that comes from Stop Motion and consists of working with objects that are neither dolls nor models, but common objects or people. Objects are photographed multiple times and shift slightly with each frame.

Rotoscopy

It consists of the direct drawing of another drawing, such as the tracing of a drawing on another drawing or of a real person. It is considered a precursor to mocap, that is, to motion capture that is used to recreate digital characters in the world of cinema.

Animation by Cutouts or Cut out Animation

It is a technique that consists of cutting figures, these figures can be represented on paper or in photographs. The body of the characters is built based on cutouts and movement and animation arise from a replacement of said cutouts.

3D Animation

3D animation originates from an editor program, which allows simulations and animations to be carried out. Within these two variants, good lighting, camera movements and special effects come into contact.

Currently there are also other techniques such as: the painting on glass, the animation of sand, the screen of gujas and the painting on celluloid. 

What is CSS?

Now that you know a little more about the world of animations, it's time for us to introduce you to the world of CSS acronyms.

Abbreviations CSS, refer to "cascading style sheets". It is formed by a language that is used in the design sector and in the presentation of web pages, even better, they are a series of tools and commands that are in charge of presenting a web page as we see it for the first time once it has already been created. Works together with the tool HTML (organized from the base content of the pages).

Its name is determined by the number of leaves it contains and one of them inherits properties or characteristics from others. That is, you can work with a simple blog template, but when you want to customize the appearance of a site you will need to implement CSS that together with a good CMS will help you enhance the reach of your content.

What is CSS for?

With CSS, you can organize your page, that is, you can tell your web page how you want to locate all the information so that the viewer is easy to handle and useful at the same time. Here enter all the commands of some elements that are part of the style or design of the web page, for example, the fonts, colors, sizes etc. 

Normally, so that you better understand what this tool is about, digital marketing specialists are the first to understand about this since they are the ones who handle them.

Animate in CSS

Well, now that you know a little about the world of animations and CSS. It's time to start the tutorial.

CSS animations allow you to animate the transition between one CSS style and another. These animations consist of two components: a style which describes CSS animation and a set of frames that indicate its initial and final state, as well as possible intermediate points in it.

Each of these animations has a series of advantages:

• Its use is very easy for simple animations, you can do it even without having knowledge of Javascript.
• Animation displays correctly, even on low-power computers.
• Being controlled by a browser, it allows optimizing its performance and efficiency, thus reducing the frequency and executing the tabs in such a way that they are not visible.

Animation settings

To start an animation, first of all we will have to configure it. To do this, we will go to the property animation and to its sub - properties. This tool will allow us to configure both the rhythm and the duration of the animation and not even its sequence.

The sub - properties are:

animation - delay

Delay time between the moment the element is loaded and the beginning of the animation sequence.

animation - direction

Indicates whether the animation should go back to the start frame at the end of the sequence or whether it should start from the beginning when it reaches the end.

animation - duration

Indicates the amount of time the animation takes to complete its cycle (the duration)

animation - iteration - count

The number of times it is repeated. We can indicate infinite to repeat the animation indefinitely.

animation - name

It is used to specify the name that describes each of the frames of the animation.

animation - play - state

Allows you to be able to pause and resume the animation sequence.

animation - timing- function

It indicates the rhythm of the animation, that is, how the animation frames are shown, for this, acceleration curves are established.

animation - fill - mode

Specifies what values ​​the properties will have after the animation ends.

Set up the sequence with frames

Once we have configured the time, the nomenclature etc. It is time to offer a look or feel to our animation.

To do this, we will establish two new frames and use the rule @keyframes. With this, each frame describes how each element is found during the animation sequence.

To indicate the time and rhythm, the frame uses percentage and with from and toThanks to this, we can indicate when the beginning takes place with 0% and the end with 100%.

Frame and text animation

To add more frames and animate them with text, you need to apply a larger size of the header font so that the header increases as it moves for a set amount of time, and then decreases to its original size afterwards. For this we are going to establish the following code:

75% font - size: 300%; margn - left: 25%; width: 150%;

With this code, we suggest to the browser that in 75% of the sequence, the header has a left margin of 25% and a size of 200% with a width of 150%.

Animation repeat

To make an animation repeat, it is necessary to use the following property animation - iteration - count and we must indicate how many times we want it to be repeated. We can also use infinite so that it is always repeated.

Conclusion

As you have seen, in CSS you can create animated projects and you can enter it by following the steps we have given you. If you continue to inquire and inform yourself, you will discover that there are many options available to us.

Have you dared already?