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

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

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

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

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

Ответы

Ответ 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>

Ответ 2

Если вам нужен один fadeIn/Out без явного действия пользователя (например, mouseover/mouseout), вы можете использовать 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, анимация будет запускаться только один раз (измените это значение, если вам нужно повторить эффект более одного раза)

Ответ 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;
}