Overview.bs

<h1>CSS Transitions Level 2</h1>

<pre class='metadata'>
Status: ED
Shortname: css-transitions-2
Level: 2
Group: csswg
ED: http://dev.w3.org/csswg/css-transitions-2/
Editor: L. David Baron, Mozilla, dbaron@dbaron.org
Issue Tracking: Bugzilla bugs for all levels https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Transitions&amp;resolution=---
Abstract: CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
Ignored Terms: translate, rotate, scale
</pre>
<pre class="link-defaults">
spec:css-transitions-1; type:dfn; text:cancel
spec:css-transitions-1; type:dfn; text:running transitions
</pre>

<h2 id="delta">Delta specification</h2>

	<p>This is a delta specification, meaning that it currently contains
	only the differences from CSS Transitions Level 1 [[!CSS3-TRANSITIONS]].
	Once the Level 1 specification is closer to complete, it will be merged
	with the additions here into a complete level 2 specification.</p>

<h2 id="transition-events"><span id="transition-events-">Transition Events</span></h2>

<h3 id="transition-event-types">Types of <code>TransitionEvent</code></h3>

	<p>The <em>additional</em> types of transition events that can occur are:</p>

	<dl dfn-type=event dfn-for=transitionevent>
		<dt><dfn>transitionstart</dfn>
		<dd>
			The <a idl>transitionstart</a> event occurs when a transition is started (i.e., when it is added to the set of <a>running transitions</a>).
			<ul>
				<li>Bubbles: Yes</li>
				<li>Cancelable: No</li>
				<li>Context Info: propertyName, elapsedTime, pseudoElement</li>
			</ul>
		<dt><dfn>transitioncancel</dfn>
		<dd>
			The <a idl>transitioncancel</a> event occurs when a transition is <a data-lt="cancel">cancelled</a>.
			<ul>
				<li>Bubbles: Yes</li>
				<li>Cancelable: No</li>
				<li>Context Info: propertyName, elapsedTime, pseudoElement</li>
			</ul>
	</dl>

<h2 id="issues">Issues deferred from previous levels</h2>

	<div class="issue">
		We may ultimately want to support a keypath syntax
		for the 'transition-property' property.
		A keypath syntax
		would enable different transitions
		to be specified
		for components of a property.
		For example
		the blur of a shadow
		could have
		a different transition
		than the color of a shadow.
	</div>