CSS animation on a real project

Increasingly, among web developers, the topic of CSS animation capabilities (transition / animation) rises, at almost every client development conference you can hear about the tremendous benefits of the new technology.

The performance and flexibility of CSS animations allows you to create amazing things, but can you already use these new features because of their instability and immaturity on real large projects?
')
In this post, we will explain why it is so important to start using new client development technologies today and about the difficulties that may be waiting for you on the way.

BOM state

The CSS transitions and animations in the W3C are still in the “working draft” state, but Firefox, Opera, and Internet Explorer 10 have already opened the prefixes for these properties. Getting rid of prefixes means that browser manufacturers are already confident in the stability of the technology and recommend it for active use.

While the big players were still afraid to improve the user experience of users through animations, referring to poor JavaScript performance, now is the time to reconsider their interface development approach and start using the features of CSS3.

Information hunger

Due to the lack of experience in introducing CSS animations into live projects in the network, there is very little information about the implementation of everyday tasks. Everyone is still using JavaScript solutions, afraid to play the role of industry pioneers.

You have to suffer even more when you encounter specific bugs that appear due to the collision of many factors, such as the huge size of the DOM tree, the number of animated blocks on the page, high nesting and many layers of blocks on each other. Trying to cope with such a load, browsers use their own optimization algorithms to the full, but sometimes this leads to inexplicable bugs.

Recently, we often meet with browser bugs, about which there is not a word on the network. As a result, you have to investigate the problem yourself, write bug reports and look for unusual solutions to fix it.

The sooner the big players start using new client development technologies, the faster the web development industry will develop.

CSS animations in the real world

Let's see which web projects dared to tame the new technology and were not afraid to pioneer the industry:

VKontakte partially uses animation on simple, small blocks, often choosing JavaScript animation instead of CSS, even for simple opacity animations and in text color transitions. A search for project styles yields 17 transition occurrences (not counting properties with prefixes).

On Facebook, the animations also didn’t get accustomed, only five occurrences of the transition were found in all styles, and the only animation of the last message that was sent to you was made in JS.

