Demo: Time Pseudo-Classes

Example 01: Add a CSS class to all P elements after 3000 milliseconds.

Example 02: Add a CSS class to P elements in 2000 milliseconds steps.

Example 03: Toggle CSS class all 1000 milliseconds.

<!-- EXAMPLE 01 -->

<h3>Example 01: Add a CSS class to all P elements after 3000 milliseconds.</h3>

<div id="example-time">
	<p>Revenge is a dish which is best served cold.</p>
	<p>Better to die on your feet than live on your knees.</p>
	<p>When a warrior goes into battle, he does not abandon his friends.</p>
	<p>That is not my dagger protruding from your midsection.</p>
	<p>If winning is not important, why keep score?</p>
</div>
 
<!-- EXAMPLE 02 -->

<h3>Example 02: Add a CSS class to P elements in 2000 milliseconds steps.</h3>

<div id="example-sequence">
	<p>Revenge is a dish which is best served cold.</p>
	<p>Better to die on your feet than live on your knees.</p>
	<p>When a warrior goes into battle, he does not abandon his friends.</p>
	<p>That is not my dagger protruding from your midsection.</p>
	<p>If winning is not important, why keep score?</p>
</div>
 
<!-- EXAMPLE 03 -->

<h3>Example 03: Toggle CSS class all 1000 milliseconds.</h3>

<div id="example-interval">
	<p>Revenge is a dish which is best served cold.</p>
	<p>Better to die on your feet than live on your knees.</p>
	<p>When a warrior goes into battle, he does not abandon his friends.</p>
	<p>That is not my dagger protruding from your midsection.</p>
	<p>If winning is not important, why keep score?</p>
</div>

.red {
	color: red;
}

/* EXAMPLE 01 */

#example-time p:time=3000 {
	add-class: red;
}
 
/* EXAMPLE 02 */

#example-sequence p:sequence=2000 {
	add-class: red;
}
 
/* EXAMPLE 03 */

#example-interval p:interval=1000 => #example-interval p {
	toggle-class: red;
}