transiciones - Transición CSS3-Efecto de fundido de salida
transition css hover (6)
Estoy tratando de implementar el efecto "fade out" en CSS puro. Aquí está el fiddle . Estudié un par de soluciones en línea, sin embargo, después de leer la documentación en línea , estoy tratando de descubrir por qué la animación de diapositivas no funcionaría. ¿Alguna sugerencia?
Aquí está el HTML
<div class="dummy-wrap">
<div class="success-wrap successfully-saved">Saved</div>
</div>
El CSS
.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;
}
}
Aquí está la otra forma de hacer lo mismo.
efecto fadeIn
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
efecto fadeOut
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
Puedes ver el artículo detallado here.
UPDATE: Encontré una transición CSS3 tutorial más actualizada : fadeIn y fadeOut como efectos para ocultar elementos de la demostración y ejemplo de información sobre herramientas ejemplo: Mostrar Ocultar sugerencia o texto de ayuda usando CSS3 transición aquí con código de ejemplo.
Sé que ya es demasiado tarde para responder, pero publicando esta respuesta para ahorrarle tiempo a otros. Espero que te ayude!
Este es el código de trabajo para su pregunta.
Disfruta Codificando ...
<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>
Puede 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;
}
Se olvidó de agregar una propiedad de posición a la clase .dummy-wrap , y los valores top / left / bottom / right no se aplican a los elementos posicionados estáticamente (valor predeterminado)
Solo para su información, existe una biblioteca versátil llamada animate.css ustedes les puede interesar, tiene un montón de pura animación CSS3. Puede recogerlo y usarlo o aprender la técnica debajo.
.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;
}