Meta tags:
description=Aprende sobre la propiedad animation de CSS para animar gradualmente propiedades CSS con valores discretos. Ver ejemplos.;

Headings (most frequently used words):

animation, de, la, ejemplo, propiedad, con, el, propiedades, relacionadas, animación, valor, regla, name, duration, timing, function, delay, direction, iteration, count, fill, mode, play, state, múltiples, animaciones, css, at, keyframes, respetar, movimiento, reducido, errores, comunes, práctica, keyframe, algunas, ease, forwards, running, en, un, selector,

Text of the page (most frequently used words):
#animation (137), #animación (46), html (41), background (40), border (37), css (36), propiedad (36), color (36), style (34), keyframes (31), div (31), left (26), element (25), body (23), text (23), los (22), width (22), con (21), que (21), font (21), copiar (20), head (20), top (19), propiedades (18), 100 (18), grid (18), count (17), las (17), ejemplo (17), iteration (16), delay (16), aprender (15), fill (15), mode (15), direction (15), name (15), infinite (15), height (15), para (14), position (14), play (13), timing (13), function (13), duration (13), valores (13), the (13), column (13), pulse (12), ease (12), state (11), regla (11), una (11), como (11), 200 (11), valor (11), forwards (10), pruébalo (10), mismo (10), 1c87c9 (10), margin (10), doctype (10), elemento (10), padding (10), break (10), animaciones (9), transform (9), none (9), alternate (9), initial (9), sintaxis (9), right (9), bottom (9), image (9), align (8), tiempo (8), esta (8), flex (8), running (8), inherit (8), stroke (8), animar (7), keyframe (7), example (7), from (7), especifica (7), webkit (7), radius (7), overflow (7), decoration (7), offset (7), relacionadas (6), movimiento (6), page (6), shorthand (6), transition (6), define (6), duración (6), pueden (6), auto (6), class (6), 8ebf42 (6), relative (6), predeterminado (6), safari (6), debe (6), title (6), reverse (6), hacia (6), type (6), variant (6), w3docs (5), práctica (5), javascript (5), múltiples (5), nombre (5), por (5), display (5), antes (5), ciclo (5), clave (5), reproduce (5), cómo (5), size (5), line (5), last (5), outline (5), child (5), formatter (5), generator (4), this (4), elementos (4), sin (4), siguientes (4), después (4), visibility (4), puede (4), 150 (4), justify (4), content (4), items (4), here (4), estilo (4), backwards (4), before (4), normal (4), 120 (4), adelante (4), after (4), out (4), css3 (4), property (4), ver (4), list (4), template (4), row (4), gap (4), rule (4), nth (4), first (4), json (3), code (3), encoder (3), editor (3), cuestionarios (3), ejercicios (3), php (3), comunes (3), respetar (3), reducido (3), solo (3), está (3), sobre (3), son (3), entre (3), dos (3), qué (3), reproducir (3), línea (3), primer (3), retraso (3), time (3), nunca (3), número (3), opacity (3), cualquier (3), media (3), usuarios (3), translate (3), linear (3), selector (3), both (3), durante (3), establece (3), veces (3), palabra (3), luego (3), segundos (3), del (3), largo (3), using (3), gradualmente (3), word (3), wrap (3), spacing (3), range (3), origin (3), max (3), letter (3), columns (3), clip (3), box (3), only (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), herramientas (2), python (2), java (2), git (2), libros (2), ejemplos (2), fragmentos (2), errores (2), self (2), all (2), deben (2), lugar (2), varias (2), permite (2), usar (2), cuáles (2), afirmaciones (2), correctas (2), anima (2), hover (2), segundo (2), orden (2), último (2), termina (2), hay (2), mantener (2), funciona (2), interpolar (2), más (2), ejecutarse (2), query (2), prefers (2), reduced (2), motion (2), nudge (2), center (2), set (2), ccc (2), paused (2), pausa (2), ejecute (2), reglas (2), tanto (2), establecidos (2), depende (2), two (2), one (2), number (2), document (2), entero (2), negativo (2), reproducirá (2), reproducirse (2), uno (2), establecer (2), myfirst (2), atrás (2), aplicar (2), inverso (2), milisegundos (2), inicio (2), cubic (2), bezier (2), cada (2), animated (2), d5dce8 (2), cuando (2), sola (2), vez (2), estilos (2), cuántas (2), comenzar (2), cuánto (2), individuales (2), longhands (2), este (2), selectores (2), puntos (2), equivalente (2), punto (2), unicode (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), min (2), rows (2), start (2), end (2), flow (2), feature (2), empty (2), counter (2), repeat (2), read (2), hash (2), 2026, todos, derechos, reservados, hecho, desarrolladores, idioma, política, privacidad, contacto, acerca, empresa, try, tutoriales, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, comprobar, aplicarse, directamente, efecto, tiene, especificado, usa, definir, mueve, escala, rota, ideal, estados, evento, elige, importa, mantiene, nada, iteraciones, finito, señaló, anteriormente, también, eficientes, keyword, animan, predeterminada, tienen, oportunidad, buena, envolver, esencial, tus, sigan, siendo, accesibles, reduce, grande, constante, provocar, náuseas, mareos, migrañas, algunos, sistemas, operativos, exponen, configuración, reducir, puedes, respetarla, desactivando, reduciéndolas, esos, mientras, mantienes, demás, posible, declarar, necesitas, separar, comas, reproduciendo, blue, aplicará, ningún, seguir, obtener, mantenerlos, período, asumir, aplicado, sets, times, cycle, should, played, stopping, 83bf42, cero, advertencia, detenerse, pero, positivo, estableces, forma, indefinida, plays, 666, 030e10, 8dc3cf, invierte, repite, sentido, ciclos, alternos, starts, seconds, 300, carga, progresará, toda, eee, tarda, completar, ocurrirá, deseas, mayormente, flexible, recordar, estar, presente, aparecen, omitido, vuelve, omitir, same, can, declared, declare, actions, algunas, veamos, ahora, acción, ejecuta, ida, vuelta, reproducirla, inicia, mitad, espera, curva, velocidad, dentro, 500ms, dura, todas, declaración, estándar, resumen, continuación, vinculamos, durará, cambiará, fondo, verde, gris, llaves, ponemos, definen, fotogramas, referencia, secuencia, cambiar, porcentaje, palabras, final, consiste, seguida, identifica, aplica, utilizando, identificador, primero, debes, especificar, debería, ocurrir, momentos, específicos, esto, usan, tampoco, hidden, información, navegadores, antiguos, requerir, prefijo, compatibilidad, versiones, anteriores, construye, partir, partes, describe, sus, indica, esa, dirección, etc, página, cubre, ocho, longhand, impulsa, ejecutar, prefieren, cambiando, necesidad, cuyos, dimensiones, diseño, posición, aprende, discretos, zoom, index, writing, will, change, widows, white, space, vertical, user, select, bidi, underline, orientation, indent, ink, combine, upright, table, layout, tab, linecap, dashoffset, dasharray, speak, shape, outside, scrollbar, scroll, behavior, resize, quotes, pointer, events, place, orphans, order, rotate, distance, fit, mix, lines, clamp, isolation, import, hyphens, hanging, punctuation, areas, area, weight, numeric, ligatures, east, asian, caps, alternates, stretch, language, override, adjust, kerning, values, settings, family, face, float, shrink, grow, basis, filter, cells, cursor, reset, increment, span, clear, charset, caret, caption, side, sizing, source, slice, outset, collapse, block, bleed, attachment, backface, appearance, properties, visited, valid, target, selection, scope, root, required, write, placeholder, optional, not, link, lang, invalid, indeterminate, fullscreen, focus, enabled, disabled, dir, default, checked, active, selectors, guía, flexbox, guides, gradientes, nombres, colores, tablas, links, texto, uso, introducción, basic, iniciar, sesión, buscar, formatters, url, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,

