aboutsummaryrefslogtreecommitdiff
path: root/files/es/tools/page_inspector
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2021-07-15 13:42:10 -0400
committerGitHub <noreply@github.com>2021-07-15 13:42:10 -0400
commit4f0e1ec1c2772904c033f747dc38a08223e8d661 (patch)
tree6212d976fd9f708d4f13e7d472bd765341661c1b /files/es/tools/page_inspector
parentd79f316e1c617b165487da0198765d992cce2fff (diff)
downloadtranslated-content-4f0e1ec1c2772904c033f747dc38a08223e8d661.tar.gz
translated-content-4f0e1ec1c2772904c033f747dc38a08223e8d661.tar.bz2
translated-content-4f0e1ec1c2772904c033f747dc38a08223e8d661.zip
delete pages that were never translated from en-US (es, part 2) (#1550)
Diffstat (limited to 'files/es/tools/page_inspector')
-rw-r--r--files/es/tools/page_inspector/how_to/work_with_animations/index.html112
1 files changed, 0 insertions, 112 deletions
diff --git a/files/es/tools/page_inspector/how_to/work_with_animations/index.html b/files/es/tools/page_inspector/how_to/work_with_animations/index.html
deleted file mode 100644
index 2d855f1785..0000000000
--- a/files/es/tools/page_inspector/how_to/work_with_animations/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: Trabajar con animaciones
-slug: Tools/Page_Inspector/How_to/Work_with_animations
-tags:
- - Guia(2)
- - Herramientas
- - Inspector
-translation_of: Tools/Page_Inspector/How_to/Work_with_animations
----
-<p>Este artículo cubre tres herramientas que puede usar para visualizar y editar animaciones:</p>
-
-<ul>
- <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">El inspector de animación</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">Editor de @keyframes</a></li>
- <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">Editor de funciones de tiempo</a></li>
-</ul>
-
-<h2 id="Inspector_de_Animación">Inspector de Animación</h2>
-
-<div class="note">
-<p>Aunque esta herramienta se introdujo en Forefox 41, el interface de usuario se rediseñó en Forefox 43. This article describes the animation inspector as it appears in Firefox 43 and subsequent releases. If you want to see what the animation inspector looks like in Firefox 41 and 42, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p>
-</div>
-
-<p>Desde Firefox 41, el Inspector de Página incluye una <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">vista extra etiquetada "Animaciones"</a>.</p>
-
-<p>Esta vista muestra las transiciones CSS y las animaciones CSS sincronizadas en la linea de tiempo, puede usar el widget dragueable para moverse a cualquier punto en la linea de tiempo y ver la página en ese punto.</p>
-
-<p>To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. If you click an icon, the icon enlarges and changes to color, and the name of the channel appears. Click the icon again to reverse the effect. These animations are made by applying transitions to several CSS properties.</p>
-
-<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p>
-
-<p>Let's use the animation inspector to see what's going on in this example.</p>
-
-<ul>
- <li>Using Firefox 43 or later, right-click one of the icons and select "Inspect Element".</li>
- <li>You'll probably also want to adjust the selected node up a level, to the <code>&lt;div class="channel"&gt;</code> node.</li>
- <li>Switch over to the "Animations" tab.</li>
-</ul>
-
-<p>{{EmbedYouTube("U2eJYacf5XY")}}</p>
-
-<p>Now play the animation:</p>
-
-<p>{{EmbedYouTube("CwXXXEllB3o")}}</p>
-
-<p>Let's take a closer look at the contents of the animation inspector here:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/11929/animation-inspector-44.png" style="display: block; height: 181px; margin-left: auto; margin-right: auto; width: 643px;"></p>
-
-<p>It shows a synchronized timeline for every CSS property transition involved in the animation. The timeline starts at the start of the first transition, and ends at the end of the last transition, and is labeled with markers every 100 milliseconds (this depends on the time scale of the animations currently displayed). You can see that the example above takes 735 milliseconds to run.</p>
-
-<p>Each animation or transition is shown as a horizontal bar laid across the timeline:</p>
-
-<ul>
- <li>The bar is blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property, and orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used.</li>
- <li>From Firefox 44 onwards, the bar contains a lightning bolt icon (<img alt="" src="https://mdn.mozillademos.org/files/11931/compositor-icon.png" style="height: 18px; width: 16px;">) if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</li>
- <li>The bar is labeled with the name of the property being animated or the name of the <code>@keyframes</code> animation.</li>
- <li>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar.</li>
- <li>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition.</li>
-</ul>
-
-<p>To the left of each bar is a selector for the node that the animation applies to. If you hover over this selector, the node is highlighted in the page. Click the selector to select the node in the inspector.</p>
-
-<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). From Firefox 44, clicking this icon will lock the highlighter on the element.</p>
-
-<p>Applying all this to our example, we can see that:</p>
-
-<ul>
- <li>The animation involved two elements, <code>span.channel-note</code> and <code>img#selected.channel-icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the channel name "Firefox Nightly" and the channel icon: {{EmbedYouTube("EOUjHt0V1No")}}</li>
- <li>Each element had two properties animated:
- <ul>
- <li><code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> for the channel name</li>
- <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> for the icon.<span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></li>
- </ul>
- </li>
- <li>The <code>filter</code> property had a delay of 0.25 seconds applied to it.</li>
- <li>The <code>transform</code> property transition ends after 0.5 seconds.</li>
- <li>The <code>transform</code> property was animated on the compositor thread.</li>
-</ul>
-
-<h3 id="Animation_playback">Animation playback</h3>
-
-<p>At the top of the animation inspector:</p>
-
-<ul>
- <li>there are buttons to play/pause and rewind the animation (new in Firefox 44)</li>
- <li>the current time in the animation is displayed (new in Firefox 44).</li>
-</ul>
-
-<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:</p>
-
-<p>{{EmbedYouTube("1hqNaMsB48g")}}</p>
-
-<h2 id="Edit_keyframes">Edit @keyframes</h2>
-
-<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p>
-
-<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p>
-
-<h2 id="Edit_timing_functions">Edit timing functions</h2>
-
-<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p>
-
-<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p>
-
-<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p>
-
-<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p>
-
-<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p>
-
-<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p>