CSS 如何使一个元素淡入，然后淡出？

我可以通过将一个不透明度为零的元素的类更改为。具有以下 css 的 elementToFadeInAndOut:

.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}

有没有一种方法，我可以使元素淡出淡出后，通过编辑 css 为同一个类？

261591 次浏览
小开
最佳答案

Use css @keyframes

.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}




@keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}

here is a DEMO

.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}


@-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}


@keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>

Reading: Using CSS animations

You can clean the code by doing this:

.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
opacity: 0;
}


@-webkit-keyframes fadeinout {
50% { opacity: 1; }
}


@keyframes fadeinout {
50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>

小开

If you need a single fadeIn/Out without an explicit user action (like a mouseover/mouseout) you may use a CSS3 animation: http://codepen.io/anon/pen/bdEpwW

.elementToFadeInAndOut {
animation: fadeInOut 4s linear 1 forwards;
}


@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

By setting animation-fill-mode: forwards the animation will retain its last keyframe

By setting animation-iteration-count: 1 the animation will run just once (change this value if you need to repeat the effect more than once)

小开

Try this:

@keyframes animationName {
0%   { opacity:0; }
50%  { opacity:1; }
100% { opacity:0; }
}
@-o-keyframes animationName{
0%   { opacity:0; }
50%  { opacity:1; }
100% { opacity:0; }
}
@-moz-keyframes animationName{
0%   { opacity:0; }
50%  { opacity:1; }
100% { opacity:0; }
}
@-webkit-keyframes animationName{
0%   { opacity:0; }
50%  { opacity:1; }
100% { opacity:0; }
}
.elementToFadeInAndOut {
-webkit-animation: animationName 5s infinite;
-moz-animation: animationName 5s infinite;
-o-animation: animationName 5s infinite;
animation: animationName 5s infinite;
}
小开

I found this link to be useful: css-tricks fade-in fade-out css.

Here's a summary of the csstricks post:

CSS classes:

.m-fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}

In React:

toggle(){
if(true condition){
this.setState({toggleClass: "m-fadeIn"});
}else{
this.setState({toggleClass: "m-fadeOut"});
}
}


render(){
return (<div className={this.state.toggleClass}>Element to be toggled</div>)
}
小开

Try creating a keyframes animation for the opacity attribute of your element:

<style>
p {
animation-name: example;
animation-duration: 2s;
}


@keyframes example {
from {opacity: 2;}
to {opacity: 0;}
}
</style>


<div>
<p>[Element to fade]</p>
</div>

(You can also set the exact percentages of animations to make it fade in/out. For example, set 0% to 2 opacity, 50% to 0 opacity, and 100% to 2 opacity. A good source for this method is W3Schools @ https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2 .)


提交答案