Nine simple CSS3 animation examples. Smoothly Animating Objects Using CSS Only (5 Examples)

Hello, dear readers. On this day, let's talk about a rather interesting thing called CSS animation. That is, this animation of elements is done only using styles and no scripts are used here.

As you can see, there is an attribute here :hover, which changes the background style on hover; in some examples it should be required.

Smoothly change the color of an element on hover using transition

#box1 (
margin-bottom: 5px;
background-color: #ccc;

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: background-color 0.8s 0.1s ease;
-o-transition: background-color 0.8s 0.1s ease;
-webkit-transition: background-color 0.8s 0.1s ease;
cursor: pointer;)

#box1 :hover {
background-color: #97CE68;
color: #333;
}

As you can see, we achieved this animation using the attribute transition. Here you can change the animation speed in seconds, in in this case costs 0.8s to complete change colors when hovering and 0.1s before the animation works after hovering and removing the cursor. (Sorry for the puzzle :-)) This value can be changed as you need.

The background color on hover is set as an attribute :hover, it is required here, otherwise the animation will not work.

Resizing an Element

#box2 (
margin-bottom: 5px;
background-color: #ccc;
color: #333;

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
cursor: pointer;)

#box2 :hover {
background-color: #97CE68;
color: #000;
width: 150px;
height:50px;
}

In this example we have achieved smooth change block size on hover. The standard value is 200 by 100, and the hover value is 150 by 50, which is specified by the attribute :hover.

Here you can also change the block only in width or height, you just need to :hover delete width:— the block changes only in height, height:— the block changes only in width.

You can also change the rate of change. In this case it is 1s.

Object torsion

#box3 (
margin-bottom: 5px;
background-color: #ccc;
color: #333;

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s 0.1s ease-in;
-o-transition: all 1s 0.1s ease-in;
-webkit-transition: all 1s 0.1s ease-in;
cursor: pointer;)

#box3:hover (
background-color: #97CE68;
color: #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

Torsion occurs using transform And transition. In this case, the object rotates clockwise 360 ​​degrees at a speed of one second. If you want the block to rotate counterclockwise, transform value should be set to - (minus). Naturally, the degree of rotation can be changed.

Smoothly zooming in and out of an object

#box4 (
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-webkit-transition: all 3s ease-out;
cursor: pointer;)

#box4:hover (
background-color: #97CE68;
color: #000;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
}

In this example, the block smoothly increases in size by 2 times. This value is set transform: scale(2). If you set the value to 1.5, the block will be enlarged by 1.5 times.

In the same way you can reduce size block, for example set the value to 0.5.

Smooth block shift down

#box5 (
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
cursor: pointer;)

#box5:hover (
background-color: #97CE68;
color: #000;
-webkit-transform: translate(0.50px);
-moz-transform: translate(0.50px);
-o-transform: translate(0.50px);
}

Here the movement is specified in pixels. In this case (0.50px). You can also make the block rise up with this value of 0.-50px. Or diagonally down 50px,50px. In a word, the block can be made to move anywhere.

That's basically all I wanted to say. No, not everything :-) I forgot to remind you that this CSS animation can be applied to any objects on the site: pictures, text, headings, icons, etc. For links, a smooth color change is perfect; in my opinion, it’s very beautiful. :-)

And also, this information was shared with us by the site shpargalkablog.ru. For which I thank him very much.

That's all for sure now :-) See you soon, friends.

This collection contains the best and highest quality CSS features. Here you can find various and amazing demo examples and techniques from famous layout designers and designers who are trying to prove that it is now possible to do almost everything using only pure CSS. You can also find several lessons here that tell you in detail how to make such a creation. I hope that this collection will be useful to you.

CSS 3D clouds

In this demo you will be able to create and edit fancy clouds in 3D. These CSS clouds make it clear to us that the possibilities of web technologies are almost limitless.

Pure CSS logos

These are examples of logos made only with pure CSS. Just think about it, no images were used in its creation. It's just something.

Alphabet with CSS animation

Excellent and artistic example using CSS in alphabet

3D navigation for the site

A simple but very stylish navigation bar for the site, of course made using only CSS3. no images or scripts.

Google Doodle with CSS

One of the many doodles from Google search engine, made in CSS. This is a great example quality use CSS Animations

Slider

A well-made and high-quality image slider. Plus 4 examples in the demo.

Double animated ring

A beautiful animated and multi-colored ring with not much CSS code

Blur in CSS

It seems to me very required filter, especially since it is made in pure CSS. Using blur, you can draw the user's attention to a certain point.

The Complete Guide to Flexbox

This article is about responsive Flexbox blocks. It talks completely about these blocks, although the article is in English.

Colorful and animated menu using CSS3

A beautiful drop-down menu for a website with icons. A huge plus is that it is made entirely in CSS.

