{"json_modified": "2016-10-20T01:47:16.716614", "uuid": "2e49e273-b3be-412d-9f53-ac384c483ad8", "title": "Using CSS transitions", "url": "/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions", "tags": ["CSS", "Advanced", "CSS Transitions", "Tutorial", "Experimental"], "translations": [{"uuid": "698f13e7-8e14-4c13-b543-ed1810423e6b", "title": "Transiciones de CSS", "url": "/es/docs/Web/CSS/Transiciones_de_CSS", "tags": ["CSS", "Transiciones de CSS", "Gecko"], "summary": "Las transiciones CSS, parte del borrador de la especificaci\u00f3n CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instant\u00e1nea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instant\u00e1neo.\u00a0Al habilitar\u00a0las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleraci\u00f3n que puedes personalizar.", "localization_tags": [], "locale": "es", "last_edit": "2016-01-30T12:27:57", "review_tags": []}, {"uuid": "06f84e6b-b673-48ee-92aa-40649718b878", "title": "Utiliser les transitions CSS", "url": "/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS", "tags": ["CSS", "Avanc\u00e9", "Exp\u00e9rimental", "Guide"], "summary": "", "localization_tags": [], "locale": "fr", "last_edit": "2016-09-05T04:16:00", "review_tags": []}, {"uuid": "ed78f445-bc82-4325-a9ad-f20fdefd267b", "title": "CSS transition \u306e\u4f7f\u7528", "url": "/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions", "tags": ["CSS", "CSS3", "CSS Reference", "CSS Transitions"], "summary": "<a href=\"/ja/docs/CSS/CSS3\" title=\"/ja/docs/CSS/CSS3\">CSS3</a> \u4ed5\u69d8\u306e\u4e00\u90e8\u3067\u3042\u308b <strong>CSS transitions</strong> \u306f\u3001CSS \u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u5909\u5316\u3059\u308b\u969b\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30b9\u30d4\u30fc\u30c9\u306e\u64cd\u4f5c\u6cd5\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u3088\u308b\u5909\u5316\u306f\u5373\u5ea7\u306b\u53cd\u6620\u3055\u308c\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u6307\u5b9a\u3055\u308c\u305f\u6642\u9593\u306e\u9593\u306b\u6e21\u3063\u3066\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u5909\u5316\u3057\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001\u3042\u308b\u8981\u7d20\u306e\u524d\u666f\u8272\u3092\u767d\u8272\u304b\u3089\u9ed2\u8272\u306b\u5909\u66f4\u3059\u308b\u5834\u5408\u3001\u901a\u5e38\u306f\u5373\u5ea7\u306b\u524d\u666f\u8272\u304c\u66ff\u308f\u308a\u307e\u3059\u3002transitions \u304c\u6709\u52b9\u306a CSS \u3067\u306f\u3001\u6307\u5b9a\u3057\u305f\u6642\u9593\u3092\u304b\u3051\u3066\u3001\u307e\u305f\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305f\u52a0\u901f\u5ea6\u66f2\u7dda\u306b\u5f93\u3063\u3066\u5909\u5316\u3057\u3066\u3044\u304d\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-10-20T01:47:05", "review_tags": []}, {"uuid": "284bde50-4535-43b2-80eb-88d424403b1e", "title": "CSS \ud2b8\ub79c\uc9c0\uc158 \uc0ac\uc6a9\ud558\uae30", "url": "/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions", "tags": [], "summary": "<a href=\"/en-US/docs/CSS/CSS3\" style=\"line-height: 1.5;\" title=\"/en-US/docs/CSS/CSS3\">CSS3</a><span style=\"line-height: 1.5;\">\u00a0\uc2a4\ud399 \uafb8\ub7ec\ubbf8\uc758 \uc77c\ubd80\uc778\u00a0</span><strong>CSS \ud2b8\ub79c\uc9c0\uc158(transitions)</strong>\uc740 CSS \uc18d\uc131\uc744 \ubcc0\uacbd\ud560 \ub54c \uc560\ub2c8\uba54\uc774\uc158 \uc18d\ub3c4\ub97c \uc870\uc808\ud558\ub294 \ubc29\ubc95\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc18d\uc131 \ubcc0\uacbd\uc774 \uc989\uc2dc \uc601\ud5a5\uc744 \ubbf8\uce58\uac8c \ud558\ub294 \ub300\uc2e0, \uadf8 \uc18d\uc131\uc758 \ubcc0\ud654\uac00 \uc77c\uc815 \uae30\uac04\uc5d0 \uac78\uccd0 \uc77c\uc5b4\ub098\ub3c4\ub85d \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc5ec\ub7ec\ubd84\uc774 \uc5b4\ub5a4 \uc694\uc18c\uc758 \uc0c9\uc0c1\uc744 \ud770\uc0c9\uc5d0\uc11c \uac80\uc740\uc0c9\uc73c\ub85c \ubcc0\uacbd\ud55c\ub2e4\uba74, \ubcc0\ud654\ub294 \ub300\uac1c \uc989\uc2dc \uc77c\uc5b4\ub0a9\ub2c8\ub2e4.\u00a0", "localization_tags": ["inprogress"], "locale": "ko", "last_edit": "2015-12-19T03:26:51", "review_tags": []}, {"uuid": "bd402599-6102-407d-a55c-af0b1c259ed0", "title": "Cum folosim transitions in CSS", "url": "/ro/docs/Web/CSS/CSS_Transitions/transitions_in_css", "tags": ["CSS", "Advanced", "Web", "Example", "Guide", "CSS3", "CSS Transitions"], "summary": "<strong>CSS transitions</strong> este o parte din specificatiile <a href=\"/en-US/docs/CSS/CSS3\" title=\"/en-US/docs/CSS/CSS3\">CSS3</a> care ofera controlul vitezei animatiilor atunci cand se fac modificari in proprietatile CSS ale unui element. In loc ca modificarile sa se intample instant putem face ca acestea sa se intample treptat, intr-o perioada de timp. De exemplu, daca schimbam culoarea unui element din alb in negru, modificarea se va face instant", "localization_tags": [], "locale": "ro", "last_edit": "2015-11-13T08:00:26", "review_tags": []}, {"uuid": "eeb4d977-7ba5-451f-9329-150e6c98f75f", "title": "\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 CSS \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432", "url": "/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions", "tags": [], "summary": "<strong>CSS transitions</strong>\u00a0\u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0441\u0440\u0430\u0437\u0443, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u043c, \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u043c\u0435\u043d\u0438\u0442\u0435 \u0446\u0432\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0431\u0435\u043b\u043e\u0433\u043e \u043d\u0430 \u0447\u0451\u0440\u043d\u044b\u0439, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e, \u0430 \u0432\u043e\u0442 \u0441 CSS transitions, \u0438\u0437\u043c\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0443\u0442 \u0437\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u044b, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043a\u0440\u0438\u0432\u043e\u0439 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u044f, \u0432\u0441\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u044b.", "localization_tags": [], "locale": "ru", "last_edit": "2016-07-19T23:47:06", "review_tags": []}, {"uuid": "25972623-b9f8-4028-9a86-09911fe182b9", "title": "\u4f7f\u7528 CSS transitions", "url": "/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions", "tags": ["\u8fc7\u6e21", "CSS", "\u9ad8\u7ea7", "CSS Transitions", "\u6559\u7a0b"], "summary": "\u5f53 CSS \u5c5e\u6027\u53d1\u751f\u53d8\u5316\u65f6\uff0c<strong>\u00a0CSS transition </strong>\u80fd\u63a7\u5236\u5176\u53d8\u5316\u7684\u52a8\u753b\u901f\u7387\u3002 \u5176\u53ef\u4ee5\u8ba9\u5c5e\u6027\u53d8\u5316\u6210\u4e3a\u4e00\u4e2a\u6301\u7eed\u4e00\u6bb5\u65f6\u95f4\u7684\u8fc7\u7a0b\uff0c\u800c\u4e0d\u662f\u7acb\u5373\u751f\u6548\u7684\u3002\u6bd4\u5982\uff0c\u5c06\u4e00\u4e2a\u5143\u7d20\u7684\u989c\u8272\u4ece\u767d\u8272\u6539\u4e3a\u9ed1\u8272\uff0c\u901a\u5e38\u8fd9\u4e2a\u6539\u53d8\u662f\u7acb\u5373\u751f\u6548\u7684\uff0c\u4f7f\u7528 CSS transitions \u540e\u8be5\u5143\u7d20\u7684\u989c\u8272\u5c06\u9010\u6e10\u4ece\u767d\u8272\u53d8\u4e3a\u9ed1\u8272\uff0c\u6309\u7167\u4e00\u5b9a\u7684\u66f2\u7ebf\u901f\u7387\u53d8\u5316\u3002\u8fd9\u4e2a\u8fc7\u7a0b\u53ef\u4ee5\u81ea\u5b9a\u4e49\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-01-08T22:16:57", "review_tags": []}, {"uuid": "b1cb4271-6a08-4e40-8ec3-d5ac4c68e235", "title": "CSS \u8f49\u5834", "url": "/zh-TW/docs/CSS_%E8%BD%89%E5%A0%B4", "tags": ["CSS \u8f49\u5834", "CSS \u904e\u6e21", "CSS transition", "CSS animation"], "summary": "", "localization_tags": [], "locale": "zh-TW", "last_edit": "2013-12-08T23:00:09", "review_tags": []}], "modified": "2016-10-08T05:33:22", "label": "Using CSS transitions", "localization_tags": [], "locale": "en-US", "id": 2514, "last_edit": "2016-08-31T13:20:56", "summary": "<strong>CSS transitions</strong>\u00a0provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Which_CSS_properties_are_animatable", "title": "Which CSS properties are animatable?"}, {"id": "Multiple_animated_properties_example", "title": "Multiple animated properties example"}, {"id": "HTML_Content", "title": "HTML Content"}, {"id": "CSS_Content", "title": "CSS Content"}, {"id": "CSS_properties_used_to_define_transitions", "title": "CSS properties used to define transitions"}, {"id": "Detecting_the_completion_of_a_transition", "title": "Detecting the completion of a transition"}, {"id": "When_property_value_lists_are_of_different_lengths", "title": "When property value lists are of different lengths"}, {"id": "A_simple_example", "title": "A simple example"}, {"id": "Using_transitions_when_highlighting_menus", "title": "Using transitions when highlighting menus"}, {"id": "Using_transitions_to_make_JavaScript_functionality_smooth", "title": "Using transitions to make JavaScript functionality smooth"}, {"id": "Specifications", "title": "Specifications"}, {"id": "Browser_compatibility", "title": "Browser compatibility"}, {"id": "See_also", "title": "See also"}], "slug": "Web/CSS/CSS_Transitions/Using_CSS_transitions", "review_tags": []}