changing background in CSS

[Bad Addy]

I have the following code, and i am trying to make the background change images of the 'mobilecontainer'.

But its not working, and I am not sure why, of if its possible with CSS ?

pre
/* BACK GROUND ANIMATION OF SCREENS */
.cb-slideshow .startPage_mobilecontainer .ui-content .ui-body-e div {
animation: imageAnimation 36s linear infinite 0s !important;
}

.cb-slideshow div:nth-child(1) {
background-image: url(../image/background.jpg) no-repeat !important;
}
.cb-slideshow div:nth-child(2) {
background-image: url(../image/tenant.png) no-repeat !important
animation-delay: 6s;
}
.cb-slideshow div:nth-child(3) {
background-image: url(../image/background.jpg) no-repeat !important
animation-delay: 12s;
}
.cb-slideshow div:nth-child(4) {
background-image: url(../image/tenant.png) no-repeat !important
animation-delay: 18s;
}

@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/pre

Is this possible ?

[Bad Addy]

Here is the image of the Appery UI:

[Yurii Orishchuk]

Hello.

CSS animation is possible with Appery.io application..

But currently your CSS code is not simple to do simple things.

Please describe what you want to do and we will provide you an easy solution that's you can complicate.

Also here is an first easy solution which you can try in your Appery.io app:

precode

.pageUniqueClassName.ui-content{

/* default background */
background: #fff;
}

.pageUniqueClassName.ui-content:hover{
animation: anim 4s 1;
-webkit-animation: anim 4s 1;
}

@-webkit-keyframes anim{
from {
background: #fff;
}
to {
background: #f0f;
}
}
@keyframes anim{
from {
background: #fff;
}
to {
background: #f0f;
}
}

/code/pre

Regards.

[Bad Addy]

I have 4 images, on the title screen and I need them to change every 36 seconds, but must be a background, ie, mobilecontainer so I can place elements on top of it

[Bad Addy]

I did copy and past what you did above and it change not do anything ?

[Kateryna Grynko]

Hi Addy,

To make the above code work without changes, add a class pageUniqueClassName for mobilecontainer:

[Bad Addy]

Yes, I did do that, and it just gives me a white screen, no changes!

[Evgene Karachevtsev]

Hello Addy,

We have just tested - it works. Could you please clatify, how did you test it? Have you changed any sources?

[Bad Addy]

I just copied and pasted the above, as it is, into a CSS file. I kept everything the same, including class name, and added the class name to the startPage mobilecontainer class box. Like this:

This is all I get:

It does not change ?

[Yurii Orishchuk]

Hello.

Sorry i did not describe how to test is.

Following code means that behaviour will appear only when user move mouse over the "mobilecontainer" component:

precode

.pageUniqueClassName.ui-content:hover

/code/pre

So when you test it in browser just move mouse over the "mobilecontainer" component.

Also if you would still have an issue please provide us your app public link and we will take a look.

Regards.