initial commit

1 files changed, 222 insertions, 0 deletions

diff --git a/files/pt-br/web/css/@keyframes/index.html b/files/pt-br/web/css/@keyframes/index.html
new file mode 100644
index 0000000000..c11df0eee6
--- /dev/null
+++ b/files/pt-br/web/css/@keyframes/index.html
@@ -0,0 +1,222 @@
+---
+title: '@keyframes'
+slug: Web/CSS/@keyframes
+translation_of: Web/CSS/@keyframes
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary">The <strong><code>@keyframes</code></strong> CSS <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.</span> This gives more control over the intermediate steps of the animation sequence than <a href="/en-US/docs/Web/CSS/CSS_Transitions">transitions</a>.</p>
+
+<pre class="brush: css no-line-numbers">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<p>JavaScript can access the <code>@keyframes</code> at-rule with the CSS object model interface {{domxref("CSSKeyframesRule")}}.</p>
+
+<p>To use keyframes, create a <code>@keyframes</code> rule with a name that is then used by the {{ cssxref("animation-name") }} property to match an animation to its keyframe declaration. Each <code>@keyframes</code> rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.</p>
+
+<p>You can list the keyframe percentages in any order; they will be handled in the order they should occur.</p>
+
+<h3 id="Valid_keyframe_lists">Valid keyframe lists</h3>
+
+<p>If a keyframe rule doesn't specify the start or end states of the animation (that is, <code>0%</code>/<code>from</code> and <code>100%</code>/<code>to</code>, browsers will use the element's existing styles for the start/end states. This can be used to animate an element from its initial state and back.</p>
+
+<p>Properties that can't be animated in keyframe rules are ignored, but supported properties will still be animated.</p>
+
+<h3 id="Resolving_duplicates">Resolving duplicates</h3>
+
+<p>If multiple keyframe sets exist for a given name, the last one encountered by the parser is used. <code>@keyframes</code> rules don't cascade, so animations never derive keyframes from more than one rule set.</p>
+
+<p>If a given animation time offset is duplicated, the last keyframe in the <code>@keyframes</code> rule for that percentage is used for that frame. There's no cascading within a <code>@keyframes</code> rule if multiple keyframes specify the same percentage values.</p>
+
+<h3 id="When_properties_are_left_out_of_some_keyframes">When properties are left out of some keyframes</h3>
+
+<p>Properties that aren't specified in every keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation. For example:</p>
+
+<pre class="brush: css">@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+</pre>
+
+<p>Here, the {{ cssxref("top") }} property animates using the <code>0%</code>, <code>30%</code>, and <code>100%</code> keyframes, and {{ cssxref("left") }} animates using the <code>0%</code>, <code>68%</code>, and <code>100%</code> keyframes.</p>
+
+<h3 id="When_a_keyframe_is_defined_multiple_times">When a keyframe is defined multiple times</h3>
+
+<p>If a keyframe is defined multiple times but not all affected properties are in each keyframe, only the values specified in the latest keyframe are considered. For example:</p>
+
+<pre class="brush: css">@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+</pre>
+
+<p>In this example, at the <code>50%</code> keyframe, the value used is <code>top: 10px</code> and all other values at this keyframe are ignored.</p>
+
+<p>{{ non-standard_inline }} {{ fx_minversion_inline("14") }} Cascading keyframes are supported starting in Firefox 14. For the example above, it means that at the <code>50%</code> keyframe, the value <code>left: 20px</code> will be considered. This is not defined in the specification yet, but it is being discussed.</p>
+
+<h3 id="!important_in_a_keyframe"><code>!important</code> in a keyframe</h3>
+
+<p>Declarations in a keyframe qualified with <code>!important</code> are ignored.</p>
+
+<pre class="brush: css">@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 150px !important; } /* ignored */
+  to   { margin-top: 100px; }
+}
+
+@keyframes important2 {
+  from { margin-top: 50px;
+         margin-bottom: 100px; }
+  to   { margin-top: 150px !important; /* ignored */
+         margin-bottom: 50px; }
+}
+</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{cssxref("custom-ident")}}</dt>
+ <dd>A name identifying the keyframe list. This must match the identifier production in CSS syntax.</dd>
+ <dt><code>from</code></dt>
+ <dd>A starting offset of <code>0%</code>.</dd>
+ <dt><code>to</code></dt>
+ <dd>An ending offset of <code>100%</code>.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>A percentage of the time through the animation sequence at which the specified keyframe should occur.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>See <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a> for examples.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br>
+     43.0</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>12 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>
+    <p>4.0{{ property_prefix("-webkit") }}<br>
+     9.0 <a href="https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_0.html#//apple_ref/doc/uid/TP40014305-CH9-SW35" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>ignore <code>!important</code> declarations</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(19)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>ignore <code>!important</code> declarations</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(19)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notes">Notes</h2>
+
+<ol>
+ <li><code>@keyframes</code> unsupported in scoped stylesheets in Firefox ({{bug(830056)}}).</li>
+</ol>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+</ul>