---
{
	"title": "Transitions",
	"language": "en",
	"category": "Other",
	"description": "CSS-based transitions",
	"tag": "transitions",
	"parentdir": "transitions",
	"altLangPrefix": "transitions",
	"css": ["demo/transitions"],
	"dateModified": "2014-07-08"
}
---
<section class="alert alert-info">
	<h2 class="h3">Purpose</h2>
	<p>Create a transition class with optional states.</p>
</section>

<section>
	<h2>Fade</h2>
	<section>
		<h3>Fade-in</h3>
		<p>Hover mouse over space below to trigger fade-in (300ms)</p>
		<img src="https://placehold.it/350x150&amp;text=fade-in+test" class="wb-fade-in-test" alt="placeholder" tabindex="0" />
		<img src="https://placehold.it/350x150&amp;text=fade-in+test" class="" alt="placeholder" />
	</section>

	<section>
		<h3>Fade-out</h3>
		<p>Hover mouse over space below to trigger fade-out (500ms)</p>
		<img src="https://placehold.it/350x150&amp;text=fade-out+test" class="wb-fade-out-test" alt="placeholder" tabindex="0" />
		<img src="https://placehold.it/350x150&amp;text=fade-out+test" class="" alt="placeholder" />
	</section>

	<section>
		<h3>Tabbed interface (Carousel) examples</h3>
		<ul>
			<li><a href="../tabs/tabs-carousel-en.html#fade">Fade</a></li>
		</ul>
	</section>
</section>

<section>
	<h2>Slide</h2>
	<section>
		<h3>Slide-left</h3>
		<p>Hover mouse over space below to trigger slide-left (300ms)</p>
		<img src="https://placehold.it/350x150&amp;text=slide-left+test" class="wb-slide-left-test" alt="placeholder" tabindex="0" />
		<img src="https://placehold.it/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
	</section>

	<section>
		<h3>Slide-right</h3>
		<p>Hover mouse over space below to trigger slide-right (500ms)</p>
		<img src="https://placehold.it/350x150&amp;text=slide-right+test" class="wb-slide-right-test" alt="placeholder" tabindex="0" />
		<img src="https://placehold.it/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
	</section>

	<section>
		<h3>Tabbed interface (Carousel) examples</h3>
		<ul>
			<li><a href="../tabs/tabs-carousel-en.html#slide">Slide - Horizontal</a></li>
			<li><a href="../tabs/tabs-carousel-en.html#slidevert">Slide - Vertical</a></li>
		</ul>
	</section>
</section>