Nine simple CSS3 animation examples. Nine Simple CSS3 Animation Examples The Complete Guide to Flexbox

Over the past few years, CSS has introduced a lot of interesting features that make web development more fun. One of these things is CSS3 animation. Before CSS3, animation could only be implemented with using Javascript.

Today we will show you how to work with a CSS3 library that will turn creating animation into a pleasant and easy process: Animate.css.

Animate.css is a library for creating animations using CSS3. This library supports more than 50 different animation effects, which almost all work in different browsers, supported by CSS3.

These effects can be applied to text, images, shapes, and so on.

To activate Animate.css, connect required classes to a page element. To get started, include the animate.css file in the head section. You can download the library from the repository on Github.

By default, Animate.css plays the animation once when the page loads. To play the animation cyclically, let's add a little Javascript.

... ...

First, we need to assign the .animated class to the desired element, followed by the animation type class.

This text will animate.

That's all! Now the animation will play when the page loads. Let's add Javascript to play the animation when an event fires. The.option class is completely arbitrary, you can change it to suit you.

If we want the animation to not stop or its execution time to be different, then we need to adjust some values.

To scroll the animation an nth or an infinite number of times, we can adjust the animation-iteration-count attribute. Don't forget to specify the browser prefix for webkit, moz, etc. For infinite scrolling, set the value to infinite .

If we need to play the animation a specific number of times, then you can follow it like this.

Vendor-animation-iteration-count: infinite | ;

To change the playback time, you can adjust the animation-duration and animation-delay properties. Example:

Option ( -webkit-animation-duration: 3s; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: 5; )

To animate during some event (for example, when clicked), we will use Javascript. First, let's add a link.

This text will animate. Click to animate!

Using Javascript, we can create an animate function, to which we will pass the name of the animation class:

$(function() ( $("#ref").click(function() ( animate(".demo", "bounce"); return false; )); ));

function animate(element_ID, animation) ( $(element_ID).addClass(animation); var wait = window.setTimeout(function())( $(element_ID).removeClass(animation)), 1300); )

Today we will learn how to animate website objects easily and quickly using two scripts. The name of which you can see above in the title of this article. But first, let me tell you what each of them is for.

WOW.js is a small library that allows you to enable animation at a certain stage of the page scroll. It weighs very little, and is also completely independent - that is, there is no need to connect jQuery or other monsters.

Animate.CSS is a script that is directly responsible for the animation itself. In fact, wow.js takes animations from this very thing. And there are several dozen of them.

The disadvantage of animate.css is that it is just a regular set of CSS rules related to animation. That is, they are played immediately after the page is loaded. And if the animated elements are not visible on the “first” screen, then visitors simply will not see all this beauty. After all, it will be played before they rewind the page to the right place.

And in the first note (link in the next paragraph), to prevent this from happening, I showed you how and where to write js codes so that the animation would play at a certain stage of page scrolling. It was extremely inconvenient, but it worked like a charm Therefore, before you start, I advise you to watch the lesson “”. Since I will already assume that you know how to use animation on the site. At the same time, you will immediately understand how wow.js makes your work easier

. After all, now we won’t have to write and delve into js code. Plug it in and forget it

And so, the introduction is over. Now let's get closer to the "body". I recorded a video lesson on this topic, but before watching, I want to show you what you will get if you complete the lesson to the end in practice. So to speak, for more motivation Well, have you looked? This is what you're going to do with my own hands

Lesson: WOW.js and Animate.CSS - more fun together!

Setting up WOW.js How to download and connect.

Step 2.

We connect the scripts with simple HTML code on the page in the tag:

in connecting scripts to the site.

Step 3. You need to initialize the script by adding the following code, immediately after connecting it:

new WOW().init();

Using WOW.js

Step 1. Select the element we want to animate and add class="wow" to it. In the code below, I showed this using an example image:

Step 2. Select the animation and add it with an additional class to our dog:

Step 3. Add settings for animation if necessary, using special data attributes:

WOW.js animation settings via attributes data-wow-duration – specify the animation playback time data-wow-delay – set a delay before playing the animation data-wow-offset – enable animation when the element passes a certain number of pixels from the bottom of the screen data-wow- iteration – number of animation repetitions

Please note that these attributes are not required. If you don't specify them, the animation will simply play by default as soon as the element appears on screen while scrolling the browser window.

| 18.02.2016

Well guys. That's probably all. If you have any questions, ask in the comments;)

It's amazing how simple things can liven up an ordinary web page and make it more accessible to users. We are talking about CSS3 transitions, with which you can allow an element to transform and change style, for example, on hover. The nine examples of CSS3 animations available below will help you create a responsive atmosphere 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 files.

All effects work using the transition property. transition- “transition”, “transformation”) and the pseudo-class:hover, which determines the style of the element when the mouse cursor hovers over it (in our tutorial). For our examples, we used a 500x309 px 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 )

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

Color:hover ( background:#53ea93; )

An interesting and striking transformation is the inner frame that smoothly appears when you hover the mouse. Well suited for decorating various buttons. To achieve this effect, we use the pseudo-class:hover 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; )

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

• @keyframes is a basic directive for creating frame-by-frame CSS animation, which allows you to do the 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.

animation: swing 0.6s ease;

