Wondering how to make CSS animations , many users go looking for lessons and instructions. And although you will find similar instructions here, among other things, we will give you the main useful advice in creating animations using CSS.
The secret to perfect engineering
The main advice that you can give to those who want to know fully what smooth CSS animation is is as follows. For daily experiments with ready-made pieces of code, try to conduct your own experiments. During the time free from work on your own sites, try to see what happens when you add one or another piece of code, to study this or that property in full. Try to implement all sorts of interesting ideas using completely different language tools, and CSS animation will open for you from a new angle. This simple tip is: experiment yourself.
CSS animation of the appearance
Now let's move on to some interesting examples. As a rule, the standard use of animation is to change some elements of the site smoothly over time. But this is too commonplace, don’t you? Therefore, here we will share with you an extraordinary way of using the time of appearance of the animation.
The fact is that real changes on the site in a piece of animation or in its full form can be almost instantaneous. To do this, we specify two keyframes, but we use a very small interval. For example, it may be equal to 0.001%. In this case, CSS animation can happen instantly. This is great for simulating any kind of neon sign. This sign will blink, and if the CSS animation also uses transparency and the text-shadow property, the sign will turn out almost like a real one.
Here is an example code.
Improving the functionality of buttons
If we consider the question of how unusual CSS animation of a button can be , then we can say that there are a lot of options for decorating buttons on sites. Consider one example. The effect of a pressed convex button. Sample code is below.
With such a 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 fragment of a site
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 so, but what can help make the site as interactive as possible?
The work with the design of elements and fragments of the site when you mouse over looks very good here. The animation of the buttons on hover we have reviewed above, but in addition to this, you can "revive" 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 transition property that can take up to four properties associated with it.
Over time, CSS animations will change when you hover over this piece of code. Time is determined by the duration property. That is, when you hover over any element, it starts to peculiarly change any property that we set in the selector. For our case, this is .element (dot in front). A little below is an example of code when, when switching to a container div that has the .hover pseudo-class, the background changes from red to green.
When you hover over the user’s 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 set a certain rule according to which the background of the div element should change from red and turn to green within 0.4 seconds, then note that using the value all, you can refer to the whole property right away.
An example code is presented as follows.
As shown, the padding and background properties will have a transition effect, which is determined by the transition property. You should consider that you can specify a whole specific 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 listed. Except for one case. We can deal with the delay property. In this case, we will need to indicate the duration in time. In other words, we will need to inform in the code how long the delay we need will take place.
Remember that some properties may not be with the transition effect. That is, they cannot be transitional. This is due to the fact that they may no longer be animated.
Text animation
With the help of the code, excellent CSS text animation can also be defined. This may be some kind of article, and a large headline, the title of the site. As mentioned above, the main thing here is not to overdo it and not turn your site into a landfill that will look cheap.
Well, let's try to find out what CSS text animation is and create it and text shadows. Perhaps you saw horror films in which the names of the pictures themselves seemed to fade against some kind of gloomy-dark background. Let’s try to recreate something similar using a general example.
Animating horror movie style text
Actually, the idea itself is to create a text in which the letters would be a little blurry and rotate. There should be a space between the letters. We will use the letter shadows as well as the spacing. In order to realize the idea, we need the script Lettering.js authorship of Dave Rupert. It is needed to wrap words plus letters in several span tags. First you need to wrap the 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 bulky, but let it not bother you.
The result is a fairly crazy structure.
As a result, we wrapped each of the letters we have in the span tag. It turned out really a lot. But in the code above, the example is quite simplistic. You can write the whole structure yourself, and it will be somewhat larger. It also depends on which text you will use.
We conclude our work with some small stylization. All our headers in the above example will be located across the entire width of the screen. And they will occupy almost all the free space.
Since we are going to arrange all our letters in the center of the screen, for our container we also need flexbox.
Here is an example of its code.
Now we have made it 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 little free space, that is, the letter spacing itself.
In this case, the first wrapper will have a certain additional property. This is a perspective property. It will allow us to make this site stand out, as it were, to the forefront.
Our letters themselves will be transparent, and we will start the animation interval for them somewhere in 5.2 seconds. Below is a sample code.
It is also important to determine how and with what delay our sentences and phrases will appear. Which part of the text will appear faster than the previous one, and how much. The code will look as follows.
Let's give a small, but very interesting 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, as well as users of your site, will see only a small part of these letters. Also remember to give the effect of the text-shadow property. In the half of the animation we will do an unusual thing. We will sharpen the letters themselves, and also reduce the distance that is located between them, then increase the opacity, and then turn the signs by 0 along the Y axis.
In the end, we again add the disappearing letters and scale them somewhat. This will give a small blur effect again.
And finally, the last phrase of CSS animation.
And yes, finally add the finishing touch. We focus on some specific words. They will have a bold outline. This will give the necessary emphasis.
Don’t forget about the sources of inspiration.
When you try to experiment with CSS properties and animations yourself, try to find inspiration in everything in everyday life. It can be anything from an interesting web page to some great video effect.
In addition, if you do not peep at how this or that effect is made, but try to recreate it on your own, you can achieve great results. Or, at least, you will always learn something more about the capabilities of the programming language that you actually use. Even an idea that you have not fully implemented may well prove to be very effective.