aboutsummaryrefslogtreecommitdiff
path: root/files/it/web/css/transition-timing-function
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/it/web/css/transition-timing-function
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/it/web/css/transition-timing-function')
-rw-r--r--files/it/web/css/transition-timing-function/index.html634
1 files changed, 0 insertions, 634 deletions
diff --git a/files/it/web/css/transition-timing-function/index.html b/files/it/web/css/transition-timing-function/index.html
deleted file mode 100644
index 0362f60e1d..0000000000
--- a/files/it/web/css/transition-timing-function/index.html
+++ /dev/null
@@ -1,634 +0,0 @@
----
-title: transition-timing-function
-slug: Web/CSS/transition-timing-function
-translation_of: Web/CSS/transition-timing-function
----
-<p>{{ CSSRef("CSS Transitions") }}</p>
-
-<h2 id="Sommario">Sommario</h2>
-
-<p>La proprietà <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> <code>transition-timing-function</code> è usata per descrivere come gli stati intermedi delle proprietà CSS vengono modificati quando viene calcolato il risultato di un <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions">effetto di transizione</a>. Ti permette di definire una curva di accelerazione, in modo che la velocità della transizione possa variare nell'arco della sua durata.</p>
-
-<p>Questa curva di accelerazione viene definita utilizzando uno {{cssxref("&lt;timing-function&gt;")}} per ogni proprietà che ottiene una transizione.</p>
-
-<p>È possibile specificare un numero arbitrario di funzioni di temporizzazione; ciasuna di queste sarà applicata alla corrispondente proprietà seguendo le specifiche in {{ cssxref("transition-property") }}, dove in questo caso si comporta come la lista principale.</p>
-
-<p>Se ci sono meno funzione specificate rispetto alle proprietà presenti nella lista, i valori mancanti saranno impostati a quello iniziale (<code>ease</code>). Se ci sono più funzioni di temporizzazione, i valori verranno applicati seguendo la lista principale e i valori in eccesso verranno semplicemente scartati. In entrambi i casi entrambe le dichiarazioni sono considerate valide.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Sintassi">Sintassi</h2>
-
-<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("transition-timing-function")}}
-</pre>
-
-<pre>transition-timing-function: ease
-transition-timing-function: ease-in
-transition-timing-function: ease-out
-transition-timing-function: ease-in-out
-transition-timing-function: linear
-transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
-transition-timing-function: step-start
-transition-timing-function: step-end
-transition-timing-function: steps(4, end)
-
-transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
-
-transition-timing-function: inherit
-</pre>
-
-<h3 id="Valori">Valori</h3>
-
-<dl>
- <dt><code>&lt;timing-function&gt;</code></dt>
- <dd>Ciascun {{cssxref("&lt;timing-function&gt;")}} rappresenta una funzione di temporizzazione che dovrà essere linkata alla corrispondente proprietà che avrà la transizione, come definito in {{ cssxref("transition-property") }}.</dd>
-</dl>
-
-<h2 id="Esempi">Esempi</h2>
-
-<div>
-<div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-timing-function: ease</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: ease;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: ease;
-}
-.box1{
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: ease;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: ease;
-}
-</pre>
-
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
-
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
-</div>
-
-<div id="ttf_easein" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-timing-function: ease-in</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: ease-in;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: ease-in;
-}
-.box1{
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: ease-in;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: ease-in;
-}
-</pre>
-
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
-
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("ttf_easein",275,150)}}</div>
-</div>
-
-<div id="ttf_easeout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-timing-function: ease-out</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: ease-out;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: ease-out;
-}
-.box1{
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: ease-out;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: ease-out;
-}
-</pre>
-
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
-
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("ttf_easeout",275,150)}}</div>
-</div>
-
-<div id="ttf_easeinout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-timing-function: ease-in-out</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: ease-in-out;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: ease-in-out;
-}
-.box1{
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: ease-in-out;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: ease-in-out;
-}
-</pre>
-
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
-
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("ttf_easeinout",275,150)}}</div>
-</div>
-</div>
-
-<div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-timing-function: linear</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: linear;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: linear;
-}
-.box1{
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: linear;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: linear;
-}
-</pre>
-
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
-
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
-</div>
-
-<div id="ttf_stepstart" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-timing-function: step-start</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: step-start;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: step-start;
-}
-.box1{
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: step-start;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: step-start;
-}
-</pre>
-
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
-
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("ttf_stepstart",275,150)}}</div>
-</div>
-
-<div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-timing-function: step-end</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: step-end;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: step-end;
-}
-.box1{
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: step-end;
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: step-end;
-}
-</pre>
-
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
-
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
-</div>
-
-<div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-timing-function: steps(4, end)</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
- &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
- </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
- width: 100px;
- height: 100px;
- background-color: red;
- font-size: 20px;
- left: 0px;
- top: 0px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: steps(4, end);
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: steps(4, end);
-}
-.box1{
- width: 50px;
- height: 50px;
- background-color: blue;
- color: yellow;
- font-size: 18px;
- left: 150px;
- top:25px;
- position:absolute;
- -webkit-transition-property: width height background-color font-size left top color;
- -webkit-transition-duration:2s;
- -webkit-transition-timing-function: steps(4, end);
- transition-property: width height background-color font-size left top color;
- transition-duration:2s;
- transition-timing-function: steps(4, end);
-}
-</pre>
-
-<pre class="brush:js">function updateTransition() {
- var el = document.querySelector("div.box");
-
- if (el) {
- el.className = "box1";
- } else {
- el = document.querySelector("div.box1");
- el.className = "box";
- }
-
- return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
-</div>
-
-<h2 id="Specifiche">Specifiche</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 Transitions', '#transition-timing-function', 'transition-timing-function') }}</td>
- <td>{{ Spec2('CSS3 Transitions') }}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilità_tra_Browser">Compatibilità tra Browser</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Chrome</th>
- <th>Firefox (Gecko)</th>
- <th>Internet Explorer</th>
- <th>Opera</th>
- <th>Safari</th>
- </tr>
- <tr>
- <td>Basic support</td>
- <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
- <td>{{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}<br>
- {{ CompatGeckoDesktop("16.0") }}</td>
- <td>10</td>
- <td>11.6{{ 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>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Android</th>
- <th>Chrome for Android</th>
- <th>Firefox Mobile (Gecko)</th>
- <th>IE Mobile</th>
- <th>Opera Mobile</th>
- <th>Safari Mobile</th>
- </tr>
- <tr>
- <td>Basic support</td>
- <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
- <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
- <td>{{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }}<br>
- {{ CompatGeckoMobile("16.0") }}</td>
- <td>{{ CompatUnknown() }}</td>
- <td>{{ CompatUnknown() }}</td>
- <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Vedi_Anche">Vedi Anche</h2>
-
-<ul>
- <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li>
- <li>{{ domxref("TransitionEvent") }}</li>
-</ul>