In this article I will show you web page load css animation transition effects. The Css animation transition fadeIn effect for 1 Sec also opacity of the page changes from 0 to 1. The keyframe fadein effects set for the major web browser’s such as google,Safari, Firefox etc..
If we make page with such animation transition effects, when a user visits our website while loading the page may feel better.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
-webkit-animation: fadeIn 1s 1; /* Safari 4+ */
-moz-animation: fadeIn 1s 1; /* Fx 5+ */
-o-animation: fadeIn 1s 1; /* Opera 12+ */
animation: fadeIn 1s 1; /* IE 10+, Fx 29+ */
}
h1 {
font-size: 2em;
margin-top: 2em auto;
color: #0094ff;
text-align: center;
text-transform: uppercase;
}
p {
font-style: italic;
}
@-webkit-keyframes fadeIn {
0%; {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<h1>html page transition effects</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nulla sed risus consectetur, hendrerit enim at, bibendum lectus. Duis sit ameteros nibh. Sed sed dignissim libero. </p>
<p>
Sed sed dignissim libero. Aliquam vitaeante ac est dignissim bibendum. Praesent gravida laoreet lorem, sit ametfringilla ipsum faucibus at. Mauris lobortis quam a risus venenatis, in euismodaugue mollis.
</p>
</body>
</html>
Post your comments / questions
Recent Article
- Fix-Gradient effect turning to gray in after effects
- How to blur an image in python?
- ModuleNotFoundError: No module named 'whois' in Python GoviralHost Without Terminal
- How to Convert Image to Pencil Sketch in Python?
- AttributeError: module 'urllib' has no attribute 'request' - Python
- How to Extract audio from video files using python?
- PermissionError: [Errno 13] Permission denied: 'shampoo_sales.csv' - Python
- [WinError 145] The directory is not empty: 'FolderPath' - Python
Related Article