Text of the page (random words):
animation de css te permite animar elementos cambiando gradualmente uno o más valores css con el tiempo sin necesidad de javascript funciona en propiedades cuyos valores se pueden interpolar como dimensiones de diseño border height width posición left top font size color y opacity esta página cubre el shorthand animation las ocho propiedades longhand individuales animation la regla at keyframes que las impulsa cómo ejecutar varias animaciones a la vez y cómo respetar a los usuarios que prefieren el movimiento reducido animation es una de las propiedades css3 una animación se construye a partir de dos partes una regla keyframes que describe cómo se ve el elemento en puntos a lo largo de la línea de tiempo y la propiedad animation o sus longhands en el elemento que indica cómo reproducir esa línea de tiempo durante cuánto tiempo cuántas veces en qué dirección etc los navegadores antiguos pueden requerir el prefijo webkit para compatibilidad con versiones anteriores i información las propiedades que usan una palabra clave como valor como display none o visibility hidden no se pueden animar las propiedades con valores como height auto tampoco se pueden animar la regla at keyframes para usar animaciones primero debes especificar qué debería ocurrir en momentos específicos durante la animación esto se define con la regla at keyframes la regla keyframes consiste en la palabra clave keyframes seguida del nombre de la animación que identifica la animación la animación se aplica luego a un elemento utilizando este identificador como valor de la propiedad animation name entre llaves ponemos los selectores de keyframe que definen los fotogramas clave o puntos de referencia en la secuencia de animación cuando los estilos deben cambiar el selector de keyframe puede comenzar con un porcentaje o con las palabras clave from equivalente a 0 y to equivalente a 100 el 0 es el punto de inicio de la animación y el 100 es el punto final ejemplo de animación con la regla keyframe ejemplo de la propiedad animation con keyframes doctype html html head style element padding 50 px animation pulse 4 s infinite keyframes pulse 0 background color 8ebf42 50 background color 1c87c9 100 background color d5dce8 style head body div class element background of this text is animated using css3 animation property div body html copiar pruébalo tú mismo en este ejemplo vinculamos la animación al elemento div la animación durará 4 segundos y cambiará gradualmente el color de fondo del elemento div de verde a gris propiedades relacionadas con la animación animation es la propiedad shorthand para establecer todas las propiedades de animación individuales en una sola declaración los longhands estándar se resumen a continuación propiedad establece valores comunes animation name la regla keyframes a reproducir un nombre none animation duration cuánto dura un ciclo 2s 500ms predeterminado 0s sin animación animation timing function la curva de velocidad dentro de cada ciclo ease linear ease in out cubic bezier animation delay espera antes de comenzar 1s 2s negativo inicia a mitad de la animación animation iteration count cuántas veces reproducirla un número infinite animation direction hacia adelante inverso o de ida y vuelta normal reverse alternate animation fill mode estilos antes después de ejecutarse none forwards backwards both animation play state si se ejecuta o se pausa running paused veamos ahora las propiedades relacionadas con la animación en acción ejemplo de animación con algunas propiedades relacionadas keyframes pulse declare animation actions here element animation name pulse animation duration 3 5 s animation timing function ease in animation delay 1 s animation direction alternate animation iteration count infinite animation fill mode none animation play state running the same can be declared using the animation shorthand property element animation pulse 3 5 s ease in 1 s alternate infinite none running copiar el orden de los valores en el shorthand es mayormente flexible con dos reglas a recordar el nombre debe estar presente y cuando aparecen tanto una duración como un retraso el primer valor de tiempo es la duración y el segundo es el retraso cualquier valor omitido vuelve a su valor predeterminado por ejemplo omitir animation iteration count reproduce la animación una sola vez animation name esta propiedad define el nombre de la regla keyframes que deseas aplicar sintaxis de la propiedad animation name animation name keyframe name none initial inherit copiar ejemplo de la propiedad animation name doctype html html head style div padding 50 px animation element 4 s infinite keyframes element 0 background color 8ebf42 50 background color 1c87c9 100 background color d5dce8 style head body h2 animation name example h2 div the name of the animation is set as element div body html copiar pruébalo tú mismo animation duration define la duración en segundos o milisegundos que tarda la animación en completar un ciclo si esta propiedad no se especifica la animación no ocurrirá sintaxis de la propiedad animation duration animation duration time initial inherit copiar ejemplo de la propiedad animation duration doctype html html head style element padding 50 px animation pulse 7 s infinite keyframes pulse 0 background color 8ebf42 50 background color 1c87c9 100 background color eee style head body div class element background of this text is animated using css3 animation property div body html copiar pruébalo tú mismo animation timing function esta propiedad define cómo progresará una animación a lo largo de la duración de cada ciclo no a lo largo de toda la animación sintaxis de la propiedad animation timing function animation timing function linear ease ease in ease out ease in out cubic bezier n n n n initial inherit copiar ejemplo de la propiedad animation timing function con el valor ease doctype html html head title the title of the document title style div width 100 px height 100 px border radius 50 background 1c87c9 position relative webkit animation element 5 s infinite safari 4 0 8 0 webkit animation timing function ease safari 4 0 8 0 animation element 5 s infinite animation timing function ease safari 4 0 8 0 webkit keyframes element from left 0 px to left 200 px keyframes element from left 0 px to left 200 px style head body h2 animation timing function example h2 div div body html copiar pruébalo tú mismo animation delay esta propiedad establece el tiempo en segundos o milisegundos entre la carga del elemento y el inicio de la animación sintaxis de la propiedad animation delay animation delay time initial inherit copiar ejemplo de la propiedad animation delay ejemplo de la propiedad css animation delay doctype html html head style div width 120 px height 120 px background 1c87c9 position relative animation delay 5 s infinite animation delay 3 s keyframes delay from left 0 px to left 300 px style head body h2 animation delay example h2 p here the animation starts after 3 seconds p div div body html copiar pruébalo tú mismo animation direction define si la animación debe reproducirse en sentido inverso en ciclos alternos o no sintaxis de la propiedad animation direction animation direction normal reverse alternate alternate reverse initial inherit copiar se pueden aplicar los siguientes valores normal predeterminado la animación se reproduce hacia adelante keyframes 0 100 reverse la animación se reproduce hacia atrás keyframes 100 0 alternate la animación se reproduce hacia adelante luego se invierte y se repite alternate reverse la animación se reproduce hacia atrás y luego hacia adelante ejemplo de la propiedad animation direction doctype html html head style div width 120 px height 120 px background ccc position relative animation myfirst 5 s 1 animation direction normal keyframes myfirst 0 background 8dc3cf left 0 px top 0 px 25 background 1c87c9 left 200 px top 0 px 50 background 030e10 left 200 px top 200 px 75 background 666 left 0 px top 200 px 100 background 8ebf42 left 0 px top 0 px style head body h2 animation direction example h2 p here the animation plays forwards p div div body html copiar pruébalo tú mismo animation iteration count establece el número de veces que un ciclo de animación debe reproducirse antes de detenerse el valor predeterminado es uno pero se puede establecer cualquier valor entero positivo si estableces la palabra clave infinite la animación se reproducirá de forma indefinida advertencia un entero cero o negativo nunca reproducirá la animación sintaxis de la propiedad animation iteration count animation iteration count number infinite initial inherit copiar ejemplo de la propiedad animation iteration count ejemplo de la propiedad css animation iteration count doctype html html head title title of the document title style html body margin 0 padding 0 div position relative width 100 px height 100 px margin 30 px 0 border radius 50 animation name pulse element one background color 1c87c9 animation duration 3 s animation iteration count 3 element two margin 0 background color 83bf42 animation duration 5 s animation iteration count 2 keyframes pulse 0 left 0 50 left 50 100 left 0 style head body h2 the animation iteration count example h2 p the animation iteration count sets the number of times an animation cycle should be played before stopping p div class element one div div class element two div body html copiar pruébalo tú mismo animation fill mode esta propiedad especifica un estilo para el elemento aplicado antes o después de que se ejecute la animación sintaxis de la propiedad animation fill mode animation fill mode none forwards backwards both initial inherit copiar puede asumir los siguientes valores forwards especifica que el elemento debe mantener los valores de estilo establecidos por el último keyframe depende de las propiedades animation iteration count y animation direction backwards especifica que el elemento debe obtener los valores de estilo establecidos por el primer keyframe depende de animation direction y mantenerlos durante el período animation delay both especifica que la animación debe seguir las reglas tanto de forwards como de backwards none predeterminado especifica que no se aplicará ningún estilo al elemento antes ni después de que se ejecute la animación ejemplo de la propiedad animation fill mode con el valor forwards doctype html html head style div width 100 px height 100 px background 1c87c9 position relative webkit animation element 5 s safari 4 0 8 0 webkit animation fill mode forwards safari 4 0 8 0 animation element 5 s animation fill mode forwards safari 4 0 8 0 webkit keyframes element from top 0 px to top 200 px background color blue keyframes element from top 0 px to top 200 px background color 8ebf42 style head body h2 animation fill mode example h2 div div body html copiar pruébalo tú mismo animation play state esta propiedad especifica si la animación se está reproduciendo o está en pausa sintaxis de la propiedad animation play state animation play state paused running initial inherit copiar el valor predeterminado es running ejemplo de la propiedad animation play state con el valor running doctype html html head style div width 150 px height 150 px background ccc position relative animation play 10 s animation play state running keyframes play from left 0 px to left 200 px style head body h2 animation play state example h2 p here the animation play state is set to running p div div body html copiar pruébalo tú mismo múltiples animaciones es posible declarar múltiples animaciones en un selector solo necesitas separar los valores con comas ejemplo de múltiples animaciones en un selector ejemplo de múltiples animaciones con la propiedad animation doctype html html head style html body height 100 margin 0 body display flex align items center justify content center element height 200 px width 200 px background color 1c87c9 animation pulse 5 s ease infinite alternate nudge 5 s linear infinite alternate keyframes pulse 0 100 background color 8ebf42 50 background color 1c87c9 keyframes nudge 0 100 transform translate 0 0 50 transform translate 150 px 0 80 transform translate 150 px 0 style head body div class element div body html copiar pruébalo tú mismo respetar el movimiento reducido el movimiento grande o constante puede provocar náuseas mareos o migrañas en algunos usuarios los sistemas operativos exponen una configuración de reducir movimiento y puedes respetarla con la media query prefers reduced motion desactivando las animaciones o reduciéndolas para esos usuarios mientras las mantienes para los demás element animation pulse 4 s infinite media prefers reduced motion reduce element animation none copiar es una buena práctica envolver cualquier movimiento no esencial en esta query para que tus animaciones sigan siendo accesibles errores comunes sin animation duration no hay animación la duración predeterminada es 0s por lo que los keyframes nunca tienen oportunidad de ejecutarse los valores keyword y auto no se animan como se señaló anteriormente las propiedades como display visibility y height auto no se pueden interpolar anima opacity y transform en su lugar también son las más eficientes de animar forwards solo funciona si el número de iteraciones es finito animation fill mode forwards mantiene el último keyframe después de que termina la animación con infinite nunca termina por lo que no hay nada que mantener el orden importa para los valores de tiempo en el shorthand el primer time es la duración el segundo es el retraso propiedades relacionadas keyframes define la línea de tiempo de la animación animation name elige qué regla keyframes reproducir transition anima entre dos estados en un evento como hover transform mueve escala y rota elementos ideal para animar práctica práctica cuáles de las siguientes afirmaciones sobre la animación css son correctas cuáles de las siguientes afirmaciones sobre la animación css son correctas css permite animar elementos html sin usar javascript la propiedad animation en css es una propiedad shorthand para varias propiedades de animación como animation name animation duration animation timing function animation delay animation iteration count animation direction en la animación css la regla keyframes se usa para definir la animación el efecto de animación solo tiene lugar si el nombre de la animación no está especificado las propiedades de animación css deben aplicarse directamente a los elementos html comprobar was this page helpful yes no previous all next align self on this page la regla at keyframes propiedades relacionadas con la animación animation name animation duration animation timing function animation delay animation direction animation iteration count animation fill mode animation play state múltiples animaciones respetar el movimiento reducido errores comunes propiedades relacionadas práctica w3docs tutoriales ejemplos ejercicios fragmentos y cuestionarios gratuitos para la web desde 2014 libros aprender html a...