157157●●options
158158
159159spec_title:CSS Transitions Level 1
160- spec_date:2023 - 12 - 10
160+ spec_date:2025 - 06 - 27
161161trans_update:2023 - 03 - 05
162- source_checked:180705
162+ source_checked:250627
163163page_state_key:CSS
164164original_url:https://drafts.csswg.org/css-transitions-1/
165165 abbr_url:TRANSITION
168168ref_id_lowercase :true
169169site_nav:css - anim , css
170170conformance:css
171- copyright:2023 , permissive
171+ copyright:2025 , permissive
172172trans_1st_pub:2013 - 09 - 08
173173
174174
208208delay:
209209duration:
210210
211+ 旧 id
212+ transitions:transitions -
213+
211214●●mdn_urls
212215propdef - transition :CSS / transition
213216propdef - transition - delay :CSS / transition - delay
292295m . elapsedTime :#Events- TransitionEvent - elapsedTime
293296 css - animations - 1 / #dom- animationevent - elapsedtime?
294297m . pseudoElement :#Events- TransitionEvent - pseudoElement
295- m . TransitionEvent :#dom- transitionevent - transitionevent
298+ m . new TransitionEvent:#dom- transitionevent - transitionevent
296299
297300
298301
621624[ CSS - CASCADE - 6 ]
622625 Elika Etemad ; Miriam Suzanne ; Tab Atkins Jr . . <CSS Cascading and Inheritance Level 6 > . URL : https://drafts.csswg.org/css-cascade-6/
623626[ CSS - COLOR - 4 ]
624- Tab Atkins Jr . ; Chris Lilley ; Lea Verou . <CSS Color Module Level 4 > . URL : https://drafts.csswg.org/css-color/
627+ Chris Lilley ; Tab Atkins Jr . ; Lea Verou . <CSS Color Module Level 4 > . URL : https://drafts.csswg.org/css-color-4 /
625628[ CSS - EASING - 1 ]
626629 Brian Birtles ; Dean Jackson ; Matt Rakow . <CSS Easing Functions Level 1 > . URL : https://drafts.csswg.org/css-easing/
627630[ CSS - EASING - 2 ]
628- <CSS Easing Functions Level 2 > . Editor 's Draft. URL: https://drafts.csswg.org/css-easing-2 /
631+ <CSS Easing Functions Level 2 > . URL : https://drafts.csswg.org/css-easing/
629632[ CSS - TRANSFORMS - 1 ]
630633 Simon Fraser ; et al . <CSS Transforms Module Level 1 > . URL : https://drafts.csswg.org/css-transforms/
631634[ CSS - VALUES - 3 ]
634637 Tab Atkins Jr . ; Elika Etemad . <CSS Values and Units Module Level 4 > . URL : https://drafts.csswg.org/css-values-4/
635638[ CSS2 ]
636639 Bert Bos ; et al . <Cascading Style Sheets Level 2 Revision 1 ( CSS 2.1 ) Specification> . URL : https://drafts.csswg.org/css2/
637- [ CSS22 ]
638- Bert Bos . <Cascading Style Sheets Level 2 Revision 2 ( CSS 2.2 ) Specification> . URL : https://drafts.csswg.org/css2/
639640[ CSS3 - ANIMATIONS ]
640641 David Baron ; et al . <CSS Animations Level 1 > . URL : https://drafts.csswg.org/css-animations/
641642[ CSS3CASCADE ]
656657●●ref_informative
657658
658659[ CSS - BACKGROUNDS - 3 ]
659- Bert Bos ; Elika Etemad ; Brad Kemper . <CSS Backgrounds and Borders Module Level 3 > . URL : https://drafts.csswg.org/css-backgrounds/
660+ Elika Etemad ; Brad Kemper . <CSS Backgrounds and Borders Module Level 3 > . URL : https://drafts.csswg.org/css-backgrounds/
660661[ SMIL - ANIMATION ]
661662 Patrick Schmitz ; Aaron Cohen . <SMIL Animation> . 4 September 2001. REC . URL : https://www.w3.org/TR/smil-animation/
662663[ SVG11 ]
@@ -1665,7 +1666,7 @@ <h2 title="Starting of transitions">3. 遷移の開始-法</h2>
16651666⇒
16661667`max^op( `所要時間$V, `0s^v ) ~PLUS `遅延$V
16671668◎
1668- Define the combined duration of the transition as the sum of max(matching transition duration, 0s) and the matching transition delay.\
1669+ Define the combined duration of the transition as the sum of max(matching transition duration, 0s) and the matching transition delay.
16691670</ li >
16701671 </ ul >
16711672 </ li >
@@ -2344,7 +2345,7 @@ <h2 title="Application of transitions">4. 遷移の適用</h2>
23442345 < li >
23452346%p ~SET ( 現在-時刻 ~MINUS 開始~時刻 ) ~DIV ( 終止~時刻 ~MINUS 開始~時刻 )
23462347◎
2347- p: the output of the timing function for input ()
2348+ p: the output of the timing function for input (current time - start time) / (end time - start time )
23482349</ li >
23492350</ ul >
23502351
@@ -2414,12 +2415,10 @@ <h3 title="Interface TransitionEvent">6.1. ~interface `TransitionEvent^I</h3>
24142415遷移に結付けられた特有な文脈~上の情報を供する。
24152416◎
24162417The TransitionEvent interface provides specific contextual information associated with transitions.
2418+ ◎
2419+ 6.1.1. IDL Definition
24172420</ p >
24182421
2419- <!--
2420- <h4 title="IDL Definition">6.1.1. ~IDL定義</h4>
2421- -->
2422-
24232422< pre class ="idl " id ="interface-transitionevent-idl ">
24242423[`Exposed$=Window]
24252424interface `TransitionEvent@I : `Event$I {
@@ -2441,11 +2440,13 @@ <h4 id="interface-transitionevent-attributes">6.1.2. Attributes</h4>
24412440-->
24422441
24432442< dl class ="idl-def " id ="interface-transitionevent-attributes ">
2444- < dt > `propertyName@m</ dt >
2445- < dd >
2446- 遷移に結付けられた~CSS~propの名前。
2443+ < dt >
2444+ `propertyName@m
24472445◎
24482446propertyName, of type CSSOMString, readonly
2447+ </ dt >
2448+ < dd >
2449+ 遷移に結付けられた~CSS~propの名前。
24492450◎
24502451The name of the CSS property associated with the transition.
24512452</ dd >
@@ -2457,19 +2458,25 @@ <h4 id="interface-transitionevent-attributes">6.1.2. Attributes</h4>
24572458Note: This is always the name of a longhand property. See transition-property for how specifying shorthand properties causes transitions on longhands.
24582459</ dd >
24592460
2460- < dt > `elapsedTime@m</ dt >
2461+ < dt >
2462+ `elapsedTime@m
2463+ ◎
2464+ elapsedTime, of type double, readonly
2465+ </ dt >
24612466 < dd >
24622467秒単位による,この~eventが発火された時点での,遷移の稼働にかけられた時間の長さ
24632468— 遅延~相に~~費やされた時間は含まれない。
24642469この属性~値の計算は、
24652470各~event型ごとに定義される。
24662471◎
2467- elapsedTime, of type double, readonly
2468- ◎
24692472The amount of time the transition has been running, in seconds, when this event fired not including any time spent in the delay phase. The calculation for of this member is defined along with each event type.
24702473</ dd >
24712474
2472- < dt > `pseudoElement@m</ dt >
2475+ < dt >
2476+ `pseudoElement@m
2477+ ◎
2478+ pseudoElement, of type CSSOMString, readonly
2479+ </ dt >
24732480 < dd >
24742481遷移が~CSS疑似要素に対して生じた場合、
24752482その疑似要素の名前になる
@@ -2481,16 +2488,18 @@ <h4 id="interface-transitionevent-attributes">6.1.2. Attributes</h4>
24812488(この場合、
24822489~eventの `target$m は,その要素になる)。
24832490◎
2484- pseudoElement, of type CSSOMString, readonly
2485- ◎
24862491The name (beginning with two colons) of the CSS pseudo-element on which the transition occurred (in which case the target of the event is that pseudo-element’s corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).
24872492</ dd >
24882493
2489- < dt > `TransitionEvent(type, transitionEventInitDict)@m</ dt >
2494+ < dt >
2495+ `new TransitionEvent(type, transitionEventInitDict)@m
2496+ ◎
2497+ TransitionEvent(type, transitionEventInitDict)\
2498+ </ dt >
24902499 < dd >
24912500`~event構築子$。
24922501◎
2493- TransitionEvent(type, transitionEventInitDict) is an event constructor.
2502+ is an event constructor.
24942503</ dd >
24952504</ dl >
24962505
@@ -2855,7 +2864,7 @@ <h3 title="Cascade">10.2. ~cascade</h3>
28552864 </ section >
28562865 </ section >
28572866 < section id ="changes ">
2858- < h2 title ="Changes since Working Draft of 30 November 2017 "> 11. 変更点</ h2 >
2867+ < h2 title ="Changes "> 11. 変更点</ h2 >
28592868
28602869< dl >
28612870 < dt id ="changes-2018 ">
0 commit comments