Transición CSS3: efecto de desvanecimiento

96

Estoy tratando de implementar el efecto de "desvanecimiento" en CSS puro. Aquí está el violín . Busqué un par de soluciones en línea, sin embargo, después de leer la documentación en línea , estoy tratando de averiguar por qué la animación de diapositivas no funcionaría. ¿Algún consejo?

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}

.success-wrap {
  width: 75px;
  min-height: 20px;
  clear: both;
  margin-top: 10px;
}

.successfully-saved {
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 40px;
  margin-bottom: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #00b953;
}

@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-moz-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-webkit-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-o-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}
<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>
Expandir fragmento

css css-transitions Penny Liu
fuente

Respuestas:

96

Puedes usar transiciones en su lugar:

.successfully-saved.hide-opacity{
    opacity: 0;
}

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}
karthikr
fuente
3
no necesito prefijos de navegador en estos días simplemente ol '... transición: opacidad 3s facilidad de entrada y salida;
danday74
177

Esta es otra forma de hacer lo mismo.

efecto de desvanecimiento

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

efecto fadeOut

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

UPDATE 1: Encontré un tutorial más actualizado CSS3 Transition: fadeIn y fadeOut como efectos para ocultar mostrar elementos e información sobre herramientas.Ejemplo: Mostrar Ocultar sugerencia o texto de ayuda usando la transición CSS3 aquí con código de muestra.

UPDATE 2: (Detalles agregados solicitados por @ big-money)

Al mostrar el elemento (cambiando a la clase visible), queremos que la visibilidad: visible se active instantáneamente, por lo que está bien cambiar solo la propiedad de opacidad. Y al ocultar el elemento (cambiando a la clase oculta), queremos retrasar la visibilidad: declaración oculta, para que podamos ver primero la transición de desvanecimiento. Lo hacemos declarando una transición en la propiedad de visibilidad, con una duración de 0 y un retraso. Puedes ver el artículo detallado aquí.

Sé que es demasiado tarde para responder, pero publico esta respuesta para ahorrar tiempo a los demás. Espero que te ayude !!

immayankmodi
fuente
10
Buena respuesta, estoy buscando agregar display:nonepara borrar el cuadro cuando termine la animación "ocultar", ¿alguna idea?
Apolo
1
No estoy seguro de lo que necesita aquí, pero puede intentarlo en display:blocklugar de visibility: visibleen .visibleclase de la misma manera en display:nonelugar de visibility: hiddenen .hiddenclase del ejemplo anterior.
immayankmodi
4
@MMTac Eso no funciona ya displayque no es una de las propiedades CSS animables . Consulte Animación de "pantalla: bloque" a "pantalla: ninguna" .
peterflynn
@MayankModi ¿cuál es el punto de los primeros 0 en la visibilidad para el efecto fadeOut? Tengo entendido que solo necesita los 2
Big Money
1
@BigMoney es por duración y retraso (seguro que puede modificar esos números según sus requisitos, esos se usan solo por ejemplo). Compruebe que he actualizado los detalles, ya que esta respuesta aún está activa.
immayankmodi
13

Ya que display que no es una de las propiedades CSS animables. Un display:nonereemplazo de animación fadeOut con animaciones CSS3 puras, solo configurar width:0y height:0en el último cuadro, y usar animation-fill-mode: forwardspara mantener width:0y height:0propiedades.

@-webkit-keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}  
@keyframes fadeOut {
    0% { opacity: 1;}
    99% { opacity: 0.01;width: 100%; height: 100%;}
    100% { opacity: 0;width: 0; height: 0;}
}

.display-none.on{
    display: block;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}
Rui Wang
fuente
1
Busque animaciones de alto rendimiento . Debe evitar el uso de propiedades CSS que desencadenan el rediseño widthy heightson sensibles.
Penny Liu
4

Este es el código de trabajo para tu pregunta.
Disfrute de la codificación ...

<html>
   <head>

      <style>

         .animated {
            background-color: green;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;animation-duration: 10s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         }

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

         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeOut"></div>

   </body>
</html>
Vishal Biradar
fuente
Adjunte una explicación de su solución: ¿cómo funciona? ¿Por qué es diferente de las otras soluciones ya publicadas?
lifeisfoo
@lifeisfoo Probé con todas las soluciones, pero esta es la forma más simple y fácil de hacerlo y una cosa más importante es que el texto se desvanecerá automáticamente después de unos segundos (10). Así que no es necesario ningún clic.
Vishal Biradar
3

Olvidó agregar una propiedad de posición al .dummy-wrap clase, y los valores superior / izquierda / inferior / derecha no se aplican a los elementos posicionados estáticamente (el valor predeterminado)

http://jsfiddle.net/dYBD2/2/

Jason Yaraghi
fuente
Gracias, pero ¿cómo me escondería después de la transición?
Hay varias formas: simplemente puede aumentar el topvalor para que se mueva "fuera" de la ventana gráfica o puede usar la opacidad para la animación para que se desvanezca como parece que desea ..
Jason Yaraghi
1
genial ... Lo tengo, pero una pregunta más, ¿Por qué el div oculto vuelve a desaparecer?
3 
.fadeOut{
    background-color: rgba(255, 0, 0, 0.83);
    border-radius: 8px;
    box-shadow: silver 3px 3px 5px 0px;
    border: 2px dashed yellow;
    padding: 3px;
}
.fadeOut.end{
    transition: all 1s ease-in-out;
    background-color: rgba(255, 0, 0, 0.0);
    box-shadow: none;
    border: 0px dashed yellow;
    border-radius: 0px;
}

demo aquí.


fuente