Css

Page loading effects in Css

By: Mohamed Rasik | Feb,13 2017 | Css , Html

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>