Animation CSS examples and finished code. Animating UIs with CSS Css animation examples

| 18.02.2016

CSS3 opens up unlimited possibilities for UI designers, and the main advantage is that almost any idea can be easily implemented and brought to life without resorting to the use of JavaScript.

It's amazing how simple things can spice up an ordinary web page, making it more accessible to users. We are talking about CSS3 transitions, with which you can allow the element to transform and change the style, for example, on hover. The nine CSS3 animation examples below will help create a responsive experience on your site, as well as improve general form pages thanks to beautiful smooth transitions.

For more detailed information, you can download the archive with the files.

All effects work with the transition property. transition- "transition", "transformation") and a pseudo-class: hover , which determines the style of the element when the mouse cursor is hovered over it ( in our tutorial). For our examples, we used a 500x309 pixel div, an initial background color of #6d6d6d, and a transition duration of 0.3 seconds.

Body > div ( width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; )

1. Change color on hover

Once upon a time, the implementation of such an effect was quite painstaking work, with mathematical calculations of certain RGB values. Now it is enough to write down css style, in which you need to add the pseudo-class: hover to the selector and set the background color, which will smoothly (in 0.3 seconds) replace the original background color when you hover over the block:

Color:hover ( background:#53ea93; )

2. The appearance of the frame

An interesting and bright transformation is the inner frame that smoothly appears when you hover over the mouse. Good for decorating various buttons. To achieve this effect, we use the :hover pseudo-class and the box-shadow property with the inset parameter (sets the shadow inside the element). In addition, you will need to set the shadow stretch (in our case it is 23px) and its color:

Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )

3. Swing

This CSS animation is an exception, as the transition property is not used here. Instead, we used:

• @keyframes is a basic directive for creating a frame-by-frame CSS animation that allows you to do so-called. storyboard and describe the animation as a list of key points;
• animation and animation-iteration-count - properties for setting animation parameters (duration and speed) and the number of cycles (repetitions). In our case, repeat 1.

4. Decay

A fade effect is basically just changing the transparency of an element. The animation is created in two stages: first you need to set the initial transparency state to 1 - that is, full opacity, and then specify its value when you hover the mouse - 0.6:

Fade ( opacity: 1; ) .fade:hover ( opacity: 0.6; )

For the opposite result, swap the values:

5. Zoom

To make the box grow larger on hover, we will use the transform property and set its value to scale(1.2) . In this case, the block will increase by 20 percent while maintaining its proportions:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Reducing

Reducing an element is just as easy as increasing it. If in the fifth paragraph, to increase the scale, we needed to specify a value greater than 1, then to reduce the block, we simply specify a value that will be less than one, for example, scale(0.7) . Now, when hovering the mouse, the block will proportionally decrease by 30 percent of its original size:

Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. Transformation into a circle

One commonly used animation is a rectangular element that transforms into a circle when hovered over. With the CSS property border-radius , used in conjunction with :hover and transition , this can be done without any problems:

Circle:hover ( border-radius: 70%; )

8. Rotation

A funny animation option is to rotate an element by a certain number of degrees. To do this, we again need the transform property, but with a different value - rotateZ(20deg) . With these parameters, the block will be rotated 20 degrees clockwise relative to the Z axis:

Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )

9. 3D shadow

Designers disagree on whether this effect is appropriate in flat design. However, this CSS3 animation is quite original and is also used in web pages. We will achieve a three-dimensional effect using the box-shadow properties already familiar to us (it will create a multilayer shadow) and transform with the translateX (-7px) parameter (will ensure the block is shifted horizontally to the left by 7 pixels):

threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX( -7px); transform: translateX(-7px); )

Browser Support

The transition property is currently supported by the following browsers:

The rest of the properties used in these examples, such as transform , box-shadow , etc., are also supported by almost all modern browsers. However, if you are going to use these ideas for your projects, we strongly recommend that you double-check cross-browser compatibility.

We hope that these css examples 3 animations were helpful for you. We wish you creative success!

). CSS3 provides us with another more powerful tool creating an animation that is not limited to performing a single transition, but allows you to create unlimited number of such transitions.

