Meta tags:
description= A regra @keyframes especifica o código de animação. A animação é criada mudando gradualmente de um conjunto de estilos CSS para outro.;
Headings (most frequently used words):
keyframes, regra, de, da, exemplo, como, sintaxe, css, na, sequência, animação, seletor, keyframe, navegador, preenche, os, intervalos, prefixos, fornecedor, usando, palavra, chave, componentes, erros, comuns, tópicos, relacionados, prática, com, propriedade, background, color, uso, para, criar, uma, imagem, em, queda,
Text of the page (most frequently used words):
#keyframes (46), css (40), border (35), animation (30), color (25), animação (24), text (23), background (22), width (21), style (21), font (20), grid (18), html (17), para (16), aprender (15), como (14), keyframe (14), 100 (14), regra (14), column (13), transform (12), left (11), top (11), você (10), rule (10), break (10), propriedade (9), que (9), title (9), position (9), right (9), bottom (9), image (9), não (8), name (8), height (8), overflow (8), stroke (8), w3docs (7), uma (7), propriedades (7), body (7), div (7), margin (7), exemplo (7), padding (7), decoration (7), offset (7), flex (7), sintaxe (6), page (6), são (6), elemento (6), com (6), copiar (6), head (6), the (6), element (6), radius (6), seletores (6), estilos (6), align (6), type (6), variant (6), todos (5), chave (5), sequência (5), valores (5), opacity (5), por (5), transition (5), line (5), last (5), outline (5), child (5), formatter (5), generator (4), prática (4), prefixos (4), navegador (4), justify (4), items (4), apenas (4), especifica (4), estilo (4), timing (4), function (4), duration (4), mesmo (4), regras (4), from (4), infinite (4), origin (4), max (4), auto (4), identificador (4), mode (4), fill (4), size (4), list (4), template (4), row (4), gap (4), nth (4), first (4), sobre (3), json (3), code (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), javascript (3), palavra (3), fornecedor (3), seletor (3), this (3), especificar (3), abreviada (3), código (3), especificação (3), mudar (3), outro (3), count (3), entre (3), forma (3), animações (3), dentro (3), nome (3), palavras (3), nomes (3), define (3), obrigatório (3), experimente (3), class (3), example (3), rotate (3), min (3), document (3), doctype (3), valor (3), verde (3), azul (3), ponto (3), backgrounds (3), your (3), display (3), pontos (3), pode (3), scale (3), word (3), wrap (3), spacing (3), range (3), before (3), after (3), letter (3), content (3), columns (3), direction (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), ferramentas (2), python (2), java (2), git (2), livros (2), snippets (2), tópicos (2), relacionados (2), erros (2), comuns (2), componentes (2), usando (2), preenche (2), intervalos (2), porcentagens (2), das (2), correto (2), vezes (2), iteration (2), curva (2), dos (2), important (2), dois (2), blocos (2), totalmente (2), eles (2), initial (2), ser (2), nada (2), até (2), cada (2), block (2), porcentagem (2), selector (2), 150 (2), media (2), default (2), img (2), container (2), 200 (2), translatex (2), fall (2), uso (2), 8ebf42 (2), 1c87c9 (2), definimos (2), seguida (2), cinza (2), início (2), cor (2), fundo (2), será (2), claro (2), final (2), property (2), esse (2), sem (2), necessários (2), ease (2), out (2), suavemente (2), passagem (2), animar (2), cores (2), intermediários (2), permite (2), declaração (2), equivalente (2), marca (2), chaves (2), durante (2), conjunto (2), longo (2), gradualmente (2), visibility (2), unicode (2), delay (2), shadow (2), rendering (2), skip (2), perspective (2), inside (2), anchor (2), path (2), object (2), blend (2), rows (2), start (2), end (2), flow (2), feature (2), empty (2), counter (2), repeat (2), read (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, idioma, política, privacidade, contato, empresa, try, tutoriais, exemplos, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, podemos, duas, oito, possível, declarar, múltiplos, permitem, diferentes, usados, quantas, repete, suavização, quanto, tempo, leva, ciclo, seleciona, qual, executada, vincula, definição, descarta, especificamente, declarações, ignorado, compartilharem, último, definido, prevalece, mesclados, duplicadas, cascateiam, evite, reservadas, unset, inherit, none, diferenciam, maiúsculas, minúsculas, podem, globais, move, referencie, partir, forneça, diferente, zero, sozinho, faz, contém, aplicar, declaration, duração, aceita, identifier, descrição, componente, alt, https, api, uploads, 0001, 0710cad7a1017902166203def268a0df2a5fd545, png, src, deg, center, hidden, 600, 320, criar, imagem, queda, relative, red, neste, animamos, primeiro, isso, significa, atingir, próximo, meio, tornará, animated, cccccc, using, shorthand, apply, rules, definir, aplicá, assim, fica, consiste, escolhido, pelo, desenvolvedor, vincular, usado, styles, animationname, suportada, navegadores, modernos, necessidade, legados, mais, moz, webkit, omitir, usa, computado, existente, aquela, extremidade, ausente, ausentes, inferidos, interpolação, linear, etc, vem, ritmo, controlado, separadamente, numéricos, animam, mudam, instantaneamente, transição, gradual, animáveis, interpoladas, algumas, governam, preenchimento, intermediário, declara, nos, quadro, mesclam, nesse, intervalo, nunca, precisa, conta, própria, interpola, também, agrupar, compartilham, mesmos, separando, vírgulas, pulse, está, limitado, adicionar, controlar, quantos, forem, bloco, inclui, seus, usar, definem, quando, devem, atualizado, várias, seu, seguidos, conjuntos, seja, normal, delimitados, parte, central, base, usadas, diversas, essa, deve, acontecer, momentos, específicos, definindo, criada, mudando, 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, 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, bleed, attachment, backface, appearance, play, state, self, all, properties, visited, valid, target, selection, scope, root, required, write, placeholder, optional, not, link, lang, invalid, indeterminate, hover, fullscreen, focus, enabled, disabled, dir, checked, active, selectors, css3, guia, flexbox, guides, gradientes, tabelas, links, introdução, basic, entrar, pesquisar, formatters, url, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,
Text of the page (random words):
regra css keyframes w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender css css basic introdução ao css uso do css sintaxe css css id e class css text css font css links tabelas css css border css padding css margin nomes de cores css gradientes css css guides guia do flexbox propriedades css3 css selectors seletores 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 regra css keyframes a regra keyframes especifica o código de animação a animação é criada mudando gradualmente de um conjunto de estilos css para outro a at rule keyframes é a base para as animações de keyframe usadas para animar mudar gradualmente de um estilo para outro diversas propriedades css essa regra permite especificar o que deve acontecer em momentos específicos durante a animação definindo estilos para os keyframes ou pontos de passagem ao longo da sequência de animação a regra keyframes é uma parte central da especificação de animações css a regra keyframes e seu identificador são seguidos por conjuntos de regras ou seja regras de estilo com seletores e blocos de declaração como no código css normal delimitados por chaves keyframes na sequência de animação dentro das chaves os seletores de keyframe definem quando os estilos devem mudar durante a sequência de animação o conjunto de estilos css pode ser atualizado várias vezes ao longo da animação seletor de keyframe o bloco de declaração de keyframe inclui propriedades css e seus valores um seletor de keyframe pode usar uma porcentagem ou as palavras chave from equivalente a 0 e to equivalente a 100 0 marca o início da animação e 100 marca o final você não está limitado a dois keyframes adicionar seletores intermediários como 25 ou 75 permite controlar a animação em quantos pontos forem necessários keyframes pulse 0 transform scale 1 50 transform scale 1 2 100 transform scale 1 copiar você também pode agrupar seletores que compartilham os mesmos estilos separando os por vírgulas 0 100 opacity 1 como o navegador preenche os intervalos você declara estilos apenas nos pontos de passagem dos keyframes o navegador interpola cada quadro entre eles se você animar background color de verde em 0 para azul em 50 as cores se mesclam suavemente nesse intervalo você nunca precisa especificar os valores intermediários por conta própria algumas regras governam esse preenchimento intermediário apenas propriedades animáveis são interpoladas valores numéricos e de cor como width opacity transform e color animam suavemente propriedades como display mudam instantaneamente entre os keyframes sem transição gradual o ritmo é controlado separadamente a forma da curva de interpolação linear ease ease in out etc vem de animation timing function não de keyframes from to ausentes são inferidos se você omitir o keyframe 0 ou 100 o navegador usa o valor computado existente do elemento para aquela propriedade como o ponto de extremidade ausente prefixos de fornecedor a regra keyframes é totalmente suportada por todos os navegadores modernos sem necessidade de prefixos de fornecedor prefixos legados como webkit ou moz não são mais necessários sintaxe sintaxe da at rule css keyframes keyframes animationname keyframes selector css styles copiar usando keyframes como palavra chave a regra keyframes consiste na palavra chave keyframes seguida de um identificador escolhido pelo desenvolvedor que define a animação para vincular a animação a um elemento esse identificador é usado como valor da propriedade animation name é assim que fica como definir uma animação e aplicá la a um elemento define the animation keyframes your animation name style rules apply it to an element element animation name your animation name or using the animation shorthand property animation your animation name 1 s copiar exemplo da regra keyframes com a propriedade background color exemplo de at rule css keyframes doctype html html head title title of the document title style element padding 50 px animation backgrounds 4 s infinite keyframes backgrounds 0 background color 8ebf42 50 background color 1c87c9 100 background color cccccc style head body h2 keyframes example h2 div class element the background of this text is animated div body html copiar experimente você mesmo neste exemplo animamos a propriedade background color primeiro definimos um identificador para a animação backgrounds em seguida definimos os seletores de keyframe 0 50 e 100 e os valores da propriedade verde azul e cinza isso significa que no ponto de início 0 a cor de fundo será verde claro até atingir o próximo keyframe 50 no meio da sequência de animação o fundo se tornará azul claro e no ponto final 100 será cinza exemplo da regra keyframes exemplo de at rule css keyframes com valor infinite doctype html html head title title of the document title style div width 10 px height 100 px background red border radius 50 position relative animation element 4 s infinite keyframes element 0 top 0 px background 1c87c9 width 100 px 100 top 200 px background 8ebf42 width 150 px style head body h2 keyframes rule example h2 div div body html copiar experimente você mesmo exemplo de uso da regra keyframes para criar uma imagem em queda exemplo de at rule css keyframes com a propriedade transform doctype html html head title title of the document title style html body height 90 container margin 30 px auto min width 320 px max width 600 px height 90 overflow hidden img transform origin left center animation fall 5 s infinite keyframes fall from transform rotate 0 translatex 0 opacity 1 to transform rotate 90 deg translatex 200 px opacity 0 1 style head body h2 keyframes example h2 div class container img src https api w3docs com uploads media default 0001 01 0710cad7a1017902166203def268a0df2a5fd545 png alt w3docs width 150 height 50 div body html copiar experimente você mesmo componentes da sintaxe componente descrição identifier especifica o nome da animação obrigatório keyframe selector especifica a porcentagem da duração da animação aceita 0 a 100 from 0 ou to 100 obrigatório declaration block contém as propriedades e valores css a aplicar em cada keyframe obrigatório erros comuns keyframes sozinho não faz nada a regra apenas define a animação nada se move até que você referencie o nome a partir de um elemento com a propriedade animation name ou a forma abreviada animation e forneça uma animation duration diferente de zero os nomes diferenciam maiúsculas de minúsculas e não podem ser palavras chave globais do css evite palavras reservadas como none initial inherit e unset como nomes de animação regras de keyframe duplicadas cascateiam se dois blocos keyframes compartilharem o mesmo nome o último definido prevalece totalmente eles não são mesclados important dentro de um keyframe é ignorado a especificação de animações descarta especificamente as declarações important dentro dos keyframes tópicos relacionados animation a forma abreviada que vincula uma definição de keyframe a um elemento animation name seleciona qual regra keyframes é executada animation duration quanto tempo leva um ciclo animation timing function a curva de suavização entre keyframes animation iteration count quantas vezes a animação se repete prática prática o que é correto sobre os keyframes css o que é correto sobre os keyframes css os keyframes são usados para mudar o estilo de um elemento de um estilo para outro não permitem especificação de porcentagens diferentes da animação a regra keyframes especifica o código de animação não é possível declarar múltiplos keyframes em css a propriedade animation é uma propriedade abreviada para oito das propriedades de animação podemos especificar apenas duas porcentagens 0 e 100 para a animação verificar was this page helpful yes no previous justify items next left on this page keyframes na sequência de animação seletor de keyframe como o navegador preenche os intervalos prefixos de fornecedor sintaxe usando keyframes como palavra chave componentes da sintaxe erros comuns tópicos relacionados prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores
|
