Restart CSS Animation

You want your website to look alive and agile. To achieve this, we’ve added a feature that makes animations restart. Restarting animations means that every time you scroll the page, the animation will be played once more. You can check out the examples of how it works below. Simply scroll down the page, go back up, and then down again. Enjoy!

500 px

Restart CSS Animation Off

Morbi id rutrum lacus. Suspendisse interdum ultrices vulputate. Praesent aliquet diam tortor, ut ultricies tortor ultrices fermentum. Aliquam consequat finibus viverra. Vestibulum aliquet, arcu sed facilisis molestie, diam odio aliquet mi, hendrerit varius risus turpis at neque. Proin sit amet sapien quis eros auctor fringilla. Morbi non diam et mi ultricies pulvinar. Donec vel semper velit. Mauris dapibus tellus nec nulla auctor vestibulum.

Morbi id rutrum lacus. Suspendisse interdum ultrices vulputate. Praesent aliquet diam tortor, ut ultricies tortor ultrices fermentum. Aliquam consequat finibus viverra. Vestibulum aliquet, arcu sed facilisis molestie, diam odio aliquet mi, hendrerit varius risus turpis at neque. Proin sit amet sapien quis eros auctor fringilla. Morbi non diam et mi ultricies pulvinar. Donec vel semper velit. Mauris dapibus tellus nec nulla auctor vestibulum.

Morbi id rutrum lacus. Suspendisse interdum ultrices vulputate. Praesent aliquet diam tortor, ut ultricies tortor ultrices fermentum. Aliquam consequat finibus viverra. Vestibulum aliquet, arcu sed facilisis molestie, diam odio aliquet mi, hendrerit varius risus turpis at neque. Proin sit amet sapien quis eros auctor fringilla. Morbi non diam et mi ultricies pulvinar. Donec vel semper velit. Mauris dapibus tellus nec nulla auctor vestibulum.

Restart CSS Animation On

CSS Animation on Row: fadeInUp2

Morbi id rutrum lacus. Suspendisse interdum ultrices vulputate. Praesent aliquet diam tortor, ut ultricies tortor ultrices fermentum. Aliquam consequat finibus viverra. Vestibulum aliquet, arcu sed facilisis molestie, diam odio aliquet mi, hendrerit varius risus turpis at neque. Proin sit amet sapien quis eros auctor fringilla. Morbi non diam et mi ultricies pulvinar. Donec vel semper velit. Mauris dapibus tellus nec nulla auctor vestibulum.

Morbi id rutrum lacus. Suspendisse interdum ultrices vulputate. Praesent aliquet diam tortor, ut ultricies tortor ultrices fermentum. Aliquam consequat finibus viverra. Vestibulum aliquet, arcu sed facilisis molestie, diam odio aliquet mi, hendrerit varius risus turpis at neque. Proin sit amet sapien quis eros auctor fringilla. Morbi non diam et mi ultricies pulvinar. Donec vel semper velit. Mauris dapibus tellus nec nulla auctor vestibulum.

Morbi id rutrum lacus. Suspendisse interdum ultrices vulputate. Praesent aliquet diam tortor, ut ultricies tortor ultrices fermentum. Aliquam consequat finibus viverra. Vestibulum aliquet, arcu sed facilisis molestie, diam odio aliquet mi, hendrerit varius risus turpis at neque. Proin sit amet sapien quis eros auctor fringilla. Morbi non diam et mi ultricies pulvinar. Donec vel semper velit. Mauris dapibus tellus nec nulla auctor vestibulum.

Some Examples

Column

Restart CSS Animation Off

Restart CSS Animation On

Morbi id rutrum lacus. Suspendisse interdum ultrices vulputate. Praesent aliquet diam tortor, ut ultricies tortor ultrices fermentum. Aliquam consequat finibus viverra. Vestibulum aliquet, arcu sed facilisis molestie, diam odio aliquet mi, hendrerit varius risus turpis at neque. Proin sit amet sapien quis eros auctor fringilla. Morbi non diam et mi ultricies pulvinar. Donec vel semper velit. Mauris dapibus tellus nec nulla auctor vestibulum.

Morbi id rutrum lacus. Suspendisse interdum ultrices vulputate. Praesent aliquet diam tortor, ut ultricies tortor ultrices fermentum. Aliquam consequat finibus viverra. Vestibulum aliquet, arcu sed facilisis molestie, diam odio aliquet mi, hendrerit varius risus turpis at neque. Proin sit amet sapien quis eros auctor fringilla. Morbi non diam et mi ultricies pulvinar. Donec vel semper velit. Mauris dapibus tellus nec nulla auctor vestibulum.

Counter

Restart CSS Animation Off

[rdy_counter google_fonts=”font_family:Open%20Sans%3A300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic|font_style:800%20bold%20regular%3A800%3Anormal” font_color=”#222222″ position=”center” bounce_animation=”true” digit=”99″ font_size=”90″ speed=”1500″]

Restart CSS Animation On

[rdy_counter google_fonts=”font_family:Open%20Sans%3A300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic|font_style:800%20bold%20regular%3A800%3Anormal” font_color=”#222222″ position=”center” animation_repeat=”show_video” bounce_animation=”true” digit=”99″ font_size=”90″ speed=”1500″]

Separator

Restart CSS Animation Off

Restart CSS Animation On

Client List

Restart CSS Animation Off

[rdy_client_list style=”column” column=”3″ gutter_space=”20″ animation=”true” margin_bottom=”” include=”2288,2287,2286″]

Restart CSS Animation On

[rdy_client_list style=”column” column=”3″ gutter_space=”20″ animation=”true” css_animation_repeat=”show_video” margin_bottom=”” include=”2288,2287,2286″]