css淡入淡出_CSS淡入淡出

css淡入淡出

Web developers have been using fade ins and fade outs (basic opacity animation) on their website for years, but the effect needed to be accomplished using JavaScript because CSS didn't have the capability to complete animations.  The tides have turned:  CSS fading is now possible thanks to CSS transitions.  Let's take a look basic CSS fading animations!

Web开发人员多年来一直在其网站上使用淡入和淡出(基本不透明动画)，但是必须使用JavaScript才能达到效果，因为CSS无法完成动画。 潮流已经转变：由于CSS过渡，现在CSS褪色成为可能。 让我们看一下基本CSS淡入淡出动画！

CSS FadeIn和FadeOut (CSS FadeIn and FadeOut)

The principle behind fading is animating opacity, so the transition will address just that property:

淡入淡出的原理是动画不透明度，因此过渡将仅处理该属性：

/* fades in upon hover */
.fadeIn {
	opacity: 0;
}
.fadeIn:hover {
	opacity: 1;
}

The example above illustrates a CSS fade in, while the example below illustrates a fade out:

上面的示例说明了CSS淡入，而下面的示例说明了淡出：

/* fades in upon hover */
.fadeIn {
	opacity: 1;
}
.fadeIn:hover {
	opacity: 0;
}

The examples above illustrate CSS fades during hover states, but what if you want to fade an element in or out without relying on use interactions. In this case, CSS animations are the better call:

上面的示例说明了在悬停状态下CSS淡入，但是如果要在不依赖于使用交互的情况下淡入或淡出元素该怎么办。 在这种情况下，最好使用CSS动画：

/* basic fadein */
@keyframes fadeIn {
	0% { opacity: 0 }
	100% { opacity: 1 }
}

.fadeIn {
	animation-name: fadeIn;
	opacity: 1;
}

Add the fadeIn class to the element you'd like to fade in (via JavaScript) and the job is done! A fade out would simply be the inverse of the code above.

将fadeIn类添加到您要淡入的元素(通过JavaScript)中，工作就完成了！ 淡出只是上面代码的反函数。

CSS fade animations are child's play these days.  CSS is has advanced quickly and there's no need to use JavaScript these days.  Use CSS transitions and fading is easy!

目前，CSS淡入淡出动画是儿童游戏。 CSS的发展很快，如今已经不需要使用JavaScript。 使用CSS过渡，褪色很容易！

翻译自: https://davidwalsh.name/css-fade

css淡入淡出