From fcb03e49416bab92c272105ef246c0ad80c5d465 Mon Sep 17 00:00:00 2001 From: Josiel Rocha <1158643+josielrocha@users.noreply.github.com> Date: Sat, 27 May 2023 22:12:23 -0300 Subject: [PATCH 1/3] feat: updates web/css/animation content for pt-BR --- files/pt-br/web/css/animation/index.md | 458 ++++++++++++------------- 1 file changed, 216 insertions(+), 242 deletions(-) diff --git a/files/pt-br/web/css/animation/index.md b/files/pt-br/web/css/animation/index.md index b2f9ea4ed61be5..edce259442bd75 100644 --- a/files/pt-br/web/css/animation/index.md +++ b/files/pt-br/web/css/animation/index.md @@ -5,319 +5,293 @@ slug: Web/CSS/animation {{CSSRef}} -A propriedade CSS abreviada **`animation`**, aplica uma animação entre estilos. É uma abreviação de {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, e {{cssxref("animation-play-state")}}. +A propriedade [CSS](/pt-BR/docs/Web/CSS) [abreviada](/pt-BR/docs/Web/CSS/Shorthand_properties) **`animation`**, aplica uma animação entre estilos. É uma abreviação de {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, e {{cssxref("animation-play-state")}}. {{EmbedInteractiveExample("pages/css/animation.html")}} +## Propriedades constituintes + +Esta propriedade é uma abreviação para as seguintes propriedades CSS: + +- [`animation-delay`](/pt-BR/docs/Web/CSS/animation-delay) +- [`animation-direction`](/pt-BR/docs/Web/CSS/animation-direction) +- [`animation-duration`](/pt-BR/docs/Web/CSS/animation-duration) +- [`animation-fill-mode`](/pt-BR/docs/Web/CSS/animation-fill-mode) +- [`animation-iteration-count`](/pt-BR/docs/Web/CSS/animation-iteration-count) +- [`animation-name`](/pt-BR/docs/Web/CSS/animation-name) +- [`animation-play-state`](/pt-BR/docs/Web/CSS/animation-play-state) +- [`animation-timing-function`](/pt-BR/docs/Web/CSS/animation-timing-function) + +## Sintaxe + ```css -/* @keyframes duration | timing-function | delay | +/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; -/* @keyframes name | duration | timing-function | delay */ +/* @keyframes duration | easing-function | delay | name */ animation: 3s linear 1s slidein; -/* @keyframes name | duration */ -animation: slidein 3s; +/* two animations */ +animation: 3s linear slidein, 3s ease-out 5s slideout; ``` -```html hidden -
-
-
- Given the following animation: - 
@keyframes slidein {
-  from { transform: scaleX(0); }
-  to   { transform: scaleX(1); }
-}
-
-
-
- -
-
-
animation: 3s ease-in 1s 2 reverse both paused slidein;
-
-
-
-
-
- -
-
-
animation: 3s linear 1s slidein;
-
-
-
-
-
- -
-
-
animation: 3s slidein;
-
-
-
-
-
-``` +A propriedade `animation` é especificada como uma ou mais animações separadas por vírgulas. -```css hidden -html,body { - height: 100%; - box-sizing: border-box; -} +Cada animação individual é especificada como: -pre { margin-bottom: 0; } -svg { width: 1.5em; height: 1.5em; } - -button { - width: 27px; - height: 27px; - background-size: 16px; - background-position: center; - background-repeat: no-repeat; - border-radius: 3px; - cursor: pointer; -} +- zero, uma ou tudas ocorrências do valor {{cssxref("<time>")}} -button.play { - background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play'); -} +- zero ou uma ocorrência dos seguintes valores: -button.pause { - background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause'); -} + - {{cssxref("animation", "<single-easing-function>", "#single-easing-function")}} + - {{cssxref("animation", "<single-animation-iteration-count>", "#single-animation-iteration-count")}} + - {{cssxref("animation", "<single-animation-direction>", "#single-animation-direction")}} + - {{cssxref("animation", "<single-animation-fill-mode>", "#single-animation-fill-mode")}} + - {{cssxref("animation", "<single-animation-play-state>", "#single-animation-play-state")}} -button.restart { - background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart'); -} +- um nome opcional para a animação que pode ser `none`, um {{cssxref("<custom-ident>")} ou uma {{cssxref("<string>")}} -.grid { - width: 100%; - height: 100%; - display: flex; - background: #EEE; - font: 1em monospace; -} +### Valores -.row { - display: flex; - flex: 1 auto; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; -} +- `` + - : Determina o tipo de transição. O valor deve ser um dos disponíveis em {{cssxref("easing-function")}}. +- `` + - : O número de vezes que a animação é reproduzida. O valor deve ser um dos disponíveis em {{cssxref("animation-iteration-count")}}. +- `` + - : A direção em que a animação é reproduzida. O valor deve ser um dos disponíveis em {{cssxref("animation-direction")}}. +- `` + - : Determina como os estilos devem ser aplicados no alvo da animação antes e depois de sua execução. O valor deve ser um dos disponíveis em {{cssxref("animation-fill-mode")}}. +- `` + - : Determina se a animação está sendo reproduzida ou não. O valor deve ser um dos disponíveis em {{cssxref("animation-play-state")}}. -.col { - display: flex; - flex: 1 auto; - flex-direction: column; -} +## Descrição -.cell { - box-sizing: border-box; - margin: .5em; - padding: 0; - background-color: #FFF; - overflow: hidden; - text-align: left; -} +A ordem dos valores de tempo dentro de cada definição de animação é importante: o primeiro valor que pode ser analisado como {{cssxref("<time>")}} é atribuído ao {{cssxref("animation-duration")}} , e o segundo é atribuído a {{cssxref("animation-delay")}}. -.flx { - flex: 1 0; -} +A ordem de outros valores dentro de cada definição de animação também é importante para distinguir um valor {{cssxref("animation-name")}} de outros valores. Se um valor na abreviação `animation` puder ser analisado como um valor para uma propriedade de animação diferente de `animation-name`, o valor será aplicado a essa propriedade primeiro e não a `animation-name`. Por esta razão, a prática recomendada é especificar um valor para `animation-name` como o último valor em uma lista de valores ao usar a abreviação `animation`; isso é válido mesmo quando você especifica várias animações separadas por vírgula usando a abreviação `animation`. -.note { - background: #fff3d4; - padding: 1em; - margin: .5em; - font: .8em sans-serif; - text-align: left; - flex: none; -} +Um valor `animation-name` não precisa ser declarado na propriedade abreviada `animation`. Se nenhum nome existir, não haverá animação para aplicar em nenhuma das propriedades. -.overlay { padding: .5em; } +Quando o valor `animation-duration` é omitido da propriedade abreviada `animation`, o valor padrão dessa propriedade é `0s`. Nesse caso, a animação ainda ocorrerá (o [`animationStart`](/pt-BR/docs/Web/API/Element/animationstart_event) e [`animationEnd`](/pt-BR/docs/Web/API/ Element/animationend_event) eventos serão acionados), mas nenhuma animação será visível. -@keyframes slidein { - from { transform: scaleX(0); } - to { transform: scaleX(1); } -} +## Preocupações com acessibilidade -.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } -.a2 { animation: 3s linear 1s slidein; } -.a3 { animation: 3s slidein; } +A animação piscando e piscando pode ser problemática para pessoas com problemas cognitivos, como o Transtorno de Déficit de Atenção e Hiperatividade (TDAH). Além disso, certos tipos de movimento podem ser um gatilho para distúrbios vestibulares, epilepsia e enxaqueca e sensibilidade escotópica. -.animation { - background: #3F87A6; - width: 100%; - height: calc(100% - 1.5em); - transform-origin: left center; -} -``` +Considere fornecer um mecanismo para pausar ou desabilitar a animação, bem como usar a [Consulta de mídia de movimento reduzido](/pt-BR/docs/Web/CSS/@media/prefers-reduced-motion) para criar uma experiência complementar para usuários que têm expressou uma preferência por experiências animadas reduzidas. -```js hidden -window.addEventListener('load', function () { - var ANIMATION = Array.from(document.querySelectorAll('.animation')); - var BUTTON = Array.from(document.querySelectorAll('button')); +- [Projetando uma animação na Web mais segura para sensibilidade ao movimento · Um artigo separado](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/) +- [Uma introdução à consulta de mídia de movimento reduzido | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/) +- [Design responsivo para movimento | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/) +- [MDN Understanding WCAG, Diretriz 2.2 explicações](/pt-BR/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.2_%e2%80%94_enough_time_provide_users_enough_time_to_read_and_use_content) +- [Entendendo o Critério de Sucesso 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html) - function toggleButton (btn, type) { - btn.classList.remove('play', 'pause', 'restart'); - btn.classList.add(type); - btn.title = type.toUpperCase(type); - } +## Definição formal - function playPause (i) { - var btn = BUTTON[i]; - var anim = ANIMATION[i]; - - if (btn.classList.contains('play')) { - anim.style.animationPlayState = 'running'; - toggleButton(btn, 'pause'); - } else if (btn.classList.contains('pause')) { - anim.style.animationPlayState = 'paused'; - toggleButton(btn, 'play'); - } else { - anim.classList.remove('a' + (i + 1)); - setTimeout(function () { - toggleButton(btn, i === 0 ? 'play' : 'pause'); - anim.style.animationPlayState = ''; - anim.classList.add('a' + (i + 1)); - }, 100) - } - } +{{cssinfo}} - ANIMATION.forEach(function (node, index) { - node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause'); }); - node.addEventListener('animationend', function () { toggleButton(BUTTON[index], 'restart'); }); - }); +## Sintaxe formal - BUTTON.forEach(function (btn, index) { - btn.addEventListener('click', function () { playPause(index); }); - }); -}) -``` +{{csssyntax}} -{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}} +## Exemplos -A [description of which properties are animatable](/pt-BR/docs/Web/Guide/CSS/Using_CSS_transitions#Which_CSS_properties_are_animatable) is available; it's worth noting that this description is also valid for [CSS transitions](/pt-BR/docs/Web/Guide/CSS/Using_CSS_transitions). +> **Nota:** A animação das propriedades do [CSS Box Model](/pt-BR/docs/Web/CSS/CSS_Box_Model) não é recomendada. A animação de qualquer propriedade de box model é inerentemente para a CPU; considere animar a propriedade [transform](/pt-BR/docs/Web/CSS/transform). -{{cssinfo}} +### Nascer do Sol -## Syntax +Aqui animamos um sol amarelo em um céu azul claro. O sol nasce +para o centro da viewport e depois desaparece de vista. -A propriedade `animation` é especificada como uma ou mais animações, separadas por commas. +```html +
+``` -Cada animação individual é especificada como: +```css +:root { + overflow: hidden; /* esconde qualquer parte do sol abaixo do horizonte */ + background-color: lightblue; + display: flex; + justify-content: center; /* centraliza o sol ao fundo */ +} -- zero or one occurrences of the following values: +.sun { + background-color: yellow; + border-radius: 50%; /* cria um fundo circular */ + height: 100vh; /* torna o sol do tamanho da viewport */ + aspect-ratio: 1 / 1; + animation: 4s linear 0s infinite alternate sun-rise; +} + +@keyframes sun-rise { + from { + /* empurra o sol para além da janela de visualização */ + transform: translateY(110vh); + } + to { + /* retorna o sol à sua posição padrão */ + transform: translateY(0); + } +} +``` - - {{cssxref("<single-transition-timing-function>")}} - - {{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}} - - {{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}} - - {{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}} - - {{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}} +{{EmbedLiveSample('Sun_Rise')}} -- an optional name for the animation, which may be `none`, a {{cssxref("<custom-ident>")}}, or a {{cssxref("<string>")}} -- zero, one, or two {{cssxref("<time>")}} values +### Animando Múltiplas Propriedades -A ondem dos valores definidos dentro de cada animação é importante: o primeiro valor pode ser analisado com um {{cssxref("<time>")}} é atribuido para o {{cssxref("animation-duration")}}, and the second one is assigned to {{cssxref("animation-delay")}}. +Adicionando à animação do sol no exemplo anterior, adicionamos uma segunda animação mudando a cor do sol conforme ele nasce e se põe. O sol começa vermelho escuro quando está abaixo do horizonte e muda para laranja brilhante quando atinge o topo. -The order within each animation definition is also important for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsed, keywords that are valid for properties other than {{cssxref("animation-name")}}, and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serialized, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases. +```html +
+``` -### Values +```css +:root { + overflow: hidden; + background-color: lightblue; + display: flex; + justify-content: center; +} -- `` - - : The number of times the animation is played. The value must be one of those available in {{cssxref("animation-iteration-count")}}. -- `` - - : The direction in which the animation is played. The value must be one of those available in {{cssxref("animation-direction")}}. -- `` - - : Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in {{cssxref("animation-fill-mode")}}. -- `` - - : Determines whether the animation is playing or not. The value must be one of those available in {{cssxref("animation-play-state")}}. +.sun { + background-color: yellow; + border-radius: 50%; + height: 100vh; + aspect-ratio: 1 / 1; + animation: 4s linear 0s infinite alternate animating-multiple-properties; +} -### Formal syntax +/* é possível animar várias propriedades em uma única animação */ +@keyframes animating-multiple-properties { + from { + transform: translateY(110vh); + background-color: red; + filter: brightness(75%); + } + to { + transform: translateY(0); + background-color: orange; + /* propriedades não definidas, ou seja, 'filtro' reverterá para os valores padrão */ + } +} +``` -{{csssyntax}} +{{EmbedLiveSample('Animating Multiple Properties')}} -## Examples +### Aplicando Múltiplas Animações -### Cylon Eye +Aqui está um sol que nasce e se põe sobre um fundo azul claro. O sol +gira gradualmente através de um arco-íris de cores. O tempo do sol, posição e cor são independentes. ```html -
-
- Listening for dispatches -
-
-
+
``` ```css -.polling_message { - color: white; - float: left; - margin-right: 2%; +:root { + overflow: hidden; + background-color: lightblue; + display: flex; + justify-content: center; } -.view_port { - background-color: black; - height: 25px; - width: 100%; - overflow: hidden; +.sun { + background-color: yellow; + border-radius: 50%; + height: 100vh; + aspect-ratio: 1 / 1; + /* várias animações são separadas por vírgulas, os parâmetros de cada animação são definidos independentemente */ + animation: 4s linear 0s infinite alternate rise, 24s linear 0s infinite + psychedelic; } -.cylon_eye { - background-color: red; - background-image: linear-gradient(to right, - rgba(0, 0, 0, .9) 25%, - rgba(0, 0, 0, .1) 50%, - rgba(0, 0, 0, .9) 75%); - color: white; - height: 100%; - width: 20%; - - -webkit-animation: 4s linear 0s infinite alternate move_eye; - animation: 4s linear 0s infinite alternate move_eye; +@keyframes rise { + from { + transform: translateY(110vh); + } + to { + transform: translateY(0); + } } -@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } - @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } +@keyframes psychedelic { + from { + filter: hue-rotate(0deg); + } + to { + filter: hue-rotate(360deg); + } +} ``` -{{EmbedLiveSample('Cylon_Eye')}} +{{EmbedLiveSample('Applying Multiple Animations')}} -See [Using CSS animations](/pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Examples) for additional examples. +### Animações Múltiplas em Cascata -## Accessibility concerns +Aqui está um sol amarelo sobre um fundo azul claro. O sol salta entre as +lados esquerdo e direito da viewport. O sol permanece na janela de visualização mesmo +embora uma animação de ascensão seja definida. A propriedade de transformação da animação de subida +é 'substituído' pela animação de salto. -Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity. +```html +
+``` -Consider providing a mechanism for pausing or disabling animation, as well as using the [Reduced Motion Media Query](/pt-BR/docs/Web/CSS/@media/prefers-reduced-motion) to create a complimentary experience for users who have expressed a preference for no animated experiences. +```css +:root { + overflow: hidden; + background-color: lightblue; + display: flex; + justify-content: center; +} -- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity) -- [An Introduction to the Reduced Motion Media Query | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/) -- [Responsive Design for Motion | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/) -- [MDN Understanding WCAG, Guideline 2.2 explanations](/pt-BR/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content) -- [Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html) +.sun { + background-color: yellow; + border-radius: 50%; + height: 100vh; + aspect-ratio: 1 / 1; + /* + as animações declaradas posteriormente na cascata substituirão as + propriedades de animações declaradas anteriormente + */ + /* bounce 'substitui' a transformação definida por ascensão, portanto, o sol só se move horizontalmente */ + animation: 4s linear 0s infinite alternate rise, 4s linear 0s infinite + alternate bounce; +} + +@keyframes rise { + from { + transform: translateY(110vh); + } + to { + transform: translateY(0); + } +} + +@keyframes bounce { + from { + transform: translateX(-50vw); + } + to { + transform: translateX(50vw); + } +} +``` -## Specifications +{{EmbedLiveSample('Cascading Multiple Animations')}} -| Specification | Status | Comment | -| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------- | -| {{SpecName('CSS3 Animations', '#animation', 'animation')}} | {{Spec2('CSS3 Animations')}} | Initial definition. | +Veja [Usando animações CSS](/pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations#examples) para exemplos adicionais. -## Compatibilidade com navegadores +## Especificações -{{Compat("css.properties.animation")}} +{{Specifications}} -### Quantum CSS notes +## Compatiblidade com navegadores -- Gecko has a bug whereby when you animate an offscreen element onscreen but specify a delay, Gecko does not repaint on some platforms, e.g. Windows ({{bug(1383239)}}). This has been fixed in Firefox's new parallel CSS engine (also known as [Quantum CSS](https://wiki.mozilla.org/Quantum) or [Stylo](https://wiki.mozilla.org/Quantum/Stylo), planned for release in Firefox 57). -- Another Gecko bug means that {{htmlelement("details")}} elements can't be made open by default using the `open` attribute if they have an animation active on them ({{bug(1382124)}}). Quantum CSS fixes this. -- A further bug means that animations using em units are not affected by changes to the {{cssxref("font-size")}} on the animated element's parent, whereas they should be ({{bug(1254424)}}). Quantum CSS fixes this. +{{Compat}} -## See also +## Veja também -- [Using CSS animations](/pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations) -- JavaScript {{domxref("AnimationEvent")}} API +- [Usando animações CSS](/pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- API JavaScript {{domxref("AnimationEvent")}} From cb10c0dba99a96d65c3eb8b53bde2add0415c468 Mon Sep 17 00:00:00 2001 From: Josiel Rocha <1158643+josielrocha@users.noreply.github.com> Date: Sat, 27 May 2023 22:16:22 -0300 Subject: [PATCH 2/3] fix: fixes cssxref macro --- files/pt-br/web/css/animation/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/pt-br/web/css/animation/index.md b/files/pt-br/web/css/animation/index.md index edce259442bd75..12968788c19ae2 100644 --- a/files/pt-br/web/css/animation/index.md +++ b/files/pt-br/web/css/animation/index.md @@ -50,7 +50,7 @@ Cada animação individual é especificada como: - {{cssxref("animation", "<single-animation-fill-mode>", "#single-animation-fill-mode")}} - {{cssxref("animation", "<single-animation-play-state>", "#single-animation-play-state")}} -- um nome opcional para a animação que pode ser `none`, um {{cssxref("<custom-ident>")} ou uma {{cssxref("<string>")}} +- um nome opcional para a animação que pode ser `none`, um {{cssxref("<custom-ident>")}} ou uma {{cssxref("<string>")}} ### Valores From a6a9f9bc39e3c2a59e38613a83fde44dfbf082f1 Mon Sep 17 00:00:00 2001 From: Josiel Rocha <1158643+josielrocha@users.noreply.github.com> Date: Sat, 27 May 2023 22:22:10 -0300 Subject: [PATCH 3/3] fix: tudas -> duas --- files/pt-br/web/css/animation/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/pt-br/web/css/animation/index.md b/files/pt-br/web/css/animation/index.md index 12968788c19ae2..55a7a37b809ee8 100644 --- a/files/pt-br/web/css/animation/index.md +++ b/files/pt-br/web/css/animation/index.md @@ -40,7 +40,7 @@ A propriedade `animation` é especificada como uma ou mais animações separadas Cada animação individual é especificada como: -- zero, uma ou tudas ocorrências do valor {{cssxref("<time>")}} +- zero, uma ou duas ocorrências do valor {{cssxref("<time>")}} - zero ou uma ocorrência dos seguintes valores: