Jump to content
MARCELO

CSS animation properties

Recommended Posts

I was building A image gallery background, but i could not change the duration of each image.

The CSS animation duration property specifies i must change the time of each cycle, but when i try to do this , something weird happens.

Isn t the duration specified only by this:

 

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
 

Thanks.

Edited by MARCELO

Share this post


Link to post
Share on other sites

As we don't know what this class is used on or what the html is for this image gallery. How! Do you think we are going to be able to provide a solution or answer?

Share this post


Link to post
Share on other sites

The overall effect is covered by 2 settings, JavaScript controls the main duration you wish to change, by showing each slide every 2 secs here

setTimeout(showSlides, 2000); // Change image every 2 seconds

The css you are referring to, changes the fade duration with the top 2 applying the effect to older  -webkit- version browsers such Chrome, that did not fully support using, note the animation name refers to @keyframes name of 'fade'

animation-name: fade;
animation-duration: 2.5s;

So you should try to keep these identical.

These then trigger the animation keyframes here, again -webkit- version and full support version

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×