CSS filters

High-quality material in English that talks about using CSS filters on images.

CSS forms

Post about CSS forms with numerous examples

Progress bars in CSS

A lesson on how to create stylish progress bars using pure CSS and animation. You can also look at the example and download the sources.

Animation - Animate.css

The most popular CSS animation project on the Internet today. And probably the simplest and highest quality, and also free.

Loading indicators - Spinkit

To be honest, these indicators have already been seen on the blog, but it seems to me that they are worth showing you again. Since these are the most beautiful indicators on the Internet using CSS.

Buttons

Nowadays it’s hard to surprise with CSS buttons, but this is a pretty decent option

Generator for creating switches

Small and high quality internet an application with which you can create beautiful switches for use on the site.

Tooltips

CSS library for free tooltips - Hint.css

Color schemes

Color schemes for people who don't like to dig into code

Hi all. I recently came across a series of very useful and interesting video tutorials on the topic “ CSS animation" But bad luck, all the videos were on English, and probably not every layout designer knows English at a sufficient level to understand and assimilate all necessary information. Therefore, I decided to translate these lessons for you (or rather, make a free translation). No need to thank. So:

1. CSS animation. Introduction + transition property(This article)
2. CSS animation. Keyframes - coming soon
3. When and why to use CSS animations? - coming soon

What is CSS animation?

Before I tell you how to make CSS animations, and why they are needed at all, I would like to first explain to you, what's happenedCSS animation, give a definition or something.

Animations on the web have two main ideas. First idea - bring something to life. You're like Dr. Frankenstein. You have a lifeless monster and you breathe life into it. Second - motion visualization. AND keyword here it is precisely “movement”.

How to animate?

CSS has two main tools with which we can move elements around a web page. The first one (which we will talk about today) is the property transition. First of all, it is with its help that we create animations in CSS. The second tool is property animation paired with keyframes(@keyframes – key frames). We will look at this tool in more detail in the next lesson, but right now we will look at CSS property transition. And then we'll talk about what should be animated on the page (when the user needs it) and what should not be animated (when the animation looks stupid and inappropriate), based on user experience(UX - user experience).

CSS transition property - parameters and values

Syntax

First, let's look at how this property is read and understand its syntax. We write this property something like this:

transition: [property] [duration] [timing function] [delay] ;

transition: height 1s ease-out 0.2s ;

We assign this property to the element we want to animate. This element gets smooth transition(or stepwise) between several of its states (for example, height 100 pixels and height 200 pixels). And what this one will look like transition(from English transition), will depend on the parameters that we give it.

The first parameter (value) of the transition property is another property element to be animated (for example, height).

The second parameter is the duration (duration) of the animation, that is, how long it will take for the element to transition from one state to another (for example, 2s or 2000ms).

The third parameter is timing function [timingfunction] (ising function [ easingfunction]). How the intensity of the animation will be distributed throughout the entire time. For example, an animation can start abruptly, and then slow down at the end and end the transition smoothly. Can be used as keywords (for example, easeease-in-out,linear), and Bezier cube functions (for example, cubic-bezier(0.17, 0.67, 0.83, 0.67)). You can easily and conveniently customize the Bezier cube on this resource http://cubic-bezier.com, as well as the steps function in order to create frame-by-frame animation (step-by-step).

And finally, the parameter delay. Animation delay is the amount of time you have to wait before the animation (in our case, a transition) starts.

CSS transition animation example

Let's look at this CSS example animations:

transition: opacity 300ms ease-in-out 1s;

Here we animate only the property opacity(opacity). This means that if the element we are going to animate has other properties, such as height, width or color, and even if these properties differ in different states element, then smooth transition(animation) will only be available opacity properties. Do you understand?

Instead of a specific property, you can also use the keyword " all" This means that we animate absolutely all properties of the element that were changed in the new state of the element (not just opacity), and which can be animated at all. Because, as you know, not all properties can be animated. But more on that a little later.

Second parameter ( 300 ms) tells us that the animation will only last 300 milliseconds. That is, the element will quickly appear or quickly dissolve, depending on the property values ​​in its two states.

Timing function ( ease-in-out) with the third parameter will make the beginning and end of the animation smoother.

Delay ( 1 s) shows how late the animation must be before it fires.

In general, this is the formula for how we will record transition animation. This is the syntax. If necessary, you can add more than one [property] transition for one element. For example, you can animate with different parameters changing the height and width of an element. To do this, in the transition property, instead of a semicolon at the end, put just a comma and write parameters for another property. And don't forget to put a semicolon at the end afterwards to make it work.

What can you animate in CSS?

So far we have only discussed the syntax of the transition property. Now let's talk about properties, which ones we can animate and which ones we can't. Because there are some things that just don't make sense to animate, and some properties just can't be animated.

