Animations

EPUB3-Sliderizer supports Animate.css (CSS3 keyframed animations)

Example:

_CONTENT
<img src="assets/logo.png"
class="epb3sldrzr-animated bounceInLeft my-logo">

_CSS_STYLE
img.my-logo {
-PREFIXED_PROPERTY-animation-duration: 1.5s;
-PREFIXED_PROPERTY-animation-delay: 1s;
-PREFIXED_PROPERTY-animation-iteration-count: infinite; }

The CSS class 'epb3sldrzr-animated' ensures that animations are fired only once the slide is ready.

NO-MARKDOWN <div class="auto incremental"> <p style="margin-bottom: 1em;"> EPUB3-Sliderizer supports <a href="http://daneden.me/animate">Animate.css</a> <span class="fade" style="font-size: 0.8em">(CSS3 keyframed animations)</span> <div class="boxed" style="margin-bottom: 1em;"> <h3>Example:</h3> <p class="code" style="font-size: 0.8em;"> <span class="pale-blue"> _CONTENT</span> <br> <span class="pale-greenx"><img src="assets/logo.png"</span> <br> <span class="pale-greenx">class="</span><span class="pale-red">epb3sldrzr-animated</span><span class="pale-greenx"> </span><span class="magenta">bounceInLeft</span><span class="pale-greenx"> </span><span class="pale-green">my-logo</span><span class="pale-greenx">"></span> <br> <br> <span class="pale-blue"> _CSS_STYLE</span> <br> <span class="pale-greenx">img.</span><span class="pale-green">my-logo</span><span class="pale-greenx"> {<br>-PREFIXED_PROPERTY-animation-duration: 1.5s;<br>-PREFIXED_PROPERTY-animation-delay: 1s;<br>-PREFIXED_PROPERTY-animation-iteration-count: infinite; }</span> </p> </div> <p> The CSS class '<span class="code pale-red">epb3sldrzr-animated</span>' ensures that animations are fired only once the slide is ready. </div>

NO-MARKDOWN
<div class="auto incremental">
<p style="margin-bottom: 1em;">
EPUB3-Sliderizer supports <a href="http://daneden.me/animate">Animate.css</a> <span class="fade" style="font-size: 0.8em">(CSS3 keyframed animations)</span>
<div class="boxed" style="margin-bottom: 1em;">
<h3>Example:</h3>
<p class="code" style="font-size: 0.8em;">
<span class="pale-blue">
    _CONTENT</span>
<br>
<span class="pale-greenx">&lt;img src="assets/logo.png"</span>
<br>
<span class="pale-greenx">class="</span><span class="pale-red">epb3sldrzr-animated</span><span class="pale-greenx"> </span><span class="magenta">bounceInLeft</span><span class="pale-greenx"> </span><span class="pale-green">my-logo</span><span class="pale-greenx">"&gt;</span>
<br>
<br>
<span class="pale-blue">
    _CSS_STYLE</span>
<br>
<span class="pale-greenx">img.</span><span class="pale-green">my-logo</span><span class="pale-greenx"> {<br>-PREFIXED_PROPERTY-animation-duration: 1.5s;<br>-PREFIXED_PROPERTY-animation-delay: 1s;<br>-PREFIXED_PROPERTY-animation-iteration-count: infinite; }</span>
</p>
</div>
<p>
The CSS class '<span class="code pale-red">epb3sldrzr-animated</span>' ensures that animations are fired only once the slide is ready.
</div>