Ken Burns Effect using Custom CSS

This application note provides an example of how to add a Ken Burns effect to a Slideshow block using custom CSS.

1. Download this block (but do not unpack the ZIP file).
2. In the Blocks editor at the Display page, import the block using the Import ZIP file command on the Block menu.
3. Drag the Ken Burns Effect block onto a Display Spot and watch the slides slowly zoom in while playing.

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:

.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);
    }
}

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.