Animable Properties

Take, for example, properties such as:

1. font-size;
2. background-color;
3. width;
4. left (how far from the left side the element can be moved [positioned]…

Obviously, it makes sense to animate these properties. If you change their values, it will change the element visually. If you change the font size from, say, 14 to 28 pixels, you will see that the font gradually increases in size and an animation occurs that lasts for some time. Animation always makes sense if the property values ​​are clear (most often numeric) values. If you increase the font size to 100 pixels, you can clearly see the letters growing. A smooth change in background color can also be observed [because color on the web has a numerical code, for example, red rgb(255,0,0)]. These properties are animated.

In general, remember, if you imagine that it is animated, then it can be animated. Most often this works.

Non-animable properties

And here is a list of properties that cannot be animated (example):

1. display;
2. font-family;
3. position...

These are some of them that I took as an example so that you can feel the difference between animable and non-animable CSS properties.

Let's take display. Can you imagine how visually the change between " display:block;" And " display:inline-block;"? How can the appearance of an element smoothly change between " position:relative;" And " position:absolute;"? No, of course, the element will look different if these properties are changed. But how can you imagine transition? You can't do that. Right? You can't imagine turning font Helvetica in font Georgia, every letter, it just won't work. You can change these fonts, but they will change abruptly and no animation will occur.

Animation Performance in CSS

In general, many properties are animated, but some are not. Now let's decide which animable properties are better for animating and which are worse. It's about about productivity. We touched on the topic of performance because animation is a resource-intensive process.

In general, here are the things that work best for animation:

1. Positioning on the page
2. Scaling
3. Rotation
4. Transparency

Moreover, the first three items of this list are all parameters of the transform property (translate, scale, rotate). Positioning occurs along the X and Y axes.

If you decide to animate anything else, you run the risk of not getting the soft, smooth transition of 60 frames per second. Paul Lewis & Irish

And this is exactly what we are interested in when we talk about animation performance. In general, the most suitable properties for animation are transform andopacity. When animating anything else, the fps of the animation can drop much below 60fps.

Let's summarize this point as follows. Try to avoid redrawing elements on a web page and animating elements that are difficult for the browser to render (for example, shadows).

How to make animation in CSS?

Now let's figure out how to start the animation. What needs to be done for the element to begin to animate. In other words, how to make animation inCSS.

It's not difficult and there's plenty to do different ways. But there are 2 main ones that you must master in mandatory. The first way is animation when hovering over an element(pseudo-class:hover). You hover your mouse over an element and an animation will trigger. This way you can animate the element itself or any of its child elements. Then I'll show you how it works. The second way is changing element class. That is, you have normal element, you are changing (or adding) its class to a class that has completely different styles. If you add a class, an animation will occur, and if you remove a class, the reverse animation will occur. This good way for animating menus or drop-down lists.

Afterword

We've covered everything we need to create animations using pure CSS. We'll figure it out very soon practical examples, and a little later - very interesting examples.

Did you read to the very end?

Was this article helpful?

Not really

What exactly did you not like? Was the article incomplete or false?
Write in comments and we promise to improve!

CSS3 animation is quite widely used. It's time for even the most novice website builders to understand what CSS animation is and how to create it. You might think that CSS3 animation is all about making blocks move and it looks like a cartoon. But CSS animation is not only about moving an element from one point to another, but also about distortion and other transformations. To make this clear even for beginners, I wrote everything down step by step.

1. Basic properties of CSS3 animation

A small theoretical block from which you will understand which CSS3 properties are responsible for animation, as well as what values ​​they can take.

• animation-name — unique name animations (key frames, we’ll talk about them below).
• animation-duration— animation duration in seconds.
• animation-timing-function— animation speed change curve. At first glance it is very unclear. It is always easier to show with an example, and you will see them below. Can take the following values: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n) .
• animation-delay— delay in seconds before the animation starts.
• animation-iteration-count— number of animation repetitions. It can be specified either simply as a number, or you can specify infinite and the animation will run endlessly.

Here are just the basic properties, which are more than enough to create your first CSS3 animation.

The last thing we need to know and understand from theory is how to create key frames. This is also easy to do and is done using the @keyframes rule, within which the key frames are specified. The syntax for this rule is as follows:

Above we set the first and last frame. All intermediate states will be calculated AUTOMATICALLY!

2. Real example of CSS3 animation

The theory, as usual, is boring and not always clear. It's much easier to see everything on real example, but it’s best to do it yourself on some test HTML page.

When learning a programming language, you usually write a “Hello, world!” program, from which you can understand the syntax of this language and some other basic things. But we are not studying a programming language, but a description language appearance document. Therefore, we will have our own “Hello, world!”

Here's what we'll do for example: let us have some kind of block