Examples of animation effects produced by CSS3

1. it takes a long time to produce an ideal and delicate animated image using photoshop. Once a part needs to be modified, you have to open the source file and pay for it.
2. Using flash to make animations is more professional and efficient than using photoshop. However, files are generally large, and small traffic and storage space cannot afford to hurt!
3. it is a very practical and flexible method to implement dynamics using javascript. Most websites currently implement more than 30% of the dynamic effects using javascript, and are more interactive than the above two, however, running js at a relatively low network speed will slow down website loading speed (which is also a disadvantage ?).
In essence, this is purely nonsense. Dynamic images are Website materials, and dynamic effects are website interactions. Can Nima be confused !!?? (Well, if you are a professional, you can't cut it apart ~~)
Well, the above is purely gibberish. The main course is started below. Amount, subject! This article applies to the small white level and do not toss dead stars, great gods and code phobia, you can bypass it ~
To achieve dynamic effects with CSS3, you only need to add a class to the block elements such as div, section, and aside you specified, and write the style to implement it easily without occupying the memory, without affecting website loading and flexible modification, it can also be used in multiple scenarios!
Let's take a look at the dynamic implementation process: Set the animation effect name to doudong (change the angle), set the animation time to 0.1 s, and change the number of times to unlimited infinite, we have completed the definition of the dynamic effect of the corresponding block! To achieve the animation loop and transition nature, we have defined an infinite change. Next we need to define a reverse change so that the animation can be changed repeatedly. We define-webkit-animation-direction: alternate; this is defined for Google chrome. Later code also only adds chrome compatibility. The firefox/opera compatible code should be expanded by yourself. Write one more, which is very simple, right!
Next, we will describe the specific implementation of the animation effect, and declare the specific content of the animation through @ keyframes doudong. We subdivided the animation process from 0%-100% into four sections, five nodes, and defined the corresponding styles loaded to these five nodes.
Here, we use the definition of the background position to achieve jitter. Note that the style defined here is symmetric, and the front and back of 50% are symmetric, because our animation is cyclical, this ensures that the transition is natural and the effect is smooth. In addition, it is best to place the animation object in a DIV/SECTION or other label container to avoid full screen running of the animation object.

The code is as follows:

Copy code

/* Left and right jitter */ . Doudong { /* Change a cycle of 5 seconds, change times infinite times */ Animation: doudong. 1 s infinite; -Webkit-animation: doudong. 1 s infinite;/* Safari and Chrome */ /* Sets the change to reverse alternate */ -Webkit-animation-direction: alternate; }  @ Keyframes doudong /**/     {  0% {background-position: 3px 0px ;} 25% {background-position: 1.5px 0 ;} 50% {background-position: 0px 0 ;} 75% {background-position:-1.5px 0 ;} 100% {background-position:-3px 0px ;} }  @-Webkit-keyframes doudong/* chrome */     {  0% {background-position: 3px 0px ;} 25% {background-position: 1.5px 0 ;} 50% {background-position: 0px 0 ;} 75% {background-position:-1.5px 0 ;} 100% {background-position:-3px 0px ;} }

Next, let's take a look at the animation charm of CSS3 through a simple example (you can see the effect by hovering your mouse over the broken navigation bar logo of the website !) :
Let's just talk about such a few examples. I hope we can make a good use of it, so that the future websites will be more compatible and lightweight!

From: http://www.zhuweisheng.com.cn/css3animation.html