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):
s 19 code formatters javascript formatter css formatter html formatter json formatter php formatter buscar en w3docs k es english en deutsch de русский ru français fr español es português pt italiano it iniciar sesión aprender css css basic introducción a css uso de css sintaxis css css id y class texto en css css font css links tablas css css border css padding css margin nombres de colores css gradientes css css guides guía de flexbox propiedades de css3 css selectors selectores css active after before checked default dir disabled empty enabled first child first letter first line first of type focus fullscreen hover in range indeterminate invalid lang last child last of type link not nth child nth last child nth last of type nth of type only child only of type optional out of range placeholder read only read write required root scope selection target valid visited css properties align content align items all animation align self animation delay animation direction animation duration animation fill mode animation iteration count animation name animation play state animation timing function appearance backface visibility background background attachment background blend mode background clip background color background image background origin background position background position x background position y background repeat background size bleed block overflow border border bottom border bottom color border bottom left radius border bottom right radius border bottom style border bottom width border collapse border color border image border image outset border image repeat border image slice border image source border image width border left border left color border left style border left width border radius border right border right color border right style border right width border spacing border style border top border top color border top left radius border top right radius border top style border top width border width bottom box decoration break box shadow box sizing break after break before break inside caption side caret color charset clear clip clip path color columns column count column fill column gap column rule column rule color column rule style column rule width column span column width content counter increment counter reset cursor direction display empty cells fill filter flex flex basis flex direction flex flow flex grow flex shrink flex wrap float font font face font display font family font feature settings font feature values font kerning font size font size adjust font language override font stretch font style font variant font variant alternates font variant caps font variant east asian font variant ligatures font variant numeric font weight grid grid area grid auto columns grid auto flow grid auto rows grid column grid column end grid column gap grid column start grid gap grid row grid row end grid row gap grid row start grid template grid template areas grid template columns grid template rows hanging punctuation height hyphens image rendering import initial letter isolation justify content justify items keyframes left letter spacing line break line clamp line height list style list style image list style position list style type margin margin bottom margin left margin right margin top max height max lines max width media min height min width mix blend mode object fit object position offset offset anchor offset distance offset path offset position offset rotate opacity order orphans outline outline color outline offset outline style outline width overflow overflow anchor overflow wrap overflow x overflow y padding padding bottom padding left padding right padding top page break page break after page break before page break inside perspective perspective origin place items pointer events position quotes resize right scroll behavior scrollbar shape outside speak stroke stroke dasharray stroke dashoffset stroke linecap stroke width tab size table layout text align text align last text combine upright text decoration text decoration color text decoration line text decoration skip text decoration skip ink text decoration style text fill color text indent text justify text orientation text overflow text rendering text shadow text stroke text stroke color text stroke width text transform text underline position top transform transform origin transform style transition transition delay transition duration transition property transition timing function unicode bidi unicode range user select vertical align visibility white space widows width will change word break word spacing word wrap writing mode z index zoom propiedad animation de css aprende sobre la propiedad animation de css para animar gradualmente propiedades css con valores discretos ver ejemplos la propiedad 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 elem...
|
