使用 css 自动重定向带有转换的页面

Question

用户查看首页时，5s后自动跳转至另一页。我想在跳转到另一个页面时添加淡入淡出的过渡。是否可以使用 css 来实现？

这是我找到的代码，但是在转到另一页时没有转换。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vert Residence</title>
<link href="css/main.css" rel="stylesheet" type="text/css">


<meta name="language" content="en" />
<meta content='width=device-width, initial-scale=1.0' name='viewport' />
<!---<meta http-equiv="refresh" content="5;URL=vert-residence.html">--->

<link rel="stylesheet" href="css/jquery.maximage.css?v=1.2" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../lib/css/screen.css?v=1.2" type="text/css" media="screen" charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style type="text/css">
.logo-index {
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 5s;
}


@-webkit-keyframes example {
0% {
opacity: 100;
filter: alpha(opacity=1000);
/* For IE8 and earlier */
}

100% {
opacity: 0.0;
filter: alpha(opacity=0);
/* For IE8 and earlier */
}
}


/* Standard syntax */
@keyframes example {
0% {
opacity: 100;
filter: alpha(opacity=1000);
/* For IE8 and earlier */
}

100% {
    opacity: 0.0;
    filter: alpha(opacity=0);
/* For IE8 and earlier */
}
}

</style>
</head>

<body>
<script>
setTimeout(function() {
  window.location.href = "aboutus.html";
}, 2000);
</script>



<div class="logo-index">
    <a href="aboutus.html"><img src="img/logo-index.png"></a>
</div>
</body>
</html>

当用户等待5s后会自动转到aboutus.html

Answer 1

您将需要做一些调整，但您可以使用 CSS 过渡。您必须将它应用到整个页面并淡出所有内容。

html {
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

JSFiddle Example

Answer 2

setTimeout(function() {
  window.location.href = "/NewPage.aspx";
}, 2000);

.wrapper {


  background-color: red;


  width: 100%;


  -webkit-animation-name: example;


  /* Chrome, Safari, Opera */


  -webkit-animation-duration: 2s;


  /* Chrome, Safari, Opera */


  animation-name: example;


  animation-duration: 2s;


}


@-webkit-keyframes example {


  0% {


    opacity: 100;


    filter: alpha(opacity=1000);


    /* For IE8 and earlier */


  }


  100% {


    opacity: 0.0;


    filter: alpha(opacity=0);


    /* For IE8 and earlier */


  }


}


/* Standard syntax */


@keyframes example {


  0% {


    opacity: 100;


    filter: alpha(opacity=1000);


    /* For IE8 and earlier */


  }


  100% {


    opacity: 0.0;


    filter: alpha(opacity=0);


    /* For IE8 and earlier */


  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='wrapper'>
  <div>Home Page</div>
</div>

使用 css 自动重定向带有转换的页面

automatically redirect a page with transition using css

html

css

redirect

transition