Overview.bs

<h1>CSS Transitions Level 2</h1>

<pre class='metadata'>
Status: ED
Work Status: Exploring
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>

<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-common">Issues commonly raised as issues with previous levels</h2>

	<p>
		These issues were commonly reported issues
		with the previous level of the specification.
	</p>

	<div class="issue">
		<p>
			More powerful timing function syntax
			is a common request from developers.
			See, for example:
			<a href="https://lists.w3.org/Archives/Public/www-style/2013Jun/0376.html">2013 message</a>
			or
			<a href="https://lists.w3.org/Archives/Public/public-fx/2015JulSep/thread.html#msg34">2015 thread</a>.
		</p>
	</div>

	<div class="issue">
		<p>
			Developers frequently have to trigger style flushes
			in order to force transitions to start.
			It would be good to have an API
			that would avoid this requirement.
			See, for example,
			<a href="https://lists.w3.org/Archives/Public/www-style/2011Mar/0729.html">2011 proposal</a>.
		</p>
	</div>

<h2 id="issues-spec">Issues deferred from previous levels of the spec</h2>

	<p>
		These issues were in previous levels of the specification,
		but may not turn out to be important in this level either.
	</p>

	<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>