@keyframe opacity overridden by effects module opacity setting

[renecueva_gmail]

I am trying to build a simple animation with clouds moving over a city clipart image.

The clouds start at opacity 0 on the left, are set to 0.9 in the middle and finishes at 0 at the far right.

In cornerstone preview everything looks perfect but in any browser showing the actual page, the clouds stick to the value in the effects module opacity setting.

If I change the setting of each cloud in effects, they do not have any visible effect regarding the keyframe animation and it play perfect in Cornerstone, but on an actual browser they show the effect module setting.

My question is, is there a way to override the effects module opacity setting? or a workaround to make it play correctly in the actual browsers?

Cornerstone preview:

Actual browser:

The CSS:

.cloud_1 {
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 20s linear 0s infinite;
  	/* Mozilla */
    -moz-animation: repeatit 20s linear 0s infinite;
    /* Standard syntax */
    animation: repeatit 20s linear 0s infinite;
}

.cloud_2 {
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 30s linear 0s infinite;
  	/* Mozilla */
    -moz-animation: repeatit 30s linear 0s infinite;
    /* Standard syntax */
    animation: repeatit 30s linear 0s infinite;
}

.cloud_3 {
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 50s linear 0s infinite;
  	/* Mozilla */
    -moz-animation: repeatit 50s linear 0s infinite;
    /* Standard syntax */
    animation: repeatit 50s linear 0s infinite;
}

.cloud_4 {
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 80s linear 0s infinite;
  	/* Mozilla */
    -moz-animation: repeatit 80s linear 0s infinite;
    /* Standard syntax */
    animation: repeatit 80s linear 0s infinite;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
  0% {left: 0%; opacity: 0;}
  20% {opacity: 0.9;}
  80% {opacity: 0.9;}
  90% {opacity: 0;}
  100% {left: 100%; opacity: 0;}
}

/* Mozilla */
@-moz-keyframes repeatit {
  0% {left: 0%; opacity: 0;}
  20% {opacity: 0.9;}
  80% {opacity: 0.9;}
  90% {opacity: 0;}
  100% {left: 100%; opacity: 0;}
}
 
/* Standard syntax */
@keyframes repeatit {
  0% {left: 0%; opacity: 0;}
  20% {opacity: 0.9;}
  80% {opacity: 0.9;}
  90% {opacity: 0;}
  100% {left: 100%; opacity: 0;}
}

Cheers…

[ruenel]

Hello Rene,

Thanks for writing in!

Be advised that this is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Can you please provide us the URL of the page where you have added those Clouds so we can check it?

Best Regards.

[renecueva_gmail]

Secured note sent.

[ruenel]

Hi Rene,

I have checked your page and I do not see any issues with it. This is what I am seeing on my browsing:

see the secure note below

It seems that you have a caching issue. Please your browser cache or use private browser mode and test your site again.

Best Regards.

[renecueva_gmail]

Thank you, but that is not the problem @ruenel.

The clouds move ok, but they should start and end at opacity 0 with 0.9 in between.

They show at the opacity defined on the effect module, which is overriding the opacity changes set in the @keyframe code.

The weird thing is that in the Cornerstone preview they play as they should, which is puzzling.

I’ve removed the browsers cache and tested in a private window. Same result, no opacity change.

Cheers…

[renecueva_gmail]

Ok, I just fixed it.

For anybody else that might have this kind of problem, the css code for the @keyframe was originally put on the parent div of the images but when I moved the code to the page css, it worked as it should.

I guess I just skipped by luck the overriding culprit, even though I did not find any cause inspecting the code in the browser. One the mysterious nuances of a great development tool like PRO.

Cheers…

[ruenel]

Hey Rene,

We are really glad that you have figured out a solution to your issue. Thank you also for sharing the information. We really appreciate it.

Best Regards.