Smooth moving animation using CSS. Multiple transformations on one element
Hello, dear readers. On this day let's talk about, pretty much, interesting thing like 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.
CSS3 transitions allow you to animate the original value of a CSS property to a new value over time, controlling how quickly the property values change. Most properties change their values in 16 milliseconds, so the recommended standard transition time is 200ms.
Properties change when a certain event occurs, which is described by the corresponding pseudo-class. The most commonly used pseudo-class is:hover. This pseudo-class does not work on mobile devices, such as iPhone or Android. A universal solution, working in desktop and mobile browsers, there will be event processing using JavaScript (for example, switching classes when clicked).
Transitions apply to all elements, as well as the:before and:after pseudo-elements. To set all transition properties, you usually use a shorthand for the transition property.
CSS3 transitions may not apply to all properties and their values. Detailed list you will find on the page.
Creating smooth changes in element properties
Browser support
IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
1. Property name transition-property
Contains the name of the CSS properties to which the transition effect will be applied. The property value can contain either one property or a comma-separated list of properties. When creating a transition, you can use both the starting and ending states of the element. The property is not inherited.
The effects created should be unobtrusive. Not all properties need to change smoothly over time due to user experience. For example, when you hover over a link, we want to see an instant change in the link color or underline color and style. Therefore, transitions should be used for those properties that you really want to draw attention to.
Syntax
Div ( width: 100px; transition-property: width; ) div:hover ( width: 300px; )
2. Transition duration transition-duration
Specifies the period of time during which the transition should occur. If different properties have different meanings for transition, they are indicated separated by commas. If the transition duration is not specified, then animation will not occur when changing property values. The property is not inherited.
Syntax
Div ( transition-duration: .2s; )
3. transition-timing-function
The property specifies a time function that describes the speed at which an object transitions from one value to another. If you define more than one transition for an element, such as the element's background color and its position, you can use different functions for each property. The property is not inherited.
| transition-timing-function | |
|---|---|
| Values: | |
| ease | The default function, the transition starts slowly, accelerates quickly and slows down at the end. Corresponds to cubic-bezier(0.25,0.1,0.25,1) . |
| linear | The transition occurs evenly throughout the entire time, without fluctuations in speed. Corresponds to cubic-bezier(0,0,1,1) . |
| ease-in | The transition starts slowly and then speeds up smoothly at the end. Corresponds to cubic-bezier(0.42,0,1,1) . |
| ease-out | The transition starts quickly and slows down smoothly at the end. Corresponds to cubic-bezier(0,0,0.58,1) . |
| ease-in-out | The transition begins slowly and ends slowly. Corresponds to cubic-bezier(0.42,0,0.58,1) . |
| cubic-bezier(x1, y1, x2, y2) | Allows you to manually set values from 0 to 1 for the acceleration curve. you can build any transition trajectory. |
| initial | Sets the property value to the default value. |
| inherit | Inherits the property value from the parent element. |
Syntax
Div ( transition-timing-function: linear; )
To create more realistic animations, use the cubic Bézier function:
Rice. 1. Custom cubic Bézier functions from easings.net | Custom name | Function value |
|---|---|
| easeInSine | cubic-bezier(0.47, 0, 0.745, 0.715) |
| easeOutSine | cubic-bezier(0.39, 0.575, 0.565, 1) |
| easeInOutSine | cubic-bezier(0.445, 0.05, 0.55, 0.95) |
| easeInQuad | cubic-bezier(0.55, 0.085, 0.68, 0.53) |
| easeOutQuad | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| easeInOutQuad | cubic-bezier(0.455, 0.03, 0.515, 0.955) |
| easeInCubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |
| easeOutCubic | cubic-bezier(0.215, 0.61, 0.355, 1) |
| easeInOutCubic | cubic-bezier(0.645, 0.045, 0.355, 1) |
| easeInQuart | cubic-bezier(0.895, 0.03, 0.685, 0.22) |
| easeOutQuart | cubic-bezier(0.165, 0.84, 0.44, 1) |
| easeInOutQuart | cubic-bezier(0.77, 0, 0.175, 1) |
| easeInQuint | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
| easeOutQuint | cubic-bezier(0.23, 1, 0.32, 1) |
| easeInOutQuint | cubic-bezier(0.86, 0, 0.07, 1) |
| easeInExpo | cubic-bezier(0.95, 0.05, 0.795, 0.035) |
| easeOutExpo | cubic-bezier(0.19, 1, 0.22, 1) |
| easeInOutExpo | cubic-bezier(1, 0, 0, 1) |
| easeInCirc | cubic-bezier(0.6, 0.04, 0.98, 0.335) |
| easeOutCirc | cubic-bezier(0.075, 0.82, 0.165, 1) |
| easeInOutCirc | cubic-bezier(0.785, 0.135, 0.15, 0.86) |
| easeInBack | cubic-bezier(0.6, -0.28, 0.735, 0.045) |
| easeOutBack | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
| easeInOutBack | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
4. transition-delay
An optional property allows you to make the property change not immediately, but with some delay. Not inherited.
Syntax
Div ( transition-delay: .5s; )
5. Brief transition record
All properties responsible for change appearance element, can be combined into one transition property
(transition: transition-property transition-duration transition-timing-function transition-delay;)
If you use the default values, then the entry
Div (transition: 1s;)
will be equivalent
Div (transition: all 1s ease 0s;)
6. Smooth transition of several properties
You can specify several sequential transitions for an element by listing them separated by commas. Each transition can be designed with its own time function.
Div (transition: background 0.3s ease, color 0.2s linear;)
Div ( transition-property: height, width, background-color; transition-duration: 3s; transition-timing-function: ease-in, ease, linear; )
7. Examples of transitions for various properties
Hover your mouse over the blocks to see the properties in action.
Before the advent of CSS3, the word “animation” made layout designers break into a cold sweat. And all because in those days it was impossible to make high-quality and beautiful animation trivial task. CSS couldn't do this, so all animations were done in JavaScript. It was necessary to sift through a bunch of forums, find the same comrades in misfortune, spend a lot of time on development, and in the end hear from the designer: “Okay, this will do.” And when CSS3 finally came out, the fireworks didn't stop until the morning, and the champagne flowed like a river. It was a great day for all web developers (the next such day was when Microsoft announced the end of support Internet Explorer). With the advent of CSS3, many previously complex tasks have become simple and enjoyable to work with. The same applies to animations in CSS, which I will talk about in this article.
CSS transitions
CSS transitions allow you to make changes to CSS properties smoothly and over time. This way, you get the opportunity to control the process of an element's transition from one state to another. Let's start with the simplest example and move on.
When you hover the cursor over the square, the background color changes smoothly.
Now let's take a closer look at how to manage transitions in CSS. We have only 5 properties that allow us to control transition animation:
- transition-property;
- transition-duration;
- transition-timing-function;
- transition-delay;
- transition;
transition-property- specifies a list of properties that will be animated; properties not specified here will be modified as usual. You can animate all properties for a specific element by specifying the value all. If you do not specify any properties, the default value is all.
Transition-property: width;
transition-duration- sets the duration of the animation; the time can be specified in seconds or milliseconds.
Transition-duration: 1s;
transition-timing-function- time function, indicates points of acceleration and deceleration for certain period time to control changes in animation speed. Simply put, you can use this property to specify the behavior for an animation. For example, we can speed up the animation at the beginning and slow it down at the end, or vice versa. Bezier curves are used to define the animation process. In general, the transition-timing-function allows you to create a lot of different behaviors for animations, this is a whole topic for an article, so we won’t go deeper here.
Transition-timing-function: cubic-bezier(0, 0, 1, 1);
transition-delay- sets the time delay before the start of the animation, can be specified in seconds or milliseconds.
Transition-delay: 500ms;
transition is a general property that allows you to list the first four properties in the order: property, duration, timing-function, delay.
Transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;
This is what we got simple animation: when you hover the mouse over the square, the width changes; animation duration is one second; animation plays on linear function; delay before animation starts 500 milliseconds.
With CSS transitions you can animate almost all properties and create many interesting, beautiful, functional and even complex animations that will complement and enhance your project. For example, I made this Material-FAB on pure CSS using transitions:
CSS animations
CSS animations allow you to create more complex animations than CSS transitions. The whole secret is in @keyframes. The @keyframes rule allows you to create animation using a set of key frames, that is, it describes the state of an object at a certain point in time. Let's look at a simple example.
Our circle has come to life and it seems to be pulsating.
There are 9 properties that allow you to control CSS animations:
- animation-name;
- animation-duration;
- animation-timing-function;
- animation-delay;
- animation-iteration-count;
- animation-direction;
- animation-play-state;
- animation-fill-mode;
- animation;
animation-name- here is the name of the animation that associates the @keyframes rule with the selector.
Animation-name: my-animation; @keyframes my-animation ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
animation-iteration-count- sets the number of repetitions of the animation, the default value is 1. The value infinite means that the animation will play endlessly.
Animation-iteration-count: 2;
animation-direction- sets the direction of the animation.
Animation-direction: reverse;
animation-play-state - this property controls stopping and playing of animation. There are two values, running (the animation plays, by default) and paused (stops the animation).
Animation-play-state: paused;
animation-fill-mode- sets which CSS properties will be applied to the object before or after the animation. Can take the following values:
- none - animated CSS properties will be applied to the object only while the animation is playing, and upon completion the object will return to its original state;
- forwards - animated CSS properties will be applied to the object after the animation has finished playing;
- backwards - animated CSS properties will be applied to the object before the animation starts playing;
- both - animated CSS properties will be applied to the object both before and after the animation ends;
Animation-fill-mode: backwards;
Properties animation-duration, animation-timing-function, animation-delay They work the same way as similar properties in CSS transitions, which I wrote about earlier, so I won’t repeat them.
With animations CSS you can create quite complex animations without using JavaScript. A striking example is loaders, that is, elements that show that something is loading on your page. Here are some examples:
Motion Path Module
Motion Path Module CSS allows you to create movement of objects along a path through the special motion-path property. Previously, such animation could only be done with using SVG or complex scripts.
This specification has 3 properties:
- motion-path;
- motion-offset;
- motion-rotation;
motion-path- this property allows you to specify the points (coordinates) along which the object will move. The syntax is the same as the SVG path attribute.
Motion-path: path("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");
motion-offset- this property sets an object in motion from the starting point to the ending point. It accepts either double the length or a percentage. In order for the object to start moving, you need to define an animation that will go from 0 to 100%.
@keyframes airplane-fly ( 0% ( motion-offset: 0; ) 100% ( motion-offset: 100%; ) )
motion-rotation- this property allows you to specify which side forward the object will move. You can specify auto, reverse, or your own value in degrees ("-45deg", "30deg", etc.).
Motion-rotation: auto;
Unfortunately, motion-path is currently only supported in Chrome and Opera, but let's hope that other browsers will soon follow their example, because the thing is really useful.
For those who have not yet understood how this works, or want to understand it better, I made an example (link to codeopen).
Two main tools are often used for page layout - positioning And free movement (floating). CSS positioning lets you specify where an element's box appears, and free float moves elements to the left or right edge of the container box, allowing the rest of the content to "flow" around it.
Positioning and free movement of elements
1. Types of positioning
The position property allows you to precisely specify the new location of the block relative to where it would be in the normal flow of the document. By default, all elements are arranged sequentially one after another in the order in which they are defined in the structure of the HTML document. The property is not inherited.
| position | |
|---|---|
| Meaning: | |
| static | The default value means no positioning. Elements are displayed sequentially one after another in the order in which they are defined in the HTML document. Used to clear any other positioning value. |
| relative | A relatively positioned element is moved from its normal location to different directions relative to the boundaries of the parent container, and the space it occupied does not disappear. However, such an element may overlap other content on the page. If for a relatively positioned element you set the properties top and bottom or left and right at the same time, then in the first case only top will work, in the second - left. Relative positioning allows you to set the z-index for an element, as well as absolutely position it child elements inside the block. |
| absolute | An absolutely positioned element is completely removed from the document flow and positioned relative to the boundaries of its container block (another element or browser window). The container block for an absolutely positioned element is the closest ancestor element whose position property value is not static . The location of the element's edges is determined using the offset properties. The space that such an element occupied collapses as if the element did not exist on the page. An absolutely positioned element can overlap or be superimposed by other elements (due to the z-index property). Any absolutely positioned element generates a block, that is, it takes on the value display: block; . |
| fixed | Fixes an element at a specified location on the page. The container block of a fixed element is the viewport, that is, the element is always fixed relative to the browser window and does not change its position while scrolling the page. The element itself is completely removed from the main document flow and created in a new document flow. |
| initial | Sets the property value to the default value. |
| inherit | Inherits the property value from the parent element. |
Rice. 1. Difference between static, relative and absolute positioning 2. Offset properties
Properties describe the offset relative to the nearest side of the container block. Set for elements for which the position property value is not static . They can take both positive and negative values. Not inherited.
For the top property, positive values move the top edge of the positioned element below, and negative values move the top edge of its container block. For the left property, positive values move the edge of the positioned element to the right, and negative values move the edge of the positioned element to the left. That is, positive values move the element inside the container block, and negative values move it outside it.
3. Positioning within an element
For the container block of an absolutely positioned element, the position: relative property is set without offsets. This allows elements to be positioned within a container element.
Rice. 2. Absolute relative positioning4. Positioning problems
1. If the width or height of an absolutely positioned element is set to auto , then its value will be determined by the width or height of the element's content. If the width or height is declared explicitly, then this is the value that will be assigned.
2. If inside a block with position: absolute there are elements for which the float is set, then the height of this element will be equal to the height of the tallest of these elements.
3. For an element with position: absolute or position: fixed, you cannot simultaneously set the float property, but for an element with position: relative, you can.
4. If the ancestor of the positioned element is a block element, then the block container is formed by the content area delimited by the border. If the ancestor is an inline element, the container block is formed by the outer boundary of its contents. If there is no ancestor, the container block is the body element.
5. Free movement of elements
In the normal order, block elements are rendered starting from the top edge of the browser window and working towards the bottom edge. The float property allows you to move any element, aligning it to the left or right edge of the web page or the container element that contains it. In this case, other block elements will ignore it, and inline elements will move to the right or left, freeing up space for it and flowing around it.
Rice. 3. Free movement of elements A floating block takes on the dimensions of its contents, taking into account padding and borders. The top and bottom margins of floating elements do not collapse. The float property applies to both block elements and inline elements.
The left or right outer edge of a moved element, unlike positioned elements, cannot be located to the left (or right) of the inner edge of its container block, i.e. go beyond its boundaries. Moreover, if internal padding is specified for the container block, then the floating block will be spaced from the edge of the container block at the specified distance.
The property automatically changes the calculated (browser-displayed) value of the display property to display: block for the following values: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell . table-caption, table-header-group, table-footer-group. The value of inline-table changes to table .
The property has no effect on elements with display: flex and display: inline-flex .
When using the float property on block elements, be sure to specify a width. This will create space for other content in the browser. But if the combined width of all columns is greater than the available space, then the last element will go down.
At the same time, the vertical margins of floated elements do not collapse with the margins of neighboring elements, unlike ordinary block elements.
6. Cancel flow around elements
6.1. clear property
The clear property determines how the element that follows the floating element will be positioned. The property cancels the wrap around one or both sides of an element that is set float property. To prevent background or borders from being displayed under floating elements, use the (overflow: hidden;) rule.
6.2. Cleaning a stream with styles using the clearfix class and the :after pseudo-class
Suppose you have a block container for which the width and height are not specified. A floating block with specified dimensions is placed inside it.
Rice. 4. “Collapse effect” of the container blockSolution to the problem:
We create the .clearfix class and, in combination with the :after pseudo-class, apply it to the container block.
Second option for clearing the stream:
Clearfix:after ( content: ""; display: table; clear: both; ) 
Rice. 5. Applying the “cleaning” method to a container block containing a floating element
6.3. An easy way to clean a stream
There is another trick to clean up the flow for an element containing floating elements, such as a horizontal bulleted list:
Ul ( margin: 0; list-style: none; padding: 20px; background: #e7e6d4; overflow: auto; ) li ( float: left; width: calc(100% / 3 - 20px); height: 50px; margin- right: 20px; background: #ffffff; border: 3px dashed #666666; ) li:last-child (margin-right: 0;) Fig. 6. Cleaning up the horizontal list flow
The result of this lesson works in Safari browsers, Chrome, Opera, Firefox, starting from version 4 (where you will see transformations, but without animation). Also, using the browser prefix -ms-, you can see positive result in IE, starting from version 9.
For implementation CSS Animations must be set special settings transformations that will respond to mouse events. It is also necessary to specify a special function that will be responsible for the execution time of the animation.
To make transformations work in Firefox and Opera, simply replace the -webkit prefix with -moz and -o. For IE - to -ms.
1. Introduction to CSS Transformations
CSS transformations are used to change the appearance, rotation, and other transformations of an element. All these settings are set in regular style sheets, and when you open the page, you already see the finished result of the transformation. In order to see the transformation itself from one view to another (transformation animation), you can attach some kind of event to the element (for example, the mouseover event);
In the example below, we placed 4 absolutely identical divs with a 2px border. To transform these elements in browsers running on webkit, add the prefix -webkit-transform:
Without these transformations, the divs will look exactly the same.
2. Animation
To animate transformations in Webkit browsers, you can use the -webkit-transition prefix. The demo is shown below:
There are 4 identical divs in front of you. To start the animation you need to move the mouse in/out. With all this, no JavaScript. HTML and CSS only.
CSS animation can be applied not only to transformations, but also to other properties such as transparency, color, and more. This is demonstrated in following example. One element is converted to another and vice versa:
Again, we only use HTML and CSS. In this case, change the settings border-color, border-radius.
4. Multiple transformations on one element
To apply multiple transformations to the same element, simply list the settings separated by a space. Eg:
These settings, when hovering the mouse over 1 second, will change the color of the sub-menu, rotate it, and increase its size.
4. Animation in action
Here is another interesting example of combining various types of transformations in one animation:
This example may not work very well in Safari 3 and earlier versions Opera.
The box surrounded by a dotted frame that appears while the animation is playing represents the position div element. We simply shift it and rotate its content. It's simple!
To create more complex animations, you need to use special key frames.
5. Using different types of animation
In this example, we will add several element transformations, each of which will be played within a specified period of time.
When a:hover event occurs, the blue square will turn, change color to red, and move from the upper left corner to the lower right.
The first thing you probably should have noticed is the peculiarity of the square’s movement. Now it is not sharp, but more “curved”. All thanks to the ease-out and ease-in functions.
Also note that the color change occurs before the rotation.
The trick is that you can split -webkit-transition into multiple entries:
#block ( ... background: blue; ... -webkit-transition-property: left, top, background, -webkit-transform; -webkit-transition-duration: 2s, 2s, 1s, 1s; -webkit-transition -timing-function: ease-out, ease-in, linear, ease-in-out; -webkit-transition-delay: 0, 0, 0, 1s; ... ) #stage:hover #block ( left: 100px ; top: 100px; background: red; -webkit-transform: rotate(360deg); )
6. The event of one element transforms another
Many people will probably be interested in similar functionality: clicking on one element causes the transformation of another. In CSS, this can be achieved by using the >, + and ~ selectors.
Here is a relevant example:
In this example, we used the + sign to interact with #box1 and #box2. ~ can be used to access elements that are located somewhere far from the element that is waiting for the event.
#box2 ( position: absolute; left: 120px; ... background: blue; ... ) #box1:hover + #box2 ( -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); left: 627px; background: yellow; )
At the same time, we can animate the first block:
The only drawback of these examples is that they do not work (or work crookedly) in earlier versions of browsers.
Thanks to Niall for the suggested tutorial!