CSS Animation: Examples and Illustrations

Site design has always included the visible and invisible. The first was implemented by HTML / CSS layout, the second by JavaScript (client side). To choose a reasonable ratio means to choose the optimal time for launching a web resource into operation.

In modern informational Internet space, time is of the essence, and time for developing a website is even more so. In fact, an Internet resource is an idea that is more or less clear and formalized initially. Developer care: as quickly as possible to translate it into virtual reality. Even in cases where the development process is associated with the refinement of the idea or technical task, the creation of the visible part can be performed in most cases at once.

CSS Rule Features

Animation is not so much a common practice as an urgent need. If before the functionality of the resource mattered, today it should be properly designed visually. Static pages are not enough for anyone, the visitor should feel that the site feels its actions and reacts to them adequately.

There are a lot of opportunities and options to revitalize the site’s pages, and it’s not at all necessary to spend time developing your own unique code, as a rule, it is always about JavaScript (browser, client side). The involvement of the server side (PHP, Perl, other platforms) is less important, although depending on the specifics of the task, you can do animation from a distance, that is, from the server.

CSS Animation is the best solution when you need to make a design quickly, efficiently and modernly with minimal time:

css animation

This illustration shows how easy it is to implement animation with simple CSS rules.

General syntax of the animation rule

The animation rule is only five (seven) positions: * -name, * -duration, * -timing-function, * -delay, * -iteration-count, * -direction, * -play-state; where * is the name of the rule - animation with or without a browser prefix.

Using the rule is very simple. Usually use a single line entry, separating the values ​​with a space, indicating them in the order listed above. For fidelity, you can set the rule element by element. If necessary, specify the browser prefix. In any case, the animation for cross-browser compatibility and general performance should be properly tested.

Before planning the use of animation, you should consider applying other, simpler rules and ideas: transition, transform, regular gif, etc.

css animation on hover

Animation is a good rule, but in developing it you still have to plan a sequence of frames, and if there are a large number of them, it will not be too good for the browser, and for the developer the customer’s demand to change something will take time.

@keyframes - animation frames

First of all, it should be noted that the animation here is made up of frames indicated by the sequence: from, 10%, 20%, ... 80%, to. Here from and to is the starting and ending points, and between them you can manipulate the numbers with any step, naturally, in a reasonable amount and reasonable limits.

In this case, @keyframes opacity {...} addresses the animation to the opacity property, which, as you know, is responsible for the transparency of the contents of the tag. There is an interesting point: each frame of the animation changes the value of this property, but it can also change the values ​​of other properties of the style to which it is applied:

css animation on hover

The first two steps of the animation are shown here: from and 10%, the rest are done in the same way. The first step is the initial values ​​of the rules relevant to this animation, all subsequent ones contain the modified values ​​of these rules.

CSS Animation: Specific Syntax

The animation rule includes the main positions:

  • notation (optional rule name);
  • the duration of one cycle;
  • temporary function (linear, ease, ease-in, ease-out, ease-inout, nease-out, cubic-bezier);
  • delay the start of the process;
  • number of iterations.

These positions are enough to get a stunning effect.

It is important to keep in mind that any CSS animation is not a syntax. This is the developer's imagination based on the ideas of the customer or without them.

It should be aware of (in the development of personnel): we are talking about the drawn "cartoon", everyone has ever done this on the pages of the book, drawing in the corners of the figures, shifting or changing something on each next one. Quickly scrolling through the corner, you can see the movement.

The disadvantages of "hand-drawn" animation

Just as in reality, the drawn animation on the corners of the leaves of a book requires another (clean) book to change, so in the case of CSS animation, you will have to redo the sequence and content of frames when you need to change something.

For this simple reason, one should not get involved in the multiplicity of rules of each step, and apply the possibility of combining one or another rule by step. Everything should always be very simply invented and even more simply written.

css text animation

It is important to understand: the purpose of CSS is to provide a set of simple rules for page layout.The less rules are used for each identifier or class, the less identifiers and classes are created, the better.

CSS animations are always manual work. Even when using a site management system, the addition of a site with an animated element means that it is tied to the specifics of the application area, if we are not talking about buttons, menus, or the implementation of other traditions.

css appearance animation

Creating a "beauty" on the page, it is always desirable to keep in mind that you will need to change it.

Points and forms of animation application

CSS hover animationon the company logo - a great solution. This not only always works, but the guest is always waiting, especially for the first time visiting resource. A new person, a new look, a fresh opinion - the psychology of the visitor is his most significant resource.

Using a simple, but original, animation of the company's logo and descriptions of its main positions in the business (goods, services, supply methods, promotions, discounts, etc.), you can attract a new client right away.

CSS text animation is a good design move, but it should be used when the usual layout features are not possible to apply, or they limit the imagination. For example, the tagmarquee with a set of css rules.

Text movement on the screen (including another version of its animation) is an old, practical idea, but significantly dependent on the scope of the site. If it is not necessary, it is better not to remember about it today.

Appearance CSS animation is the most practical, simple and psychologically sought-after idea. If you do not talk about original solutions, when mouse movement can leave a mark in the browser window (tags + pseudo-class: hover), then the classic option to highlight the product selected by the client, show the product in work, ... is a good solution.

css button animation

The smooth appearance of the page elements is not so much, but it has become popular due to the general trend of dynamism in the field of site building as a whole. AJAX technology makes pages dynamic. Content is not loaded entirely, but comes to the visitor's browser in parts. A good reason to use the manifestation effect.

Animation button. CSS is just made for this. There was not yet a coder and, by and large, even a PHP or JavaScript developer (specializations very far from CSS rules) who would not have spent a couple of days to create their own masterpiece that has signs of animation, or an element on which a classic , but still touching Hello world, I'm a button!

Button theme is definitely interesting.However, the widespread proliferation of mobile and other devices to which it is not yet possible to connect a mouse, suggests to animate the button topic within practical intelligence.

The best scope of CSS-animation is still the following: the name and scope of the company, its services, products and position in relation to the client.

Related news

CSS Animation: Examples and Illustrations image, picture, imagery


CSS Animation: Examples and Illustrations 91


CSS Animation: Examples and Illustrations 50


CSS Animation: Examples and Illustrations 18


CSS Animation: Examples and Illustrations 13


CSS Animation: Examples and Illustrations 4