-webkit-animation-iteration-count: 1;

animation-iteration-count: 1; ) 4. Attenuation

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

For the opposite result, swap the values:

To make the block larger when hovered over, we will use the transform property and set it 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); )

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

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

A fun animation option is to rotate an element by a certain number of degrees. To do this, we will need the transform property again, 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); )

Designers' opinions differ on whether this effect is appropriate in flat design. However, this CSS3 animation is quite original and is also used on web pages. We will achieve a three-dimensional effect using the already familiar box-shadow properties (will create a multi-layer shadow) and transform with the translateX(-7px) parameter (will ensure a horizontal shift of the block 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 )

The following browsers currently support the transition property:

The remaining 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 you found these CSS3 animation examples helpful. We wish you creative success!

Many visitors have a question about how to use the Animate.css library in practice. In reality, everything happens quite simply, you just need to go through all the stages once, and then, by analogy, repeat some actions.

1. First you need to download and connect the library. There are three options.

• Full version . Contains more than three thousand lines of code with a volume of about 60 kB. It is well suited at the first stage of becoming familiar with animation in general, as it allows you to look at how it all works.
• Packaged version (obfuscated, in professional terms). There are no tabs, spaces or line breaks in the css file. Due to this, the file size is reduced by one and a half times, but it becomes difficult to read the code.
• Selective effects. Best suited for most tasks because it allows you to specify only the effects you like, eliminating unnecessary ones.

2. To apply an animation effect to the desired element, add two classes to it - animated and a class with the name of the effect, for example fadeInDown (see the list of all effects and their names). For example, let's say you want to add flicker to all the images on a page. In HTML we write the following:

If the site uses jQuery, then adding classes is simplified and done through JavaScript.

$(document).ready(function() ( $("img").addClass("animated flash"); ))

3. The animation itself turns on automatically when the page loads. This is useful for pop-up messages designed to attract the user's attention (example 1).

Example 1: Pop-up message

Warning .warning ( background: #fc0; padding: 10px; border: 1px solid #000; ) The zenith hour number estimates the equatorial sextant!

In order for the effect to work when hovering over an element with the mouse cursor, you will have to use JavaScript. As an example, consider pictures that move when you hover the mouse cursor over them. Go to tag add the animated class and connect jQuery (example 2).

Example 2. Gallery

Gallery $(document).ready(function() ( $("img.animated").hover(function() ( $(this).addClass("bounce"); // Add the bounce class), function() ( $(this).removeClass("bounce"); // Remove the class ))))

IN in this example when you hover over an image with the animated class, another bounce class is added; if the cursor is removed, the bounce class is also removed.

4. Finally, you can customize the animation to your liking by changing the animation speed, as well as setting the delay time via CSS. Both are optional and can be used if necessary.

Animated ( -webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; animation-duration: .6s; -webkit-animation-delay: 1s; -o -animation-delay: 1s; -moz-animation-delay: 1s;

In this article we will continue to study the nuances of using animation, we will study such CSS features as pausing animation, animation direction, we will look at how to specify a style for an element when the animation is not playing, we will look at how to correctly use a universal property to create animation, we will connect and learn how to use the library Animate.css .

I draw your attention to the fact that to study this material you will need the knowledge that you need to obtain in the previous article "".

The next simple property we'll look at is animation-play-state , it defines the state of the animation. This property is passed one of two possible keywords:

• running - animation is played (default value).
• paused - animation is paused.

In this example, we created a simple animation in which we used CSS properties left offsets the relative positioned element relative to the left edge of the current position.

When hovering over an element with the mouse cursor (the :hover() pseudo-class), the animation is paused by setting the animation-play-state property to paused , and the animation resumes when the cursor leaves the element.

The result of our example:

Using the generic animation property, we specified the following animation parameters:

• Animation name- iliketomoveit.
• Animation duration- 4 seconds.
• Speed ​​curve- step animation steps(3,start) . For each part of the key frame it will be produced 3 steps.
• Animation Delay- 500 milliseconds.
• The number of cycles- infinite (infinite).
• Animation direction- reverse (in the opposite direction).

The result of our example:

Consider the following example in which

In this example, we created several animations in which, using the property, nested elements are shifted along the axis X(horizontal axis) and Y axis (vertical axis). Each element had a different animation delay, ranging from 1 second to 1.8 seconds. Each element animation contains the following parameters:

• Animation name-up.
• Animation duration- 1 second .
• Speed ​​curve- linear (same speed throughout the entire animation).
• Animation Delay- from 1 second to 1.8 seconds.
• The number of cycles- infinite (infinite).

Let's look at a simple animation from the library that changes the transparency of an element:

These keyframes use a property to change the opacity of an element from fully transparent to opaque.

But this is not yet enough to launch the animation of the Animate.css library that interests you. In order to start the animation, you can, but are not required to, use the following classes created by the author of the project:

Please note that you can create your own classes that will control the animation process. As a rule, adding classes to this or that element occurs using the language JavaScript depending on user actions or certain events. We will look at an example in which we will use only classes from the Animate.css library and install animation only using cascading style sheets.

Let's look at an example:

In this example, we connected the Animate.css library using a tag and placed an image to which we connected (specified separated by a space) the following 3 classes from the library.