The guys from Google+, apparently, basically do not use animations (probably due to Chrome's problems with working with animations :), there were only 3 occurrences of the transition. The search for “animation” produced only one entry in Goolge +.

At the time of writing this article, Odnoklassniki has 140 transition and 4 animation calls, given that some of the animations are standardized and reused in many places.

An interesting note - a couple of months have passed since the first version of the article was written, during this time the number of animations on the listed projects has not grown, except for Odnoklassniki - the number of animations in our social network has grown almost 3 times.

What is worth animating

The more we bring the interface to reality, the clearer it becomes for the user. In life, almost nothing happens instantly - opening the door, or closing the laptop, we see a bunch of intermediate states, rather than a sharp “open / closed”, as it happens on the web.

We try to apply animations even for the most ordinary actions - showing hidden controls on a hover, drop-down menus, informational tooltips. Animations help to focus the user's attention on the controls with the help of various winks and twitches.

The smooth interaction of controls and transitions from one state to another help the user to better understand what is happening with the page. You should not be limited to animations only in buttons and sliders, use your imagination, just a couple of CSS properties will allow you to make your interface much more pleasant.

Experience exchange

Selection of bugs and solutions

Bumping into other people's examples of using CSS3 animations and describing bugs, we often blame the problem for its specificity and do not pay attention to the problem. But even if you are not going to do anything similar in the near future, it is useful to know in advance what you may have to face - for this we prepared a small selection of bugs and solutions that we had to face:

Demo page on dabblet , archive with examples (on Ya.Disk ).

Opera

When combining animations, for example, opacity with box-shadow, problems can be observed in Opera (see block 1 on the demo page ), when the shadow disappears completely with the hover, when the animation is reversed, the shadow returns with a delay and without the expected smoothness.

.no_sec { transition: opacity 1s, box-shadow 0; box-shadow: 0 0 5px 5px #000; } .no_sec:hover {opacity: 0; box-shadow: none;} 

To avoid the bug, you need to separately animate the shadow and try to pick up other values ​​of the transition speed.

 .no_sec.shadow { transition: opacity 1s, box-shadow .3s; box-shadow: 0 0 5px 5px blue; } .no_sec.shadow:hover {opacity: 0; box-shadow: none;} 

Blocks with pseudo-elements are problem-animated in Opera 12, leaving similar artifacts with the first example (block 2), and in Opera 11.64 it works stably.

 .pseudo { position: relative; transition: opacity 1s; } .pseudo:hover {opacity: 0;} .pseudo::after { content: 'pseudo'; position: absolute; left: 0; top: 100%; height: 10px; width: 100%; background: blue; font-size: 10px; line-height: 1; } 

You have to give up pseudo-elements and use regular tags.

Firefox

If you do not specify the value "s" (seconds) in the transition, Firefox ignores the animation completely (block 1). In block 3, the working value of the shadow animation in Firefox is set.

And Firefox behaves strictly according to the documentation , which states that the value of time should be determined only by the measure, and other browsers have chosen a more familiar approach for developers.

Webkit

In Chrome on Mac (at least until version 23), using transition together with transform (block 4), as well as under other conditions, text smoothing on the entire page breaks.

Smoothing:


Without smoothing:

 .scale { transition: transform 1s; /*-webkit-backface- visibility: hidden;*/ } .scale:hover {transform: scale(1.5)} 

The backface-visibility : hidden property applied to the body or to a block with flickering text helps to solve the problem, but such a fix also has its consequences (details are given below in the article), besides, the text will lose anti-aliasing forever.

In Chrome, transition does not work if the block changes properties from display: block -> display: inline / inline-block (block 5).

 .inline b {opacity: 0; transition: opacity 1s; display: block; max-height: 0;} .inline:hover b {opacity: 1; display: inline; } 

To get around the problem, you need to use animation (block 5.1).

 @-webkit-keyframes reveal { from { opacity: 0; } to { opacity: 1; } } .inline.anim:hover b {-webkit-animation: reveal 1s;} 

In Chrome on Windows, during smooth animation transform, all inputs get a white background (block 4 with a transform and 6 with an input).

A similar effect is also observed if backface-visibility is applied to any element of the page. The solution to the problem has not yet been found.

Common bugs

Nowhere, except for Webkit, does the transition to background-image work, you can't even put a delay, the picture changes instantly (block 7).

 .bg_img { background: red url(image1.png); transition: background-color 1s linear, background-image 0s linear 1s; } .bg_img:hover {background: blue url(image2.png);} 

To solve the problem, it was necessary to combine animation in several layers using opacity.

During the transition, an opacity block overlaps other blocks.

To avoid problems, you need to put the blocks, which do not need animation below in the house (so they will automatically get above the z-index), or set the z-index manually (block 8.1).

Updating the page with examples of bugs, a couple of months after the first version, it turned out that during this time the situation had not changed and for a couple of versions of browser updates, none of the listed bugs were still repaired.

On a note

In CSS transition it is possible to control the animation in both directions, for example, by changing the animation speed:

 .block {transition: 10s opacity;} .block:hover {opacity: 0; transition-duration: 1s;} 

When hover, go to opacity: 0; happens in 1 second, and the reverse transition to opacity: 1; will last 10 seconds. Thus, for example, with a hover “forever”, the hover state properties can be left using a very large delay.

When using animation, one should expect that during the animation the block is not subject to any external influences (approx. Color change to hover). To do this, you can first stop the animation using “animation-play-state: paused;“ or zero the animation completely using the “animation: none;” property.

Working with animations, periodically you have to go back to basics and re-examine the most ancient possibilities of CSS, as we did with the pseudo-class: active .

Backface-visibility

Earlier we mentioned backface-visibility as a solution to some of the bugs of webkit browsers, but in some places this property can lead to even greater problems. In addition to the standard purpose of this property (to hide the reverse side of the 3D animated block), it is often used to enable hardware acceleration, which allows the GPU to speed up the rendering time for pages in the browser.

Applying this property to at least 1 page element can affect the entire page, for example, by triggering a white background under all inputs (the 7th selection point of animation bugs) or change the text smoothing mode.

We recently discovered that by applying this property dynamically after a portion of the page has already been drawn, the average rendering time for the page is greatly increased. Most likely this is due to the transition to the GPU mode of acceleration, in which the entire page is redrawn.

The first time we faced the consequences of this property, when we decided to apply it to the body element for Chrome and Safari on Mac in order to avoid text flickering during animations. At the same time, a lot of unexplainable bugs began to appear in Safari 5, the page was going to completely unpredictable places, so I had to leave backface-visibility only for Chrome Mac and to the most problematic places with flashing text in Safari. With the release of Safari 6, the situation got a little settled and the behavior of the browser in relation to the ill-fated property was equated to the behavior of the current Chrome.

At gunpoint

Always watch for browser updates and check your portal on the developer and preview versions if you do not want your portal to bend under the onslaught of bugs due to the next browser update.

In addition to the implementation of support for new technologies and the opening of prefixes, not very stable page rendering optimization algorithms can come along with the new version. Considering that browsers begin to transfer part of the rendering to the GPU, we should also expect that bugs can be played only on machines with a certain hardware. There were cases that on some computers in the same browser 3D transform did not work because of the video card.

Together with the release of the 21st version of Chrome on a stable branch, we had to meet with a bunch of inexplicable bugs related not only to CSS3 animations, one of the most critical was a bug with black spots (only in Chrome on Windows) that appeared randomly throughout the page due to animation opacity. The most interesting thing is that the versions of stable and dev (in Chrome) can easily be different, even if the bug is fixed in the 22nd dev version, it’s not a fact that the translation of the branch to stable will remain.

An interesting case was observed with the release of Safari 6, with the update the browser pulled a lot of changes from the webkit development branch of the engine and took over the many bugs of the current Chrome.

Optimization

One of the basic rules of our interface development team is as much as possible for pure CSS solutions. Using CSS instead of JavaScript gives excellent performance gains on the client side, as well as the speed of the interface, as well as development time.

Every byte counts

Use short abbreviated notation instead of listing each property separately.

 transition-property: top; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0.5s; 

=

 transition: top 1s .5s; 

By the way, the most minimal animation record is “transition: 1s”, the other default properties are “all ease 0;”

Often it is necessary to meet examples of non-rational use of animations, when instead of defining specific, animated properties, developers use

 transition: all … ; 

instead of clear

 transition: opacity … ; 

Perhaps this will help you save a couple of characters, but in the end you will load the browser several times more with extra calculations when changing several parameters of the block being animated.

Also, do not forget to follow the prefixes, for example, the properties of -ms-animation and -ms-transition do not exist at all, because Internet Explorer 10 has been released with prefixes already dropped. CSS preprocessors allow you to greatly simplify the work with prefixes using mixins.

Standardize

The object-oriented CSS approach allows you to save well on repetitive properties. We actively use the OOCSS approach in our style organization system , which also concerns the standardization of animations.

Here is an example of one of the modules being reused:

 .fade { transition: .3s opacity, visibility 0s .3s; visibility:hidden; opacity: 0; } .fade_in:hover .fade { transition-delay: 0s; visibility: visible; opacity: 1; } 

This standard module allows us to save a bunch of repeated occurrences of code for the most common animation effect. Using the additional property “visibility”, we implement backward compatibility for browsers that do not support CSS animations.

Conclusion

Looking at the many difficulties that have to be encountered when working with CSS animations, it may seem that the efforts are not justified, but this is absolutely not the case:

First, we discovered a powerful tool for improving user interface interaction, not much affecting client performance in comparison with JavaScript counterparts. Native technology allows browsers to better optimize the speed of drawing elements also through the use of computing power of the GPU.

Secondly, we are very pleased with the flexibility of CSS animations, the speed and ease of implementing technology into existing and new interfaces. Having developed common approaches and sorted out the features of the technology once, we can easily apply it on a variety of internal projects.

Thirdly, it is interesting to work with CSS animations! What could be more inspiring than being the pioneers of technology and paving the way? If the task of creating a new interface has at least one animated element, then working with it becomes much more exciting. Especially nice to hear commendable reviews, sharing developments with fellow layout designers.