css淡⼊淡出_CSS淡⼊淡出
css淡⼊淡出
Web developers have been using fade ins and fade outs (basic animation) on their website for years, but the effect needed to be accomplished using JavaScript becau CSS didn't have the capability to complete animations. The tides have turned: CSS fading is now possible thanks to . Let's take a look basic CSS fading animations!
Web开发⼈员多年来⼀直在其⽹站上使⽤淡⼊和淡出(基本动画)，但是必须使⽤JavaScript才能达到效果，因为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 u interactions. In this ca, 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 inver of the code above.
女生卡通图片将fadeIn类添加到您要淡⼊的元素(通过JavaScript)中，⼯作就完成了！ 淡出只是上⾯代码的反函数。
CSS fade animations are child's play the days. CSS is has advanced quickly and there's no need to u JavaScript the days. U CSS transitions and fading is easy!
老师你好骚
⽬前，CSS淡⼊淡出动画是⼉童游戏。 CSS的发展很快，如今已经不需要使⽤JavaScript。 使⽤CSS过渡，褪⾊很容易！
教师的专业素养
翻译⾃:
梦见树上开花
css淡⼊淡出
