Animating CSS and its features

Asking how to make a CSS animation , many users go to find lessons and instructions. And although you will find similar instructions here, among other things, we will give you the main useful advice in creating animation using CSS.

The secret of ideal designs

The main advice that can be given to those who want to learn to the full, what is the smooth animation of CSS, is this. With daily experiments with ready-made pieces of code, try to conduct your own experiments. In a time free from work on your own sites, try to see what happens when you fold a piece of code, to study a property in full. Try to implement all sorts of interesting ideas using completely different language tools, and the CSS animation will open up for you on the new side. This simple advice is the following - experiment yourself.

CSS appearance animation

And now let's move on to interesting examples. Typically, the standard use of animation is to change some elements of the site smoothly over time. But this is too trite, do not you think? Therefore, here we will share with you an extraordinary way of using the animation's appearance time.

The fact is that the actual changes on the site in a piece of animation or in its full form can be almost instantaneous. For this we assign two key frames, but we use a very small interval. For example, it can be equal to 0.001%. In this case, CSS animation can happen instantly. This is perfect for imitating any neon sign. This sign will flash, and if the CSS animation is still using transparency and the text-shadow property, the sign will be almost like a real one.

Here is an example code.

Improving the functionality of buttons

If we consider the question of how unusual the CSS animation of a button can be , then we can say that there are many options for decorating buttons on websites. Let us consider one example. The effect of the pressed convex button. The code example is below.

With this simple piece of code, the CSS block animation will look pretty good. It looks very interesting and is often used on perfect different sites.

CSS-animation when hovering over a site fragment

The more dynamic and modern the site, the longer the user remains on it. In addition, interactivity also plays an important role. Of course, this is true, but what can help make the site as interactive as possible?

Very good looks work with the design of elements and fragments of the site when you hover the mouse. The animation of buttons when hovering, we disassembled above, but in addition, you can "revitalize" and all kinds of pieces of the site, making them as stylish as possible. As with everything else, the main principle here is not to overdo it.

So, there is an excellent property of transition, which can take up to four related properties.

Within a certain time, CSS-animation when you hover on this piece of code will change. Time is determined by the duration property. That is, when you hover over an element, it starts to change in a peculiar way some property that we asked in the selector. For our case this is .element (dot ahead). Below is an example of a code that when changing from a div container that has a .hover pseudo-class, the background changes from red to green.

When you hover the user's mouse, the CSS animation does not change immediately, but with a delay of a fraction of a second, which creates an interesting effect.

In addition, if in the previous example you specified a rule that the background for the div element should change from red and go to green for 0.4 seconds, you should take into account that using the value all, you can refer to the entire property as a whole Immediately.

Example code is as follows.

As shown, the padding and background properties will have a transition effect, which is determined by the transition property. You should note that you can specify a certain set of values separated by commas.

A few nuances of using this type of animation on buttons

In principle, by and large, it is not so important in what order these values will be indicated and enumerated. Except for one case. We can deal with the delay property. In this case, we need to specify the length of time. In other words, we will need to provide in the code how long the delay we need is going to take place.

Remember, however, that some properties can not have the transition effect. That is, they can not be transitional. This is due to the fact that they may no longer be animated.

Text animation

With the help of code can be set and excellent animation of the text of CSS. This may be some article, and a major title, the title of the site. As already mentioned above, the main thing here is not to overdo it and not to turn your site into a dump that will look cheap.

Well, let's try to find out what the animation of CSS text is, and create it and text shadows. Perhaps you've seen horror films in which the names of the paintings themselves seemed to fade on some gloomy-dark background. Let's try to recreate something similar in the general example.

Animate text in the style of horror movies

Actually, the very idea is to make a text in which the letters would be slightly blurred and rotate. There must be space between letters. We will use inter-letter shadow, as well as an interval. In order to implement the idea, we need a Lettering.js script by Dave Rupert. It is needed to wrap words plus letters in several span tags. First, you need to wrap phrases in the h2 tag. Here is an example code.

Then wrap all the words in the h2 tags in the span tag.

It will happen like this.

It will look a little cumbersome, but do not be embarrassed by it.

Get a pretty insane structure.

As a result, we wrap each of the letters we have in the span tag. They turned out really a lot. But in the code above, the example is rather simplistic. You can write the entire structure yourself, and it will be somewhat larger. It depends also on which text you will use.

Finish our work with some small stylization. All our headings in the example above will be located in the full width of the screen. And they will occupy almost all the free space.

Since we are going to place all our letters in the center of the screen, for our container we also need a flexbox.

Let's give an example of his code.

Now we have done so that all the letters that are wrapped in the span class, which belongs to the parent class .os-phrases, will be located and will be fixed exactly in the center.

Do not forget to add a bit of free space, that is, the inter-letter spacing itself.

In this case, the first wrapper will have a certain additional property. This property is perspective. It will allow us to make it so that this section will, as it were, stand out, come to the fore.

The very same letters of ours will be transparent, and we'll run the animation interval for them somewhere in 5.2 seconds. Below is an example code.

It is also important to determine how and with what delay our offers and phrases will appear. Which part of the text will appear faster than the previous one, and how much. The code will look like this.

We will give a small, but very curious effect. Set the opacity to 0.2. The letter spacing will be quite large. The letters will also be slightly rotated along the Y axis. You and the users of your site will see only a small part of these letters. Also do not forget to give effect to the text-shadow property. Half the animation, we'll do an unusual thing. We'll sharpen the letters themselves, and also reduce the distance that lies between them, then increase the opacity, and then turn the signs to 0 along the Y axis.

In the end, we will add the disappearing letters again and somewhat scale them. This will again give a small blur effect.

And finally the last phrase of CSS-animation.

And yes, finally add the final touch. We will focus on some specific words. They will have a fat mark. This will give the necessary accent.

Do not forget about the sources of inspiration

When you try to experiment with CSS properties and animations, try to find inspiration in everything in everyday life. It can be anything, from an interesting web page to some wonderful video effect.

In addition, if you do not peek out how this or that effect is made, and try to recreate it yourself, you can achieve greater results. Or, at least, always learn something more about the capabilities of the programming language that you are actually using. Even the idea that you have not fully implemented may very well be very effective.