Moving Images Help?

[MarkG33]

On the Presentation page https://demos.creative-tim.com/now-ui-kit-pro/presentation.html How are you getting the images to move side to side in the "Basic Elements" section of the page?

When I look at the code i don't see anything obvious that enables this behaviour.

Thanks

`

Basic Elements

The core elements of your website

We re-styled every Bootstrap 4 element to match the Now UI Kit style. All the Bootstrap 4 components that you need in a development have been re-design with the new look. Besides the numerous basic elements, we have also created additional classes. All these items will help you take your project to the next level.

</div>`

[dragosct]

Hi, @MarkG33! You can find the animations in the css, because are infinite animations.

Regards, Dragos

[MarkG33]

Hi, @MarkG33! You can find the animations in the css, because are infinite animations.

Regards, Dragos

There is nothing in the main css file called infinite, animate or animation.

Also, there is nothing in the page html that seems to call the animation.

If I copy the code above and paste it into a new page all I get is big images.

So I'd really like to know 1: where exactly is the css, and 2: How is it called in the html.

Thanks

Oh. I think I've found them in the demo.css.

`@-webkit-keyframes Floatingy { from { -webkit-transform: translate(0, 0px); } 65% { -webkit-transform: translate(50px, 0); } to { -webkit-transform: translate(0, 0px); } }

@-moz-keyframes Floatingy { from { -moz-transform: translate(0, 0px); } 65% { -moz-transform: translate(50px, 0); } to { -moz-transform: translate(0, 0px); } }

@-webkit-keyframes Floatingx { from { -webkit-transform: translate(50px, 0px); } 65% { -webkit-transform: translate(0, 0); } to { -webkit-transform: translate(50px, 0px); } }

@-moz-keyframes Floatingx { from { -moz-transform: translate(50px, 0px); } 65% { -moz-transform: translate(0, 0); } to { -moz-transform: translate(50px, 0px); } }

.table-img, .coloured-card-img, .coloured-card-btn-img, .linkedin-btn-img, .share-btn-img, .social-img { -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; -webkit-animation-name: Floatingy; -moz-animation-name: Floatingy; float: left; }

.table-img { -webkit-animation-duration: 14s; -moz-animation-duration: 14s; -webkit-animation-name: Floatingx; -moz-animation-name: Floatingx; }

.coloured-card-img { -webkit-animation-duration: 10s; -moz-animation-duration: 10s; }

.coloured-card-btn-img { -webkit-animation-duration: 18s; -moz-animation-duration: 18s; }

.linkedin-btn-img { -webkit-animation-duration: 15s; -moz-animation-duration: 15s; -webkit-animation-name: Floatingx; -moz-animation-name: Floatingx; }

.share-btn-img { -webkit-animation-duration: 11s; -moz-animation-duration: 11s; }

.social-img { -webkit-animation-duration: 16s; -moz-animation-duration: 16s; -webkit-animation-name: Floatingx; -moz-animation-name: Floatingx; }`