From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/animation/index.html | 353 +++++++++++++++++++++++++++++++ 1 file changed, 353 insertions(+) create mode 100644 files/pt-br/web/css/animation/index.html (limited to 'files/pt-br/web/css/animation') diff --git a/files/pt-br/web/css/animation/index.html b/files/pt-br/web/css/animation/index.html new file mode 100644 index 0000000000..5c6ba64222 --- /dev/null +++ b/files/pt-br/web/css/animation/index.html @@ -0,0 +1,353 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - Animações + - Animações CSS + - CSS + - CSS Animations + - CSS3 + - Propriedade CSS + - Referencia + - Web +translation_of: 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")}}.

+ +
{{EmbedInteractiveExample("pages/css/animation.html")}}
+ + + +
/* @keyframes duration | timing-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 */
+animation: 3s linear 1s slidein;
+
+/* @keyframes name | duration */
+animation: slidein 3s;
+
+ + + +

{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}

+ +

A description of which properties are animatable is available; it's worth noting that this description is also valid for CSS transitions.

+ +

{{cssinfo}}

+ +

Syntax

+ +

A propriedade animation é especificada como uma ou mais animações, separadas por commas.

+ +

Cada animação individual é especificada  como:

+ + + +

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")}}.

+ +

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.

+ +

Values

+ +
+
<single-animation-iteration-count>
+
The number of times the animation is played. The value must be one of those available in {{cssxref("animation-iteration-count")}}.
+
<single-animation-direction>
+
The direction in which the animation is played. The value must be one of those available in {{cssxref("animation-direction")}}.
+
<single-animation-fill-mode>
+
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")}}.
+
<single-animation-play-state>
+
Determines whether the animation is playing or not. The value must be one of those available in {{cssxref("animation-play-state")}}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Cylon Eye

+ +
<div class="view_port">
+  <div class="polling_message">
+    Listening for dispatches
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+
+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.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;
+}
+
+@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+
+ +

{{EmbedLiveSample('Cylon_Eye')}}

+ +

See Using CSS animations for additional examples.

+ +

Accessibility concerns

+ +

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.

+ +

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation', 'animation')}}{{Spec2('CSS3 Animations')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.animation")}}

+ +

Quantum CSS notes

+ + + +

See also

+ + -- cgit v1.2.3-54-g00ecf