In other words, animation allows us to transition from one state (set of properties) to second, from second To third, and even optionally play the animation in reverse when the transition count is complete.

Similar to transition effects, in order for an animation to play, you need to trigger it, whether it's the initial page load, or an element gaining focus, moving the mouse pointer over an element, and so on.

Stages of creating animation

Let's look at what the process of creating animation in CSS consists of. First you need to define keyframes for the animation. What is a keyframe? Imagine an element that is positioned to the left of the browser window and you need to animate it to the middle of the window and return it to its original position. For this animation, we need three keyframes:

• First– defines the initial position of the element.
• Second– determines the position of the element after the element has been moved to the middle of the window.
• Third- defines the end point of the animation (the initial position of the element).

Once the required keyframes have been defined, it will be up to the user's browser to draw all the intermediate phases that we have defined with keyframes. That is, the task of drawing the element in these gaps lies solely with the browser, on our part it is only necessary to indicate these animation points, or in other words, we must tell the browser how it should change one style to another between keyframes.

The next step is to assign the animation to the element or elements of interest. In this case, it is possible to specify for each element its own customization animations.

Later in this article, we will take a detailed look at how to set an animation delay, how to set the number of animation cycles, set its duration, specify its speed and direction, the state of the animation at the current moment, and even determine the style for the element at the moment when the animation is not playing. .

Before we move on to creating animations, I want to draw your attention to the current support of animation properties by browsers:

Definition of keyframes

The result of our example:

Consider the following example in which we will create several different animations and assign them to the same element.

In this example, we created several animations in which the element's width gradually increases, the background color changes, the element's negative tilt relative to the axis X(horizontal axis) to the middle of the animation and reducing the element to the original size of the element by the end of the animation, which is accompanied by a change in the background color and tilting the element along the axis X reversed.

The result of our example:

Number of animation cycles

By default, any animation in CSS will play. just one time. Thanks to the animation-iteration-count property, we can specify how many times the animation loop will play, it can be as an arbitrary number of times, or specify that the animation will play indefinitely, in some cases this is very useful.

Please note that negative values ​​are not allowed for objective reasons, but it is allowed to specify non-integer values, in this case only a part of the animation cycle will be played - in proportion to the specified value (for example, the value 1.5 corresponds to playing the animation cycle one and a half times).

Consider the following example:

In this example, we have created a simple animation in which using CSS top property offset elements with relative position relative to the top edge of the current position, while changing the background color of the element.

The practice of developing web resources has led to two significant trends: speed and the idea of ​​quality. The first obliges the developer to do his work quickly, the second defines the boundaries of what is expedient.

The visitor has a specific goal when visiting the site and is guided by generally accepted ideas about where something is and how it should work. The developer can do his job as he likes, but if he is interested in attracting the attention of a larger number of visitors, then it is inappropriate not to take into account their opinion.

Syntax and semantics of animation

The CSS animation property is easy to use and allows you to quickly achieve interesting effects. In order for the elements of a web page to behave in a modern way, as the visitor expects, it is not at all necessary to be especially smart and design your own animation options. Everything works by definition, as expected and required.

V this example two elements are described. The first is an indicator strip that moves to the right and proportionally increases in size. The second element is a picture that simply moves to the right.

Not all frames are shown here. The property in this case is implemented smoothly. The visitor of the page observes a smooth movement with an increase in the volume of the line and the movement of the picture. Using various options movement instead of the ease-in-out type, you can control the movement. The ease-in-out option gives you acceleration at the beginning and deceleration at the end, but you can choose another movement option.

Overlay and Interaction of Elements

All elements that have an animation property are considered by CSS independently of each other and from the overall flow of the page. If the elements are superimposed on each other, then a combination of effects is obtained and, as a result, a new effect is obtained.

If during the animation the elements change their property, then due to the laws of color overlay, you can get very original effects with just two or three elements.

The drawing of the element is of great importance. In the given example, the strip is formed from a picture in which two lines of different colors. When the size of the strip increases, this is a saw; when the saw moves, it is a moving wave. By manipulating the lines and their slope, you can create effects according to the general laws of graphics.

Changing the animation timing also leads to non-standard solutions. Using a transform property, such as the element's rotation function, generates original changes. Example:

Here the strip continuously changes its appearance from an opaque state to a transparent one. The bottom picture only changes the shape.

Information Animation

In CSS: text animation has a special meaning. Text always matters and is present on a web page with a specific purpose. But the text is always less informative than the image, and takes up a lot of space.

The guarantee that the correctly written text will be adequately perceived by the visitor is much higher than the hope for the correct understanding of the image, especially when the site designer has his own idea of ​​the forms of meaning expression.

If earlier, when CSS animation just came to the world of layout, scrolling lines, flashing clocks, pulsating texts were popular, then in modern site building the principle is considered normal: without annoying the visitor, present the functionality of the web resource as effectively as possible.

In this context, any of the examples above are handy for presenting textual information, but using CSS as a 3D animation is the most practical.

Here, in the "normal" state, the text takes up little space. You can highlight the main word or designate the meaning. As soon as the mouse lands on the text area, it unfolds from the CSS 3D animation to its normal readable state.

The space-saving option combined with the 3D design allows information to be placed compactly. The vacated space can be used for other or related purposes. Through CSS animation necessary information will be available at the right time.

Custom Animation Option

Notable advances in the creation of quality web resources still leave one strangely posed question out of the question: why is the design of the site a developer's concern?

The site is not piece of art and not the result of a creative process for purposes of an aesthetic nature. A site is, first of all, a functionality that, according to the owner (developer), will bring new visitors to it and will provide an opportunity to work with their clients.

Sell ​​a product, provide a service, perform this or that work... A visitor comes for goods, services and works. Design and animation are important, but the opinion of the visitor is still more important than the opinion of the owner (developer).

If in a regular store the buyer is always right, then why in an online store does he have to do everything the way the developer came up with through the proposed design option? Animation in the context of CSS is a great tool, but why not go a little further: as many consumers, as many options for expressing functionality and design.

The "consumer animation" variant is when there is both what the developer suggested, and what previous consumers chose, and what the current consumer thought of.

Hello friends! Today we will look at an interesting topic - creating CSS animations using a real example. This tutorial will culminate in creating a beautiful CSS animation for a million dollar logo.

cool

Pin it

Lesson materials

• Sources: Download
• Basic example from the tutorial: https://codepen.io/agragregra/pen/PKNavm
• Starter template from the lesson: https://github.com/agragregra/optimizedhtml-start-template

A bit of theory

Before you start creating an animated example, you should refer to the basics CSS Animations, consider basic terms, properties and rules css creation animations.

If you have already had experience creating animations in any applications such as Adobe After Effects or aged Flash Professional(now Adobe Animate), then you should be familiar with concepts such as "Keyframes", "Temporal functions or motion dynamics", which, as in any other area of ​​animation, apply to animating elements on a page using CSS. However, unlike working with application interfaces, you create your CSS animation by writing code in an editor.

@keyframes css rule

Creating a CSS animation starts by declaring the name of the animation in a block @keyframes and defining so-called animation steps or keyframes.

To review the theory and foundations, we will use pure CSS, and in the future, already on more complex example enable the use of the Sass preprocessor. You can learn more about Sass in the tutorial. In addition, for a deeper understanding of the basics of CSS, I also recommend that you read the lessons “CSS Basics - A Guide for the Littlest Ones” and “All CSS Selectors in One Lesson”

Let's take a look at the @keyframes structure and working with keyframes in simple example:

@keyframes turning ( 0% ( border-radius: 0 0 0 0; transform: rotate(0deg); ) 25% ( border-radius: 50% 0 0 0; transform: rotate(45deg); ) 50% ( border- radius: 50% 50% 0 0; transform: rotate(90deg); ) 75% ( border-radius: 50% 50% 50% 0; transform: rotate(135deg); ) 100% ( border-radius: 50% 50 % 50% 50%; transform: rotate(180deg); ) )

In the first line we see that after keyword@keyframes is called "turning". This is the name of the block of keyframes, which we will refer to below.

