Forum | Appery.io

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 ?

Here is the image of the Appery UI:

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.

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

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

Hi Addy,

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

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

Hello Addy,

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

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 ?

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.