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

<div class="section section-basic-components"> <div class="container"> <div class="row"> <div class="col-lg-5 col-md-7 ml-auto mr-auto"> <h2 class="title">Basic Elements</h2> <h6 class="category">The core elements of your website</h6> <h5 class="description">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.</h5> </div> <div class="col-lg-6 col-md-12"> <div class="image-container"> <img class="components-macbook" src="assets/img/ipad.png" alt=""> <img class="table-img" src="assets/img/presentation-page/table.jpg" alt=""> <img class="share-btn-img" src="assets/img/presentation-page/share-btn.jpg" alt=""> <img class="coloured-card-btn-img" src="assets/img/presentation-page/coloured-card-with-btn.jpg" alt=""> <img class="coloured-card-img" src="assets/img/presentation-page/coloured-card.jpg" alt=""> <img class="social-img" src="assets/img/presentation-page/social-row.jpg" alt=""> <img class="linkedin-btn-img" src="assets/img/presentation-page/linkedin-btn.jpg" alt=""> </div> </div> </div> </div> </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;
}`