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
- ValueError:All arrays must be of the same length - Python
- Check hostname requires server hostname - SOLVED
- How to restrict access to the page Access only for logged user in Django
- Migration admin.0001_initial is applied before its dependency admin.0001_initial on database default
- Add or change a related_name argument to the definition for 'auth.User.groups' or 'DriverUser.groups'. -Django ERROR
- Addition of two numbers in django python
- The request was aborted: Could not create SSL/TLS secure channel -Error in Asp.net
- FieldError: Cannot resolve keyword 'id' into field in Django project
Related Article