Cuando queremos usar la transición de display:none a display:block , las propiedades de transición no funcionan. La razón de esto es que la propiedad display:none se usa para eliminar el bloque y la propiedad display:block se usa para mostrar el bloque. Un bloque no se puede mostrar parcialmente. O está disponible o no está disponible. Es por eso que la propiedad de transición no funciona.
Entonces, para la animación, usamos fotogramas clave CSS.
@keyframes animationname {keyframes-selector {css-styles;}}
¿Qué hacen los fotogramas clave?
La regla @keyframes especifica el código para la animación. Cuando un conjunto de estilo CSS se cambia a otro conjunto de estilo CSS, se crea la animación y se especifica cada vez que cambia el estilo. Puede ser en porcentaje o con las palabras clave “desde” y “hasta”, que equivaldrán a 0% y 100%. Aquí 0% es el comienzo de la animación y 100% es el final de la animación.
¿Qué navegador admite fotogramas clave y cuál es el prefijo para ese navegador?
- Chrome y safari=> -webkit-
- Mozilla => -moz-
- Ópera => -o-
Fragmento de código:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
padding: 0;
font: 20px/40px sans-serif;
}
h1 {
padding: 20px;
}
div {
width: 100%;
background: pink;
padding: 20px;
display: none;
}
body:hover div {
display: block;
-webkit-animation: slide-down 2.3s ease-out;
-moz-animation: slide-down 3.3s ease-out;
}
@-webkit-keyframes slide-down {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes slide-down {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<h1>Hover me</h1>
<div>Hello</div>
</body>
</html>
Producción:
