{"json_modified": "2016-05-10T02:45:14.574899", "uuid": "009570cb-37fe-4e58-b02f-f4123c70752a", "title": "transition \u8fc7\u6e21", "url": "/zh-CN/docs/Web/CSS/transition", "tags": [], "translations": [{"uuid": "aefd8e2e-3f32-4654-b9e8-b85d77a38d60", "title": "transition", "url": "/en-US/docs/Web/CSS/transition", "tags": ["CSS", "Reference", "Experimental", "CSS Property", "CSS Transitions"], "summary": "The <strong><code>transition</code></strong> <a href=\"/en/CSS\" title=\"CSS\">CSS </a>property is a <a href=\"/en-US/docs/Web/CSS/Shorthand_properties\" title=\"/en-US/docs/CSS/Shorthand_properties\">shorthand property</a> for <a href=\"/en-US/docs/Web/CSS/transition-property\" title=\"The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.\"><code>transition-property</code></a>, <a href=\"/en-US/docs/Web/CSS/transition-duration\" title=\"The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.\"><code>transition-duration</code></a>, <a href=\"/en-US/docs/Web/CSS/transition-timing-function\" title=\"The transition-timing-function CSS property is used to describe how the intermediate values of the CSS&#xA0;properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.\"><code>transition-timing-function</code></a>, and <a href=\"/en-US/docs/Web/CSS/transition-delay\" title=\"The transition-delay CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.\"><code>transition-delay</code></a>. It enables you to define the transition between two states of an element. Different states may be defined using <a href=\"/en-US/docs/Web/CSS/Pseudo-classes\" title=\"/en-US/docs/CSS/Pseudo-classes\">pseudo-classes</a> like <a href=\"/en-US/docs/Web/CSS/:hover\" title=\"The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:hover</code></a> or <a href=\"/en-US/docs/Web/CSS/:active\" title=\"The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on &lt;a&gt; and &lt;button&gt; HTML&#xA0;elements, but may not be limited to just those.\"><code>:active</code></a> or dynamically set using JavaScript.", "localization_tags": [], "locale": "en-US", "last_edit": "2016-02-15T15:46:38", "review_tags": ["technical"]}, {"uuid": "56ba580e-259b-4123-aa50-d86504405983", "title": "transition", "url": "/ja/docs/Web/CSS/transition", "tags": ["CSS", "CSS Reference", "CSS Transitions"], "summary": "<code>transition</code> <a href=\"/ja/docs/Web/CSS\">CSS</a> \u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001<a href=\"/ja/docs/Web/CSS/transition-property\" title=\"transition-property CSS &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x3001;&#x30C8;&#x30E9;&#x30F3;&#x30B8;&#x30B7;&#x30E7;&#x30F3;&#x52B9;&#x679C; &#x3092;&#x9069;&#x7528;&#x3059;&#x308B; CSS &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306E;&#x540D;&#x79F0;&#x3092;&#x6307;&#x5B9A;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x4F7F;&#x7528;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;\"><code>transition-property</code></a>\u3001<a href=\"/ja/docs/Web/CSS/transition-duration\" title=\"transition-duration CSS &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x3001;&#x30C8;&#x30E9;&#x30F3;&#x30B8;&#x30B7;&#x30E7;&#x30F3;&#x306B;&#x3088;&#x308B;&#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x304C;&#x5B8C;&#x4E86;&#x3059;&#x308B;&#x307E;&#x3067;&#x306E;&#x6240;&#x8981;&#x6642;&#x9593;&#x3092;&#x79D2;&#x6570;&#x307E;&#x305F;&#x306F;&#x30DF;&#x30EA;&#x79D2;&#x6570;&#x3067;&#x6307;&#x5B9A;&#x3057;&#x307E;&#x3059;&#x3002;&#x30C7;&#x30D5;&#x30A9;&#x30EB;&#x30C8;&#x5024;&#x306F; 0s &#x3067;&#x3042;&#x308A;&#x3001;&#x3053;&#x308C;&#x306F;&#x30A2;&#x30CB;&#x30E1;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x5B9F;&#x884C;&#x3057;&#x306A;&#x3044;&#x3053;&#x3068;&#x3092;&#x793A;&#x3057;&#x307E;&#x3059;&#x3002;\"><code>transition-duration</code></a>\u3001<a href=\"/ja/docs/Web/CSS/transition-timing-function\" title=\"transition-timing-function CSS &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x3001;&#x30C8;&#x30E9;&#x30F3;&#x30B8;&#x30B7;&#x30E7;&#x30F3;&#x52B9;&#x679C;&#x306E;&#x4F5C;&#x7528;&#x3092;&#x53D7;&#x3051;&#x308B; CSS &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306E;&#x3001;&#x4E2D;&#x9593;&#x72B6;&#x614B;&#x306E;&#x5024;&#x3092;&#x7B97;&#x51FA;&#x3059;&#x308B;&#x65B9;&#x6CD5;&#x3092;&#x8A18;&#x8FF0;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x4F7F;&#x7528;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;&#x3053;&#x306E;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x52A0;&#x901F;&#x66F2;&#x7DDA;&#x3092;&#x5B9A;&#x7FA9;&#x3059;&#x308B;&#x3082;&#x306E;&#x3067;&#x3001;&#x305D;&#x308C;&#x306B;&#x3088;&#x308A;&#x30C8;&#x30E9;&#x30F3;&#x30B8;&#x30B7;&#x30E7;&#x30F3;&#x5B9F;&#x884C;&#x4E2D;&#x306E;&#x5024;&#x306E;&#x5909;&#x66F4;&#x901F;&#x5EA6;&#x3092;&#x64CD;&#x4F5C;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;\"><code>transition-timing-function</code></a>\u3001<a href=\"/ja/docs/Web/CSS/transition-delay\" title=\"transition-delay CSS &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3067;&#x306F;&#x3001;&#x30C8;&#x30E9;&#x30F3;&#x30B8;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x884C;&#x3046;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306B;&#x30C8;&#x30E9;&#x30F3;&#x30B8;&#x30B7;&#x30E7;&#x30F3;&#x306E;&#x8981;&#x6C42;&#x304C;&#x51FA;&#x3055;&#x308C;&#x3066;&#x304B;&#x3089;&#x3001;&#x5B9F;&#x969B;&#x306B;&#x30C8;&#x30E9;&#x30F3;&#x30B8;&#x30B7;&#x30E7;&#x30F3;&#x52B9;&#x679C;&#x304C;&#x59CB;&#x307E;&#x308B;&#x307E;&#x3067;&#x306E;&#x6642;&#x9593;&#x3092;&#x6307;&#x5B9A;&#x3057;&#x307E;&#x3059;&#x3002;\"><code>transition-delay</code></a> \u306e\u5404\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3092\u8a2d\u5b9a\u3059\u308b\u30b7\u30e7\u30fc\u30c8\u30cf\u30f3\u30c9\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3059\u3002\u8981\u7d20\u306e 2 \u3064\u306e\u72b6\u614b\u9593\u306e\u30c8\u30e9\u30f3\u30b8\u30b7\u30e7\u30f3\u3092\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002\u5404\u72b6\u614b\u306e\u5b9a\u7fa9\u306f <a href=\"/ja/docs/Web/CSS/:hover\" title=\":hover CSS &#x64EC;&#x4F3C;&#x30AF;&#x30E9;&#x30B9; &#x306F;&#x3001;&#x30E6;&#x30FC;&#x30B6;&#x304C;&#x30DD;&#x30A4;&#x30C6;&#x30A3;&#x30F3;&#x30B0;&#x30C7;&#x30D0;&#x30A4;&#x30B9;&#x3067;&#x8981;&#x7D20;&#x3092;&#x793A;&#x3057;&#x305F;&#x3068;&#x304D;&#x306B;&#x30DE;&#x30C3;&#x30C1;&#x3057;&#x307E;&#x3059;&#x3002;&#x305F;&#x3060;&#x3057;&#x3001;&#x8981;&#x7D20;&#x304C;&#x30A2;&#x30AF;&#x30C6;&#x30A3;&#x30D9;&#x30FC;&#x30C8;&#x3055;&#x308C;&#x308B;&#x5FC5;&#x8981;&#x306F;&#x3042;&#x308A;&#x307E;&#x305B;&#x3093;&#x3002;&#x3053;&#x306E;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x306F;&#x3001;&#x7D9A;&#x304F;&#x30EB;&#x30FC;&#x30EB;&#x306B;&#x73FE;&#x308C;&#x308B;&#x30EA;&#x30F3;&#x30AF;&#x95A2;&#x9023;&#x306E;&#x64EC;&#x4F3C;&#x30AF;&#x30E9;&#x30B9; :link&#x3001;:visited&#x3001;:active &#x306B;&#x3088;&#x3063;&#x3066;&#x4E0A;&#x66F8;&#x304D;&#x3055;&#x308C;&#x308B;&#x53EF;&#x80FD;&#x6027;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;&#x3046;&#x307E;&#x304F;&#x30EA;&#x30F3;&#x30AF;&#x306B;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x3092;&#x3064;&#x3051;&#x308B;&#x306B;&#x306F;&#x3001;:hover &#x30EB;&#x30FC;&#x30EB;&#x3092; :link &#x3068; :visited &#x30EB;&#x30FC;&#x30EB;&#x306E;&#x5F8C;&#x3001;:active &#x30EB;&#x30FC;&#x30EB;&#x3088;&#x308A;&#x306F;&#x524D;&#x306B;&#x7F6E;&#x304F;&#x5FC5;&#x8981;&#x304C;&#x3042;&#x308A;&#x307E;&#x3059;&#x3002;LVHA &#x306E;&#x9806; &#x3067;&#x3059; :link &#x2014; :visited &#x2014; :hover &#x2014; :active\"><code>:hover</code></a> \u3084 <a href=\"/ja/docs/Web/CSS/:active\" title=\"CSS &#x306E; :active &#x64EC;&#x4F3C;&#x30AF;&#x30E9;&#x30B9;&#x306F;&#x3001;&#x30E6;&#x30FC;&#x30B6;&#x304C;&#x30A2;&#x30AF;&#x30C6;&#x30A3;&#x30D6;&#x306B;&#x3057;&#x305F;&#x8981;&#x7D20;&#x306B;&#x30DE;&#x30C3;&#x30C1;&#x3057;&#x307E;&#x3059;&#x3002;&#x3053;&#x308C;&#x3092;&#x4F7F;&#x3063;&#x3066;&#x3001;&#x30DA;&#x30FC;&#x30B8;&#x306F;&#x3001;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x304C;&#x30A2;&#x30AF;&#x30C6;&#x30A3;&#x30D9;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x3092;&#x691C;&#x77E5;&#x3057;&#x305F;&#x3053;&#x3068;&#x306B;&#x5BFE;&#x3057;&#x3066;&#x53CD;&#x5FDC;&#x3067;&#x304D;&#x308B;&#x3088;&#x3046;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;&#x3002;&#x30DE;&#x30A6;&#x30B9;&#x64CD;&#x4F5C;&#x306E;&#x5834;&#x5408;&#x3001;&#x901A;&#x5E38;&#x306F;&#x30E6;&#x30FC;&#x30B6;&#x304C;&#x30DE;&#x30A6;&#x30B9;&#x30DC;&#x30BF;&#x30F3;&#x3092;&#x62BC;&#x3057;&#x3066;&#x96E2;&#x3059;&#x307E;&#x3067;&#x306E;&#x9593;&#x306B;&#x30DE;&#x30C3;&#x30C1;&#x3057;&#x307E;&#x3059;&#x3002; :active &#x64EC;&#x4F3C;&#x30AF;&#x30E9;&#x30B9;&#x306F;&#x901A;&#x5E38;&#x3001;&#x30AD;&#x30FC;&#x30DC;&#x30FC;&#x30C9;&#x306E;&#x30BF;&#x30D6;&#x30AD;&#x30FC;&#x3092;&#x4F7F;&#x3063;&#x305F;&#x3068;&#x304D;&#x3082;&#x30DE;&#x30C3;&#x30C1;&#x3057;&#x307E;&#x3059;&#x3002;HTML &#x306E; &lt;a&gt; &#x8981;&#x7D20;&#x3084; &lt;button&gt; &#x8981;&#x7D20;&#x3067;&#x3088;&#x304F;&#x4F7F;&#x308F;&#x308C;&#x307E;&#x3059;&#x304C;&#x3001;&#x3053;&#x308C;&#x4EE5;&#x5916;&#x3067;&#x3082;&#x4F7F;&#x3048;&#x307E;&#x3059;&#x3002;\"><code>:active</code></a> \u306e\u3088\u3046\u306a<a href=\"/ja/docs/Web/CSS/Pseudo-classes\">\u64ec\u4f3c\u30af\u30e9\u30b9</a>\u3092\u4f7f\u3046\u304b\u3001JavaScript \u3092\u4f7f\u3063\u3066\u52d5\u7684\u306b\u884c\u3044\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2015-11-13T07:47:22", "review_tags": []}, {"uuid": "a317f00d-1244-488e-9075-3d597ffeabe9", "title": "transition", "url": "/fr/docs/Web/CSS/transition", "tags": ["Transitions CSS", "CSS", "Propri\u00e9t\u00e9", "R\u00e9f\u00e9rence"], "summary": "La propri\u00e9t\u00e9 <strong><code>transition</code></strong><a href=\"/en/CSS\" title=\"CSS\"> </a>est <a href=\"/fr/docs/Web/CSS/Propri&#xE9;t&#xE9;s_raccourcies\">une propri\u00e9t\u00e9 raccourcie</a> pour les propri\u00e9t\u00e9s <a href=\"/fr/docs/Web/CSS/transition-property\" title=\"La propri&#xE9;t&#xE9; transition-property est utilis&#xE9;e pour d&#xE9;signer les noms des propri&#xE9;t&#xE9;s CSS sur lesquelles un effet de transition devrait &#xEA;tre appliqu&#xE9;.\"><code>transition-property</code></a>, <a href=\"/fr/docs/Web/CSS/transition-duration\" title=\"La propri&#xE9;t&#xE9; transition-duration d&#xE9;finit le nombre de secondes ou de millisecondes que doit durer une animation. La valeur par d&#xE9;faut, 0s, indique qu'il n'y aura aucune animation.\"><code>transition-duration</code></a>, <a href=\"/fr/docs/Web/CSS/transition-timing-function\" title=\"La propri&#xE9;t&#xE9; transition-timing-function est utilis&#xE9;e pour d&#xE9;crire comment les valeurs interm&#xE9;diaires des propri&#xE9;t&#xE9;s CSS affect&#xE9;es par un effet de transition sont calcul&#xE9;es. Ceci permet donc de d&#xE9;finir une courbe d'accel&#xE9;ration, de mani&#xE8;re &#xE0; ce que la vitesse de la transition varie au cours de sa dur&#xE9;e.\"><code>transition-timing-function</code></a> et <a href=\"/fr/docs/Web/CSS/transition-delay\" title=\"La propri&#xE9;t&#xE9; transition-delay indique la dur&#xE9;e &#xE0; attendre avant de d&#xE9;buter la transition qui s'applique pour un changement de propri&#xE9;t&#xE9;.\"><code>transition-delay</code></a>. Elle permet de d\u00e9finir la transition entre deux \u00e9tats d'un \u00e9l\u00e9ment. Les diff\u00e9rents \u00e9tats peuvent \u00eatre d\u00e9finis \u00e0 l'aide <a href=\"/en-US/docs/Web/CSS/Pseudo-classes\" title=\"/en-US/docs/CSS/Pseudo-classes\">de pseudo-classes</a> telles que <a href=\"/fr/docs/Web/CSS/:hover\" title=\"La pseudo-classe CSS :hover permet de sp&#xE9;cifier l'apparence d'un &#xE9;l&#xE9;ment au moment o&#xF9; l'utilisateur passe la souris dessus, mais sans n&#xE9;cessairement l'activer. Ce style peut &#xEA;tre &#xE9;cras&#xE9; par d'autres pseudo-classes li&#xE9;es aux liens, comme :link, :visited, et :active, apparaissant dans des r&#xE8;gles subs&#xE9;quentes. Pour d&#xE9;corer les liens tel que souhait&#xE9;, vous devez mettre la r&#xE8;gle :hover apr&#xE8;s les r&#xE8;gles :link et :visited mais avant la r&#xE8;gle :active, comme d&#xE9;fini par l'ordre LVHA. :link &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:hover</code></a> ou <a href=\"/fr/docs/Web/CSS/:active\" title=\"La pseudo-classes CSS :active permet de d&#xE9;finir l'apparence d'un &#xE9;l&#xE9;ment au moment exact o&#xF9; l'utilisateur clique dessus. Cela permet de donner un retour sur l'action, montrant que le navigateur a bien compris la demande. Lorsqu'une souris est utilis&#xE9;e pour interagir, il s'agit g&#xE9;n&#xE9;ralement du moment o&#xF9; l'utilisateur presse le bouton principal de celle-ci. La pseudo-classe ::active s'applique aussi quand le touche TAB du clavier est utilis&#xE9;e. On trouve souvent cette pseudo-classe avec les &#xE9;l&#xE9;ments HTML &lt;a&gt; et &lt;button&gt;, mais elle ne se limite pas &#xE0; ces &#xE9;l&#xE9;ments.\"><code>:active</code></a> ou \u00eatre d\u00e9finis dynamiquement avec JavaScript.", "localization_tags": [], "locale": "fr", "last_edit": "2016-02-19T04:56:34", "review_tags": []}, {"uuid": "09c0b3cd-f90a-4c47-8fe9-6b6247ae220f", "title": "transition", "url": "/es/docs/Web/CSS/transition", "tags": [], "summary": "La propiedad\u00a0<code>transition</code> es una <a href=\"/en-US/docs/CSS/Shorthand_properties\" title=\"/en-US/docs/CSS/Shorthand_properties\">propiedad abreviada</a> de <a href=\"/es/docs/Web/CSS/transition-property\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>transition-property</code></a>, <a href=\"/es/docs/Web/CSS/transition-duration\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>transition-duration</code></a>, <a href=\"/es/docs/Web/CSS/transition-timing-function\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>transition-timing-function</code></a>, y <a href=\"/es/docs/Web/CSS/transition-delay\" title=\"La propiedad&#xA0;CSS&#xA0;transition-delay&#xA0;especifica la cantidad de tiempo a esperar entre un cambio pedido hacia una propiedad y el comienzo de un efecto de transicion (transition effect).\"><code>transition-delay</code></a>. Permite definir la transici\u00f3n entre dos estados de un elemento. Hay diferentes estados que pueden ser definidos utilizando <a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"/en-US/docs/CSS/Pseudo-classes\">pseudo-clases</a> como <a href=\"/es/docs/Web/CSS/:hover\" title=\"La pseudo-clase CSS :hover se presenta cuando el usuario coloca el puntero sobre alg&#xFA;n elemento, pero no necesariamente est&#xE1; activo. Este estilo puede ser sobreescrito por cualquier otra pseudo-clase relacionada a link, como puede ser :link, :visited, y :active, apareciendo en las siguientes reglas. Para usar apropiadamente links, necesitas poner la regla :hover despu&#xE9;s de las reglas de :link y :visited , pero antes de :active , as&#xED; puede ser definido como LVHA-order: :link &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:hover</code></a> o <a href=\"/es/docs/Web/CSS/:active\" title=\"La pseudo-clase :active de CSS&#xA0; cubre el caso en el que un elemento est&#xE1; siendo activado por el usuario.&#xA0; Cuando se interact&#xFA;a con el rat&#xF3;n, se corresponde al momento en el que el usuario presiona el bot&#xF3;n del rat&#xF3;n hasta el momento en el que lo suelta. A menudo es usado en los elementos &lt;a&gt; y &lt;button&gt; de HTML.\"><code>:active</code></a>\u00a0 o aplicado din\u00e1micamente usando JavaScript.", "localization_tags": ["inprogress"], "locale": "es", "last_edit": "2015-11-13T07:53:58", "review_tags": []}, {"uuid": "b7c49076-cc5c-475d-a787-5e50f69dcd32", "title": "transition", "url": "/pt-BR/docs/Web/CSS/transition", "tags": [], "summary": "A propriedade de <a href=\"/en/CSS\" title=\"CSS\">CSS\u00a0 </a><strong>transition</strong> \u00e9 uma <a href=\"/en-US/docs/Web/CSS/Shorthand_properties\" title=\"/en-US/docs/CSS/Shorthand_properties\">propriedade abreviada</a> para <a href=\"/pt-BR/docs/Web/CSS/transition-property\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>transition-property</code></a>, <a href=\"/pt-BR/docs/Web/CSS/transition-duration\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>transition-duration</code></a>, <a href=\"/pt-BR/docs/Web/CSS/transition-timing-function\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>transition-timing-function</code></a> e <a href=\"/pt-BR/docs/Web/CSS/transition-delay\" title=\"The documentation about this has not yet been written; please consider contributing!\"><code>transition-delay</code></a>. Ela permite definir a transi\u00e7\u00e3o entre dois estados de um elemento. Estados diferentes podem ser definidos usando <a href=\"/en-US/docs/Web/CSS/Pseudo-classes\" title=\"/en-US/docs/CSS/Pseudo-classes\">pseudo-classes</a> tais como <a href=\"/pt-BR/docs/Web/CSS/:hover\" title=\"A pseudo-classe :hover corresponde quando o usu&#xE1;rio designa um elemento com um dispositivo apontador, mas n&#xE3;o necessariamente o ativa. Este estilo pode ser substitu&#xED;do por qualquer outra pseudo-classe de&#xA0; link-relacionados, isto &#xE9;&#xA0; :link, :visited, e :active, aparecendo em regras subsequentes. Na ordem para estilizar apropriadamente links, voc&#xEA; precisa colocar a regra :hover depois das regras :link e :visited mas antes da regra :active, como definido pela ordem LVHA:&#xA0; :link &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:hover</code></a> ou <a href=\"/pt-BR/docs/Web/CSS/:active\" title=\"The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on &lt;a&gt; and &lt;button&gt; HTML&#xA0;elements, but may not be limited to just those.\"><code>:active</code></a>; ou dinamicamente, usando javascript.", "localization_tags": ["inprogress"], "locale": "pt-BR", "last_edit": "2015-10-27T06:23:22", "review_tags": ["editorial"]}], "modified": "2016-05-10T02:45:14", "label": "transition \u8fc7\u6e21", "localization_tags": [], "locale": "zh-CN", "id": 65421, "last_edit": "2016-05-10T02:45:09", "summary": "<code>transition</code>\u00a0\u662f\u4e00\u4e2a<a href=\"/en-US/docs/CSS/Shorthand_properties\" title=\"/en-US/docs/CSS/Shorthand_properties\">\u7b80\u5199\u5c5e\u6027</a>\uff0c\u53ef\u8bbe\u7f6e <a href=\"/zh-CN/docs/Web/CSS/transition-property\" title=\"&#x6B64;&#x9875;&#x9762;&#x4ECD;&#x672A;&#x88AB;&#x672C;&#x5730;&#x5316;, &#x671F;&#x5F85;&#x60A8;&#x7684;&#x7FFB;&#x8BD1;!\"><code>transition-property</code></a>, <a href=\"/zh-CN/docs/Web/CSS/transition-duration\" title=\"The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.\"><code>transition-duration</code></a>, <a href=\"/zh-CN/docs/Web/CSS/transition-timing-function\" title=\"CSS&#x5C5E;&#x6027;&#x53D7;&#x5230;&#xA0;transition effect&#x7684;&#x5F71;&#x54CD;&#xFF0C;&#x4F1A;&#x4EA7;&#x751F;&#x4E0D;&#x65AD;&#x53D8;&#x5316;&#x7684;&#x4E2D;&#x95F4;&#x503C;&#xFF0C;&#x800C;&#xA0;CSS transition-timing-function&#xA0;&#x5C5E;&#x6027;&#x7528;&#x6765;&#x63CF;&#x8FF0;&#x8FD9;&#x4E2A;&#x4E2D;&#x95F4;&#x503C;&#x662F;&#x600E;&#x6837;&#x8BA1;&#x7B97;&#x7684;&#x3002;&#x5B9E;&#x8D28;&#x4E0A;&#xFF0C;&#x901A;&#x8FC7;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#x4F1A;&#x5EFA;&#x7ACB;&#x4E00;&#x6761;&#x52A0;&#x901F;&#x5EA6;&#x66F2;&#x7EBF;&#xFF0C;&#x56E0;&#x6B64;&#x5728;&#x6574;&#x4E2A;transition&#x53D8;&#x5316;&#x8FC7;&#x7A0B;&#x4E2D;&#xFF0C;&#x53D8;&#x5316;&#x901F;&#x5EA6;&#x53EF;&#x4EE5;&#x4E0D;&#x65AD;&#x6539;&#x53D8;&#x3002;\"><code>transition-timing-function</code></a>,\u00a0 <a href=\"/zh-CN/docs/Web/CSS/transition-delay\" title=\"CSS&#x7684;transition-delay&#x5C5E;&#x6027;&#x89C4;&#x5B9A;&#x4E86;&#x5728;&#x8FC7;&#x6E21;&#x6548;&#x679C;&#x5F00;&#x59CB;&#x4F5C;&#x7528;&#x4E4B;&#x524D;&#x9700;&#x8981;&#x7B49;&#x5F85;&#x7684;&#x65F6;&#x95F4;&#x3002;\"><code>transition-delay</code></a>\u3002 <code>transition\u7528\u6765\u5b9a\u4e49\u5143\u7d20\u5728\u4e24\u79cd\u72b6\u6001\u4e4b\u95f4\u7684\u8fc7\u6e21\u3002\u4e0d\u540c\u72b6\u6001\u53ef\u4ee5\u7528</code><a href=\"/zh-CN/docs/Web/CSS/:hover\" title=\"The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link &#x2014; :visited &#x2014; :hover &#x2014; :active.\"><code>:hover</code></a> \u3001<a href=\"/zh-CN/docs/Web/CSS/:active\" title=\":active CSS&#x4F2A;&#x7C7B;&#x5339;&#x914D;&#x88AB;&#x7528;&#x6237;&#x6FC0;&#x6D3B;&#x7684;&#x5143;&#x7D20;&#x3002;&#x5B83;&#x8BA9;&#x9875;&#x9762;&#x80FD;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x76D1;&#x6D4B;&#x5230;&#x6FC0;&#x6D3B;&#x65F6;&#x7ED9;&#x51FA;&#x53CD;&#x9988;&#x3002;&#x5F53;&#x7528;&#x9F20;&#x6807;&#x4EA4;&#x4E92;&#x65F6;&#xFF0C;&#x5B83;&#x4EE3;&#x8868;&#x7684;&#x662F;&#x7528;&#x6237;&#x6309;&#x4E0B;&#x6309;&#x952E;&#x548C;&#x677E;&#x5F00;&#x6309;&#x952E;&#x4E4B;&#x95F4;&#x7684;&#x65F6;&#x95F4;&#x3002;&#xA0;:active &#x4F2A;&#x7C7B;&#x901A;&#x5E38;&#x7528;&#x6765;&#x5339;&#x914D;tab&#x952E;&#x4EA4;&#x4E92;&#x3002;&#x901A;&#x5E38;&#x7528;&#x4E8E;&#x4F46;&#x5E76;&#x4E0D;&#x9650;&#x4E8E; &lt;a&gt; &#x548C;&#xA0;&lt;button&gt; HTML&#x5143;&#x7D20;&#x3002;\"><code>:active</code></a>\u4e4b\u7c7b\u7684\u00a0<a href=\"/en-US/docs/CSS/Pseudo-classes\" title=\"/en-US/docs/CSS/Pseudo-classes\">pseudo-classes</a> \u5b9a\u4e49\uff0c\u6216\u8005\u4f7f\u7528 JavaScript \u52a8\u6001\u8bbe\u7f6e\u3002", "sections": [{"id": "Quick_Links", "title": null}, {"id": "\u6982\u8ff0", "title": "\u6982\u8ff0"}, {"id": "\u8bed\u6cd5", "title": "\u8bed\u6cd5"}, {"id": "\u6807\u51c6\u8bed\u6cd5", "title": "\u6807\u51c6\u8bed\u6cd5"}, {"id": "\u8303\u4f8b", "title": "\u8303\u4f8b"}, {"id": "\u8be6\u8ff0", "title": "\u8be6\u8ff0"}, {"id": "\u6d4f\u89c8\u5668\u517c\u5bb9\uff08Browser_compatibility\uff09", "title": "\u6d4f\u89c8\u5668\u517c\u5bb9\uff08Browser compatibility\uff09"}, {"id": "\u53e6\u89c1", "title": "\u53e6\u89c1"}], "slug": "Web/CSS/transition", "review_tags": []}