• Skip to main content
  • Skip to primary sidebar

Portomaior

Software y Tecnología

  • Inicio
  • Blog
  • Contacto
You are here: Home / Programación / Css, cosas útiles

Css, cosas útiles

Animaciones con @keyframes

Con esta etiqueta podemos indicar una progresión automática de cambio de valores en uno o varios parámetros. Con el @keyframe creamos la secuencia, indicando desde qué valor comienza hasta cual acaba. Y con animation-name, le decimos a que le aplicamos dicha secuencia.

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

También se pueden hacer pasos intermedios con cadencias más complejas indicando en cada porción del tiempo asignado que tiene que hacer.

@keyframes slidein {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

Filed Under: Diseño Web, Programación Tagged With: css, css3, html, html5

Primary Sidebar

Categorías

  • Comercio Electrónico
  • Diccionario de Informática
  • Diccionario de Marketing
  • Diccionario SEO
  • Diseño Web
  • Docker
  • Genesis Theme para Wordpress
  • Gestión de Proyectos
  • Guías Clientes
  • Hosting
  • Java
  • Linux
  • Mac
  • Odoo
  • Podcast
  • Portfolio
  • Posicionamiento SEO
  • Programación
  • React
  • Sin categoría
  • webmin
  • Windows
  • Woocommerce
  • Wordpress

Entradas recientes

  • Alternativa Windows a CCurl >> bitsadmin
  • Spring Framework de Java (redirec GKB)
  • Chuleta de Expresiones regulares. (redirec GKB)
  • Eclipse IDE
  • Java (chuleta) (redirec GKB)

Copyright © 2025 · portomaior.com · Legal · Política de Cookies · Política de privacidad · Log in