MARCELO Posted March 7, 2018 Share Posted March 7, 2018 (edited) 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 March 7, 2018 by MARCELO Link to comment Share on other sites More sharing options...
dsonesuk Posted March 7, 2018 Share Posted March 7, 2018 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? Link to comment Share on other sites More sharing options...
MARCELO Posted March 8, 2018 Author Share Posted March 8, 2018 https://www.w3schools.com/code/tryit.asp?filename=FP6WCRLOZKXH I would like to know why i cant specify the duration by changing: /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 2.5s; } Link to comment Share on other sites More sharing options...
dsonesuk Posted March 8, 2018 Share Posted March 8, 2018 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now