After the declaration, a curly brace opens (in this example, on pure CSS), in which properties are written sequentially from 0% to 100% for each key frame. Please note that between 0% and 100% you can insert as many intermediate values ​​as you like, be it 50%, 75% or even 83%. This is very similar to the timeline of an animation application, where you can add any intermediate state between two states.

Further, this block of code with keyframes can be applied to any CSS selector, but most often they are prepared for a specific selector, if we want to achieve a certain behavior from the desired block.

Referencing a block of keyframes

After we have set the keyframes for the object (in real life this is done in parallel or even after referring to the block with keyframes), we can turn to our newly made block. Let's look at the following simple code from the example above:

Div ( width: 120px; height: 120px; background-color: violet; margin: 100px; animation: turning 2s ease-out 1s infinite alternate; )

Nothing special until the last line. Here we define how the object will look initially and in the last line of the block we refer to the block of keyframes called "turning":

Animation: turning 2s ease-out 1s infinite alternate;

If everything is relatively clear with the definition of keyframes, then this line needs an immediate explanation. As we can see, the "animation" CSS property comes first. This is a shorthand notation, such as the "margin: 20px 30px 40px 50px" property, which can be split into several separate properties:

By this analogy, the "animation" composite property can be broken down into several separate properties:

Most often, experienced developers do not write all these properties separately, but use a short notation and its structure is as follows:

animation: (1. animation-name - name) (2. animation-duration - duration) (3. animation-timing-function motion dynamics) (4. animation-delay - pause before start) (5. animation-iteration-count - number of executions) (6. animation-direction - direction)

Animation: animationname 2s linear 1s infinite reverse

From the example, we see that we refer to the @keyframes animationname block, set the duration of the animation to 2 seconds, the dynamics are linear, the pause before starting is 1 second, the animation repeats endlessly and runs in the opposite direction.

As I said earlier, shorthand begins with the property " animation”, followed by values, the sequence of which is better not to forget, so that there is no confusion when writing CSS animations.

However, most of these properties can be omitted, since most of the time their default values ​​will satisfy most animation tasks. Some of them can be omitted, but the rest should be indicated in the order that we considered earlier. In general, for the functioning of your animation, just two parameters in your compound property are enough - the title ( animation-name) and duration ( animation duration).

Last update: 06.11.2016

Animation provides great opportunities for changing the style of an element. When transitioning, we have a set of properties with initial values ​​that the element has before the transition begins, and end values ​​that are set after the transition is completed. Whereas during animation we can have not only two sets of values ​​- initial and final, but also many intermediate sets of values.

Animation is based on the successive change of key frames (keyframes). Each keyframe defines one set of values ​​for the properties to be animated. And the successive change of such keyframes will actually represent the animation.

In fact, transitions use the same model - two key frames are also implicitly defined - the start and end, and the transition itself represents the transition from the start to the end key frame. The only difference in the animation in this case is that many intermediate keyframes can be defined for the animation.

In general, a CSS3 keyframe declaration takes the following form:

@keyframes animation_name ( from ( /* initial CSS property values ​​*/ ) to ( /* final CSS property values ​​*/ ) )

The @keyframes keyword is followed by the name of the animation. Then in curly braces at least two keyframes are defined. The block after the from keyword declares the start keyframe, and after the to keyword, the block defines the end keyframe. Within each keyframe, one or more CSS properties are defined, similar to how a normal style is created.

For example, let's define an animation for the background color of an element:

In this case, the animation is called backgroundColorAnimation . Animation can have an arbitrary name.

This animation provides a transition from a red background color to blue. Moreover, after the animation is completed, the color that is defined for the div element will be set.

To attach an animation to an element, its animation-name property is applied in its style. The value of this property is the name of the applied animation.

Also, using the animation-duration property, you must set the animation time in seconds or milliseconds. In this case, the animation time is 2 seconds.

With such a definition, the animation will start immediately after the page is loaded. However, you can also trigger an animation based on a user action. For example, by defining a style for the :hover pseudo-class, you can define an animation to start when the mouse pointer is over an element:

