Foundation CSS es uno de los mejores marcos receptivos. El framework CSS se adapta a cualquier dispositivo, pantalla y es ampliamente accesible. Podemos crear hermosos sitios web receptivos con la ayuda de Foundation CSS. Es un marco altamente personalizable. Es un marco de código abierto creado por la fundación ZURB.
Foundation CSS Motion UI es una biblioteca para crear animaciones y transiciones de interfaz de usuario flexibles en sitios web. Podemos usar las animaciones integradas o crear nuestras propias animaciones usando esta biblioteca.
Foundation CSS Motion UI Built-in Transitions es un conjunto de animaciones predefinidas por Foundation CSS.
Clases de transición integradas de Foundation CSS Motion UI:
Configuración de animación:
- Velocidad: esta clase se puede utilizar para especificar o configurar la velocidad de la animación, que puede ser normal, rápida o lenta.
- Easing: esta clase se puede usar para especificar o configurar la facilidad de la animación, que puede ser lineal, fluida o de rebote.
Tipos de animación:
- Diapositiva: esta clase se utiliza para agregar los diferentes tipos de animación deslizante al objeto.
- Fade: esta clase se utiliza para agregar los diferentes tipos de animación de desvanecimiento al objeto, que puede ser de entrada o salida gradual.
- Bisagra: esta clase se usa para agregar diferentes tipos de animación de bisagra al objeto.
- Escala: esta clase se utiliza para agregar los diferentes tipos de animación de escala al objeto.
- Spin: esta clase se usa para agregar diferentes tipos de animación de giro al objeto.
Sintaxis : establezca los parámetros de velocidad y aceleración en el campo de clase del elemento y luego reproduzca la animación requerida de la siguiente manera:
<img class="fast ease" href="link" alt="text"/>
<script>
MotionUI.animateIn('img', 'slide-in-down')
</script>
Ejemplo : en el ejemplo, tenemos algunas animaciones con velocidad tan lenta y aceleración como facilidad.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />
<title>GeeksforGeeks</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
</script>
</head>
<body style="padding: 30px;">
<center>
<div class="ui header green">
<h1 style="color: green;">GeeksforGeeks</h1>
</div>
<strong>Foundation CSS Motion UI Built-in Transition</strong>
<br />
<button type="button"
class="hollow button"
onclick="playAnimation('slide-in-down')">
slide-in-down
</button>
<button type="button"
class="hollow button"
onclick="playAnimation('slide-in-right')">
slide-in-right
</button>
<button type="button"
class="hollow button"
onclick="playAnimation('fade-in')">
fade-in
</button>
<button type="button"
class="hollow button"
onclick="playAnimation('hinge-in-from-top')">
hinge-in-from-top
</button>
<button type="button"
class="hollow button"
onclick="playAnimation('hinge-in-from-middle-y')">
hinge-in-from-middle-y
</button>
<button type="button"
class="hollow button"
onclick="playAnimation('scale-in-up')">
scale-in-up
</button>
<button type="button"
class="hollow button"
onclick="playAnimation('spin-in-ccw')">
spin-in-ccw
</button>
<br />
</center>
<center>
<img id="img"
class="slow ease"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
alt="GFG_logo"/>
</center>
<script>
const playAnimation = (animation) => {
MotionUI.animateIn('#img', animation)
}
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/motion-ui.html#built-in-transitions
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA