Ejemplo 1: opacidad de transición css
/* Answer to: "css transition opacity" */
/*
CSS transitions allows you to change property values smoothly,
over a given duration.
*/
.myClass {
vertical-align: top;
transition: opacity 0.3s; /* Transition should take 0.3s */
-webkit-transition: opacity 0.3s; /* Transition should take 0.3s */
opacity: 1; /* Set opacity to 1 */
}
.myClass:hover {
opacity: 0.5; /* On hover, set opacity to 2 */
}
/*
From `opacity: 1;` to `opacity: 0.5;`, the transition time should
take 0.3 seconds as soon as the client starts to hover over the
element.
*/
Ejemplo 2: animación de opacidad CSS
<style>
.myelement{
animation: fade-out;
}
@keyframes fade-out{
0%{
opacity: 1.0
}
100{
opacity: 0.0
}
}
</style>
Ejemplo 3: transición de opacidad en CSS
/*
Opacity transition in CSS
By using this we can add element transition with some delay.
And due to transition delay its look like animation of element.
*/
div {
transition: opacity 0.5s; /* Transition should take 0.3s */
-webkit-transition: opacity 0.5s; /* Transition should take 0.3s */
opacity: 1; /* Set opacity to 1 */
}
/*
I hope it will help you.
Namaste
*/
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)