====== Ken Burns Effect using Custom CSS ======

This application note provides an example of how to add a [[https://en.wikipedia.org/wiki/Ken_Burns_effect|Ken Burns effect]] to a Slideshow block using custom CSS.

===== Using the Ken Burns Effect block =====

  - Download {{:blocks:app-note:ken_burns_effect.zip |this block}} (but do not unpack the ZIP file).
  - In the Blocks editor at the Display page, import the block using the //Import ZIP file// command on the Block menu.
  - Drag the //Ken Burns Effect// block onto a Display Spot and watch the slides slowly zoom in while playing.

===== Behind the scenes =====

The custom CSS code, which can be viewed by clicking the pen icon in the "Custom CSS URL" field of the slideshow, looks like this:

<code>
.slide-show .slide-show-slides .active-slide {
    animation-name: ken-burns;
    animation-duration: 11s;
    animation-timing-function: linear;
}

@keyframes ken-burns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}
</code>

A CSS @keyframes animation (named ken-burns) zooms in on the image by scaling it to 1.2 times its size (using transform: scale()). The .active-slide class, which is automatically added by Blocks to the currently playing slide, runs the ken-burns animation for 11 seconds.

A couple of notes regarding the methods used in this application note:

  * If the default duration and/or the transition duration is modified in the Blocks editor, the animation-duration must be updated in the CSS file as well. In this case, a default duration of 10 seconds and a transition duration of 1 second adds up to 11 seconds for the ken-burns animation. 

  * The override duration option cannot be used.

  * Some transitions may not work properly (due to different internal behaviours). The Crossfade transition, which is used in this example, does work fairly well. So does no transition at all.

  * For more advanced effects, such as zooming in on a specific point or having different slide durations, a regular video could be used instead. Additional CSS classes could also be used, but would, for a large slideshow, most likely require a lot of code.