@keyframes backgroundColorAnimation ( from ( background-color: red; ) to ( background-color: blue; ) ) div( width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: # ccc; ) div:hover( animation-name: backgroundColorAnimation; animation-duration: 2s; )

Lots of Keyframes

As mentioned above, animation, in addition to two standard key frames, allows you to use many intermediate ones. The tween frame is determined by the percentage value of the animation in which this frame should be used:

@keyframes backgroundColorAnimation ( from ( background-color: red; ) 25%( background-color: yellow; ) 50%( background-color: green; ) 75%( background-color: blue; ) to ( background-color: violet ; ) )

In this case, the animation starts with red. After 25% of the animation time, the color changes to yellow, after another 25% - to green, and so on.

You can also animate several properties in one keyframe at once:

@keyframes backgroundColorAnimation ( from ( background-color: red; opacity: 0.2; ) to ( background-color: blue; opacity: 0.9; ) )

It is also possible to define several separate animations, but apply them together:

@keyframes backgroundColorAnimation ( from ( background-color: red; ) to ( background-color: blue; ) ) @keyframes opacityAnimation ( from ( opacity: 0.2; ) to ( opacity: 0.9; ) ) div( width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: #ccc; animation-name: backgroundColorAnimation, opacityAnimation; animation-duration: 2s, 3s; )

The value of the animation-name property is a comma-separated list of animations, and the animation-duration property is also a comma-separated time of these animations. The name of the animation and its time are matched by position, so the animation opacityAnimation will last 3 seconds.

Animation Completion

In general, after the time interval specified by the animation-duration property ends, the animation also ends. However, with additional properties, we can override this behavior.

For example, the animation-iteration-count property determines how many times the animation will repeat. For example, 3 repetitions of the animation in a row:

animation-iteration-count: 3;

If you want the animation to run an infinite number of times, then this property is set to infinite :

Animation-iteration-count: infinite;

When you repeat, the animation will start again from the starting keyframe. But with animation-direction: alternate; the opposite direction of the animation on repeat. That is, it will start from the end keyframe, and then there will be a transition to the start frame:

Animation-name: backgroundColorAnimation, opacityAnimation; animation-duration: 2s, 2s animation-iteration-count: 3; animation-direction: alternate;

When the animation ends, the browser sets the style of the animated element to what it would have been before the animation was applied. But the property animation-fill-mode: forwards allows you to set the final value of the animated property to exactly the one that was in the last frame:

Animation-name: backgroundColorAnimation; animation-duration: 2s; animation-iteration-count: 3; animation-direction: alternate; animation-fill-mode: forwards;

Animation Delay

Using the animation-delay property, you can define the animation delay time:

Animation-name: backgroundColorAnimation; animation-duration: 5s animation-delay: 1s; /* 1 second delay */

Animation Smoothness Feature

As with transitions, you can apply all the same easing functions to animations:

linear : linear easing function, property changes uniformly over time

ease : an ease function where the animation speeds up towards the middle and slows down towards the end, providing a more natural change

ease-in : ease function that only speeds up at the beginning

ease-out : an ease function that only speeds up at the beginning

ease-in-out : an ease function where the animation speeds up towards the middle and slows down towards the end, providing a more natural change

cubic-bezier : cubic bezier is used for animation

The animation-timing-function property is used to set the easing function:

@keyframes backgroundColorAnimation ( from ( background-color: red; ) to ( background-color: blue; ) ) div( width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; animation-name: backgroundColorAnimation ; animation-duration: 3s; animation-timing-function: ease-in-out; )

animation property

The animation property is a shorthand way of defining the above properties:

Animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode

The first two parameters, which provide the name and time of the animation, are required. The rest of the values ​​are optional.

Let's take the following set of properties:

Animation-name: backgroundColorAnimation; animation-duration: 5s animation-timing-function: ease-in-out; animation-iteration-count: 3; animation-direction: alternate; animation-delay: 1s; animation-fill-mode: forwards;

This set will be equivalent to the following animation definition:

Animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;

Create an animated banner

As an example with animation, let's create a simple animated banner:

There are three animations running at the same time. The "banner" animation changes the background color of the banner, and the text1 and text2 animations show and hide the text using transparency settings. When the first text is visible, the second is not visible and vice versa. Thus, we get the animation of the text in the banner.