Simple CSS Slideshow Using Animations

hi everybody so the basic idea of making a slideshow in css is using the animation property of an element we are going to have four frames the first and the last are going to be the same so there is no shampoo between them you can add as much frames as you want but we need to divide the time with percentages so first we're going to start with the default.html we link the css file to the index file and we make a div with a class in this case we call slideshowcdn for container awesome we style the body with margin 0 we make it flex and we center the content with shotify content for the horizontal axis and align content center for the vertical alright now for the slideshow container we make it a square of 500 by 500 pixels and we assign the slideshow animation to the animation property we make it a duration of 30 seconds the iteration count infinite this is the number of times the animation repeats and the transition for all properties of 500 milliseconds of duration async for the function and 200 milliseconds of the day great now we see the keyframes of the animation so the from and two frames are going to be the same and then we can change the other two with other images we can add more frame between but we need to calculate the percentages in this case we're going to go for three because it's a more easy way all right and that's it for this quick tutorial on how to make a slideshow with proof css hope you like it if you find the content useful consider subscribing give it a like if you have any questions please comment below and that's it for me i see you in the next one bye you

Channel: RamgenDeploy

Views: 10

Keywords: CSS, html, programming, javascript, web design, web dev, web dev simplified, web development, image slideshow, tutorial

Id: XkgWbyRJvPg

Length: 1min 30sec (90 seconds)

Published: Wed Feb 03 2021