Make a fade animation effect with CSS3

CSS3 new Animated attribute "@-webkit-keyframes", literally can see its meaning-keyframe, which is consistent with the meaning in Flash.

Animating with CSS3 the same principle as flash, we need to define the state effect at the keyframe, which is driven by the CSS3 to produce the animation effect.

Here's how you can use CSS3 to create a fade-out animation effect. The specific example can refer to the fade-in effect when you first enter this site.

1. Define the animation, named Fadein

@-webkit-keyframes fadeIn {0% {opacity: 0; /*初始状态 透明度为0*/}50% {opacity: 0; /*中间状态 透明度为0*/}100% {opacity: 1; /*结尾状态 透明度为1*/}}

2. Add the following animation code to the ID or class

#box{-webkit-animation-name: fadeIn; /*动画名称*/-webkit-animation-duration: 3s; /*动画持续时间*/-webkit-animation-iteration-count: 1; /*动画次数*/-webkit-animation-delay: 0s; /*延迟时间*/}

The above code allows for a fade-out animation effect, and the specific meaning of the code is noted in the note.

Instance address: CSS3 Fadein fade in animation animation interesting phenomenon

Make a fade animation effect with CSS3