CSS, как заставить элемент исчезать, а затем исчезать?

Question

я могу сделать элемент с непрозрачностью нулевого замирания в изменяя его класс .elementToFadeInAndOut со следующим CSS:

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

Есть ли способ, что я могу сделать элемент исчезать после того, как он исчезает в редактировании css для этого же класса?

Большое спасибо за ваше время.

Answer 1

Используйте CSS @keyframes

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


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

вот 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

Вы можете очистить код, делая это:

.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>

Answer 2

Если вам нужен один FadeIn/Out без явного действия пользователя (например, в наведении курсора мыши/отведении указателя мыши) вы можете использовать CSS3 animation: http://codepen.io/anon/pen/bdEpwW

.elementToFadeInAndOut { 
    -webkit-animation: fadeinout 4s linear 1 forwards; 
    animation: fadeinout 4s linear 1 forwards; 
} 

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

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

Устанавливая animation-fill-mode: forwards анимация сохранит последний ключевой кадр

Установив animation-iteration-count: 1 анимация будет работать только один раз (изменить это значение, если необходимо повторить эффект более чем один раз)

Answer 3

Попробуйте это:

@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; 
}