CSS 3: Code for implementing page fade-in animation special effects

The "@ keyframes" animation attribute in CSS3 can be used to implement some dynamic special effects. You can learn the specific syntax and parameters on the internet. This article mainly applies this animation attribute to realize the special effect on the page, for more information, see this blog.

Fade-in code:

The code is as follows:

Copy code

@ Keyframes fade-in { 0% {opacity: 0;}/* the initial state transparency is 0 */ 40% {opacity: 0;}/* the transparency of the transition state is 0 */ 100% {opacity: 1;}/* the transparency of the end state is 1 */     }  @-Webkit-keyframes fade-in {/* for webkit kernel */ 0% {opacity: 0 ;} 40% {opacity: 0 ;} 100% {opacity: 1 ;}     }  # Wrapper { Animation: fade-in;/* animation name */ Animation-duration: 1.5 s;/* animation duration */ -Webkit-animation: fade-in 1.5 s;/* for webkit kernel */     }

Directly add the above code to the topic style file, and modify # wrapper to your topic ID or class name.

The above effects were tested in Firefox 24, chrome29, and IE10. This special effect is not supported for browsing under IE9.

In addition, you can extend the display time for a part of the page, such as the sidebar. Add the following sentence:

The code is as follows:	Copy code
# Sidebar { Animation: fade-in; Animation-duration: 4S; -Webkit-animation: fade-in 1.5 s;     }

Similarly, you can set different fade-in display times for different parts of the page to achieve segmented display.