Web Depot: Highlight Content By Shifting Elements

Stephen Yagielowicz

According to its publisher, Shift.css is a simple framework to build timed, contained CSS animations that provide presentational eye candy.

To deploy Shift.css, first define a DIV to serve as the animation’s container and then define all of the animating child elements within that DIV as Shift Elements, each of which can have animations and timings applied to them as data attributes. Your CSS properties can be added to the Shift Container,such as a background color, height, width and other standard CSS values. Next up come the values for animating elements, including child elements, which can inherit animations from their parent element.

There are three data attributes applied to Shift Elements to add movement and control: data-animation; data-delay; and data-duration. By default, Shift animations are invoked by clicking or tapping on them, but they can play automatically by adding the class shift-play to the Shift Container element. More than a dozen animation presets are currently available, with more scheduled for release.