How to smoothly transition from one page to the other using HTTP-EQUIV="refresh"-CodePudding

I'm just building a locally hosted website. I will have a number of pages, 1,2,3 etc. And I wanted to create a kind of a slideshow effect by cycling slowly through each page. Using http-equiv="refresh" on each page I can link from page 1 to 2, page 2 to 3, page 3 to 1 etc. Going full screen on the browser creates a lovely slideshow effect of the website.

I'm a low enough level, but I would like to be transition from one page to the other smoothly, either fade in fade out or whatever. Right now it's quite jumpy.

Anyway, is this something I can do using the current meta tag or should I use an alternative method? I would prefer C# over Java if required.

<head>
<META HTTP-EQUIV="refresh" CONTENT="8;URL=/page1">
</head>enter code here

CodePudding user response：

Should be possible like that's:

<html>
  <head>
    <style>
      .container {
        opacity: 0;
        transition: opacity 1s;
      }

      .container-loaded {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div >
      <!-- All the content you want to fade-in here. -->
    </div>
    <script>
      $(document).ready(function() {
        $('.container').addClass('container-loaded');
      });
    </script>
  </body>
</html>

CodePudding user response：

Thanks to @d4rk_Devs answer for giving me inspiration. I went on a rambling foray through google and stackoverflow and came up with the following code which worked perfectly.

<iframe src="..." 
onload="this.style.opacity = '1';"
style=" opacity: 0;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: ease-in-out;"  
></iframe>

can be seen here Original Code