Jump to content

CSS animation properties


MARCELO

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
Link to comment
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}
}

 

Link to comment
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
×
×
  • Create New...