An Automatic Slideshow

The code on this page was taken from the example on the W3C Schools website

Code analysis

There a few things that I need to look at here. There are some -webkit stuff in the css and some animation gong on.

The images need to be the same aspect ratio or this text will jump around the screen if the bottom menu item is selected.

-webkit-animation-duration: 1.5s;

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

Links

• A manual Slideshow
• Index 2020
• Webkit - Browser Rendering Engine and animation
• What form to save images
• Development of a fully controlled gallery

External Sources

• Automatic Slideshow - 🔗 - W3C site
• CSS Amimations - 🔗
• CSS animation-duration Property 🔗