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
Great and artistic example of using CSS in the 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 the Google search engine, made in CSS. This is a great example of good use of CSS animation.
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 that this filter is very necessary, especially since it is made using pure CSS. Using blur, you can draw the user's attention to a certain point.
The Complete Guide to Flexbox
This article is about adaptive blocks Flexbox. 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 describes the application CSS filters to the images.
CSS forms
A 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.
All modern browsers, except IE9 - support CSS transitions and CSS animations, which allow you to implement animation using CSS, without involving JavaScript. Animation applies to any html elements, as well as pseudo-elements :before And :after
Browser support
IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: -
Android Browser: 44, 4.1 -webkit-
Chrome for Android:
44
To use animation in your project, you just need to do two things:
- Create the animation itself using keyword@keyframes
- Connect it to the element that needs to be animated and specify the necessary properties.
@keyframes rule
Rule @keyframes allows you to create animation using key frames - states of an object at a certain point in time.
Animation key frames are created using keywords from And to(equivalent to the values 0% and 100%) or using percentage points, which can be set as many as you like. You can also combine keywords and percentage points.
If initial ( from, 0%) or final ( to, 100%) frame, the browser will set the calculated values of the animated properties for them as they would be if animation had not been applied.
If two keyframes have the same selectors, the subsequent one will cancel the previous one.
When defining an animation immediately after a property @keyframes must be followed by the name of this animation (this name must then be specified in the animation property of the element that will be animated).
@keyframes move ( from ( transform: translateX(0px); ) 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )
@keyframes move ( from ( 50% { 100% { transform: translateX(0px); |
We've created an animation that works like this:
- Start of animation ( from could have been written 0%) — the position of the element along the X axis is 0px;
- Middle of animation (50%) - the element’s position along the X axis is 130px;
- End of animation ( to we used 100%) - we return the element to the beginning of the animation, i.e. the element's X-axis position is 0px;
Here and below, for convenience, I wrote in the examples several lines of JavaScript that will alternately add or remove a class with animation on an element, so to play the animation, just click on this element.
Keyframes can be grouped:
@keyframes move ( from ( transform: translateX(0px); ) 25%, 50% ( transform: translateX(130px); ) 100% ( transform: translateX(0px); ) )
@keyframes move ( from ( transform: translateX(0px); 25%, 50% { transform: translateX(130px); 100% { transform: translateX(0px); |
You can assign several animations to one element; their names and parameters must be written in the order of assignment:
element ( animation-name: animation-1, animation-2; animation-duration: 2s, 4s; )
element( animation-name : animation-1, animation-2 ; animation-duration : 2s, 4s ; |
Connecting animation to an element is done using two commands - animation-name And animation-duration.
Animation name
Property animation-name specifies the name of the animation. It is recommended to use a name that reflects the essence of the animation, and you can use one word or several, linked together using a space - or an underscore _.
animation-name: move;
Time function
Property animation-timing-function allows you to set a special function responsible for the animation playback speed. Please note that the animation playback speed is most often nonlinear, i.e. its instantaneous speed in different areas will differ. On this moment There are several already built-in arguments for this rule: ease, ease-in, ease-out , ease-in-out, linear , step-start , step-end.
However, you can create such functions yourself. Special function cubic-bezier(P1x, P1y, P2x, P2y); takes four arguments and builds a value distribution curve based on them during the animation process. You can practice creating your own functions and see how they work on this site.
Finally, the animation can be turned into a set of discrete values using the function steps(number of steps, direction), the arguments of which specify the number of its steps and the direction, which can take values start or end .
- ease- default function, the animation starts slowly, accelerates quickly and slows down at the end. Corresponds to cubic-bezier(0.25,0.1,0.25,1).
- linear— animation occurs evenly throughout the entire time, without fluctuations in speed; corresponds to cubic-bezier(0,0,1,1).
- ease-in— the animation starts slowly and then smoothly speeds up at the end; corresponds to cubic-bezier(0.42,0,1,1).
- ease-out— the animation starts quickly and smoothly slows down at the end; corresponds to cubic-bezier(0,0,0.58,1).
- ease-in-out— animation starts slowly and ends slowly; corresponds to cubic-bezier(0.42,0,0.58,1).
- cubic-bezier(x1, y1, x2, y2)- see above.
- inherit— inherits this property from the parent element.
Visual comparison
Animation with delay
Property animation-delay defines the delay before the animation starts playing, set in seconds or milliseconds. A negative delay starts the animation from certain point inside its cycle, i.e. from the time specified in the delay. This allows you to apply animation to multiple phase-shifted elements by changing only the delay time. If you want the animation to start from the middle, set a negative delay equal to half the time set in animation-duration. Not inherited.
element ( animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; // 10 seconds will pass before this animation starts)
Repeat animation
Property animation-iteration-count allows you to run the animation multiple times. Not inherited. Set the value to any positive value 1, 2, 3 … etc. or infinite for endless repetition. Meaning 0 or any negative number removes the animation from playing.
We have put together a selection for you best examples JQuery animations and CSS3. You can see source to understand how each example is animated.
Working clock based on CSS3
A working clock in CSS3, the example uses CSS animations and shapes, no images or JavaScript:
Demo version Download
Animated clouds with CSS3
IN in this example Only CSS3 animation is used:
Demo version Download
Animated weather icons using CSS3
Demo version Download
Loading Animations with CSS3
Demo version Download
3D spinning planet based on CSS3
Great idea and combination of two concepts. And with a little tweaking of the scaling and animation, you can get amazing results!
Demo version Download
Text Animation Effect
Demo version Download
3D animated chart
3D diagram created with using HTML And CSS3 Transforms. The shadows are created using CSS gradients, the animation is created using transitions. AngularJS is used to update data:
Demo version Download
jQuery snow animation effect
Demo version Download
CSS3 loading animations
Demo version Download
Animated hamburger menu icon in CSS3
Demo version Download
AT-AT (Star Wars Walking Armored Car) in CSS3
An example I created in CSS3. We could of course reduce the number of divs used to create the body parts. It would also be worth optimizing the example and adding a JQuery class with animation:
Demo version Download
Gran Turismo
Demo version Download
3D Solar System
Demo version Download
Smoke animation
This is the CSS3 version of the animation. Puffs of smoke are created without images, and animation is set without using JavaScript and jQuery animation effects:
Demo version Download
Animated logo
Demo version Download
IE10 3D cube
Demo version Download
CSS3 based flame animation
Demo version Download
Batman logo on -webkit- CSS3 animation
Demo version Download
CSS based weather app design concept
Demo version Download
Animating nature with CSS3
Demo version Download
Walking cat (loop without jQuery animation)
Demo version Download
3D terminal on CSS3
Demo version Download
Animated graph in CSS3
Line graph in HTML and CSS3. When you hover your mouse over a section, its name is displayed. The data is populated and updated using AngularJS. The rotation transformation is manually applied to the plot points, and the animation is set using CSS3 transitions:
Demo version Download
Rotating 3D HTML Forms with CSS3
Demo version Download
Connection indicator animations based on CSS3
Demo version Download
Steps animation in Jquery
JQuery Animation example illustrating the animation timing function: steps() in combination with a sprite sheet:
Advanced trajectory animation
Animation using SVG, which can be useful when developing trajectory animation:
Download / Additional information
Scrolling animations using wow.js
Download / Additional information
Animation Using CSS Sprite Sheets
Below is an example using sprite sheets with explanations without jQuery animation effects:
Download / Additional information
Animated logo for Herr Brueckers
Download / Additional information
Outline drawing animation
Download / Additional information
Infinite gallery animation based on JQuery block animation
Download / Additional information
Animated circles using CSS/SVG
Download / Additional information
SVG Animation with CSS
An example of how to animate SVG. For demonstration purposes I used the icons " Small Icons» Nick Frost and Greg Lapen:
Download / Additional information
CSS3 parallax animation of fighter jets from MySkins Studio
This is another CSS3 animation created using CSS3 parallax and keyframes, but without jQuery animation:
Download / Additional information
Animated SVG logo
Download / Additional information
Flat animated circular icon based on CSS3
Download / Additional information
Animation with setTimeout
A quick example of synchronizing an animation of a ball moving around the screen using setTimeout :
Download / Additional information
SVG sun animation using CSS
Download / Additional information
jQuery animation
Simple jQuery animation:
Download / Additional information
CSS Animation of Earth's Orbit
Download / Additional information
Animating a flying bird with CSS3
Download / Additional information
CSS3 based atom animation
Download / Additional information
3D clock animation using JS
During the development process, 3D effects CSS3 and JQuery text animation were used. The example works in Google Chrome 28.0 and Firefox 22.0. At the same time, the animation doesn't work in IE 10 due to some JQuery access bug that I didn't bother to fix:
Download / Additional information
Animated two-piece London sight wheel
Download / Additional information
Drag Race Animation
Pure CSS/HTML racing animation:
Download / Additional information
Animated birthday cake
Download / Additional information
Animated logo
This animated logo is without jQuery effects animation looks very elegant:
Download / Additional information
Animated company logo based on CSS3
Animated company logo in pure HTML/CSS3:
Download / Additional information
Animated camera icon
Download / Additional information
Animation of an orange car
Download / Additional information
Animated Wi-Fi icon
Download / Additional information
Animated responsive CSS weather icons
This is a small set of animated CSS weather icons. Please note that most of the animation is created using pseudo elements and jQuery animation:
Download / Additional information
You can control animation duration, repetition, direction, movement type, and steps. You can animate any elements, including pseudo-elements.
Required condition- presence of specific values. Properties set to auto are not animated.
Safari does not currently support pseudo element animations, please use other browsers to view the entry.
CSS animation example:
Example animation code:
@keyframes move ( 40% ( left: 50%; bottom: 75%; animation-timing-function: ease-in; ) 80% ( left: 90%; bottom: -10em; ) )
Connecting animation:
Sun ( animation: move 15s infinite linear; )
move - animation name 15s - duration infinite - endless repetition linear - movement type
@keyframes
The animation itself is set inside the @keyframes block. After @keyframes the name of the animation is given, and then inside the curly braces are its steps.
Steps can be specified using percentages or using the from and to keywords. In this case, you can change the type of animation in steps (animation-timing-function):
Animation-name
Used to set the name of the animation.
Possible values: one or more animation names. Default value: none.
animation-name: move; - one animation. animation-name: move, sun-color; - two animations, names separated by commas.
Animation-duration
The duration of the animation is controlled by the animation-duration property.
Possible values: time in seconds (s) or milliseconds (ms). In the case of several animations, the time for each of them can be specified separated by commas. The initial value is 0s.
Animation-timing-function
The property defines the animation type.
Possible values:
Smooth animation ease - sliding (default value) linear - smooth movement ease-in - acceleration towards the end ease-out - acceleration at the beginning ease-in-out - smoother sliding than ease
cubic-bezier(number,number,number,number) allows you to specify a complex animation type. It is convenient to select the values at cubic-bezier.com.
cubic-bezier(.24,1.49,.29,-0.48);
Step-by-step animation step-start and step-end - allow you to set step-by-step animation, be sure to set specific steps. In this case, with step-start changes occur at the beginning of the step, and with step-end - at the end.
step-end If you set step-start , the counter will start from ones.
steps(number) - allows you to set the number of steps in which the animation will be performed, while you can set only the last step without the need to specify intermediate ones.
Animation-iteration-count
Controls the repetition of the animation. Default value: 1 (animation plays once).
Possible values:
number - how many times to play the animation. infinite - endless repetition.
Animation-direction
Responsible for the direction of animation.
Possible values:
normal - the animation plays in the normal direction, from beginning to end. reverse - the animation is played in the opposite direction, that is, from the end. alternate - the animation is played from beginning to end, and then in the opposite direction. alternate-reverse - the animation is played from the end to the beginning, and then in the opposite direction.
Animation-play-state
Controls the stopping and playing of the animation.
Possible values: running - animation is played (default value). paused - the animation freezes on the first step.
It is not possible to control the step where the stop will be, but you can stop the animation by: hover:
Animation-delay
With animation-delay you can set a delay for the animation before it starts playing.
Possible values: time in seconds (s) or milliseconds (ms). Values can be negative. In the case of several animations, the time for each of them can be specified separated by commas. The initial value is 0s.
Animation-fill-mode
The property determines whether the animation will affect the element outside of the animation's playback time.
Possible values:
none - the animation affects the element only during playback; upon completion, the element returns to its original state. forwards - the animation affects the element after playback ends. backwards - the animation affects the element before playback begins. both - animation affects the element both before and after playback ends.
To see how backwards and both work before the animation starts playing, set animation-delay: 3s; . It also makes sense to open the example in a new window.
All these properties can be written using a short notation, for example:
Animation: timing 5s infinite alternate;
Required values are the animation name and duration. The first time value is considered the playback duration, the second - the delay.
Greetings, friends! Today we will look at a very interesting topic - creating CSS animations using a real example. The culmination of this lesson will be creating beautiful CSS million dollar logo animation.
Cool
Stammer
Lesson materials
- Sources: Download
- Basic example from the lesson: https://codepen.io/agragregra/pen/PKNavm
- Starting template from the lesson: https://github.com/agragregra/optimizedhtml-start-template
A little theory
Before you start creating an animated example, you should go over the basics CSS Animations, consider the basic terms, properties and rules for creating CSS animations.
If you already had experience creating animations in any applications, such as Adobe After Effects or the old Flash Professional (now Adobe Animate), then you should be familiar with concepts such as “Keyframes”, “Temporary functions or motion dynamics”, which, as in any other area of animation, apply to the animation of elements on a page using CSS. However, unlike working with application interfaces, you create your CSS animations by writing code in an editor.
CSS rule @keyframes
Creating a CSS animation begins by declaring the name of the animation in a block @keyframes and defining so-called animation steps or key frames.
To review the theory and basics, we will use pure CSS, and later, using a more complex example, we will use the Sass preprocessor. You can learn more about Sass in the lesson. In addition, for a deeper understanding of the basics of CSS, I also recommend reading the lessons “CSS Basics - A Guide for Little Ones” and “All CSS Selectors in One Lesson”
Let's look at the @keyframes structure and working with keyframes using a 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 the keyword @keyframes there is its name “turning”. This is the name of the block of frameframes, which we will refer to further.
After the declaration, a curly brace opens (in this example in pure CSS), in which properties for each key frame are written sequentially from 0% to 100%. 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.
This block of code with keyframes can then 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.
Accessing a block of key frames
After we have set key frames for the object (in real life this is done in parallel or even after accessing the block with key frames), we can access our newly created 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 determine how the object will initially look and in the last line of the block we refer to the block of key frames called “turning”:
Animation: turning 2s ease-out 1s infinite alternate;
If everything is relatively clear with the definition of key frames, then this line needs immediate explanation. As we see, first comes CSS property"animation". This is a shorthand form, such as the property “margin: 20px 30px 40px 50px”, which can be divided into several separate properties:
By this analogy, the composite property “animation” can be divided into several separate properties:
| animation-name | The name of the animation that is accessed from @keyframes |
| animation-duration | Duration or how long the execution of the CSS animation lasts. Can be specified in seconds (s) or milliseconds (ms) |
| animation-timing-function | Temporal function, dynamics of object movement or property changes ( ease- (by default) the animation starts slowly, accelerates and ends slowly; linear- animation occurs evenly; ease-in- starts slowly and speeds up towards the end key frame; ease-out- starts quickly and slows down smoothly at the end; ease-in-out- starts slowly and ends slowly) |
| animation-delay | Animation delay time BEFORE start. Also specified in seconds or milliseconds |
| animation-iteration-count | Number of repetitions (iterations) of animation ( infinite- infinite, or you can specify a simple number without units) |
| animation-direction | Animation direction, sequential, reverse or back-and-forth ( normal- (by default) the animation plays from start to finish and stops; alternate- plays from beginning to end and in the opposite direction; alternate-reverse- plays from end to beginning and back; reverse- the animation is played from the end.) |
| animation-play-state | Controlling animation playback ( paused(pause), running(launch), etc.). Can be applied on:hover or from a JS function if needed |
| animation-fill-mode | The state of the element before and after the animation plays. For example, the value backwards allows you to return all properties to original state immediately after applying the animation |
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 dynamics of movement) (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 access 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 is repeated endlessly and executed in the opposite direction.
As I said earlier, the short notation 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 animation.
However, most of these properties can be omitted, since most often their default values will completely satisfy most animation creation tasks. Some of them may not be written, but the rest should be indicated in the sequence that we discussed earlier. In general, for your animation to function, you only need two parameters in your composite property - the name ( animation-name) and duration ( animation-duration).
Loading...
