sarpay
4/10/2015 - 10:43 PM

[css] Add transition effect to divs

[css] Add transition effect to divs

Add transition effect to div.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">

<head>
    <style type="text/css">
	    div.opacitytrans {
	    	opacity: 0;
	        transition: opacity 1s ease-in-out;
	        -moz-transition: opacity 1s ease-in-out;
	        -o-transition: opacity 1s ease-in-out;
	        -webkit-transition: opacity 1s ease-in-out;
	    }
	    
	    div.bgtrans {
	    	background-color: #ffffff;
	        transition: background-color 1s linear;
	        -moz-transition: background-color 1s linear;
	        -o-transition: background-color 1s linear;
	        -webkit-transition: background-color 1s linear;
	    }
	    
	    div.bganimated {
	        background-color: #EEEFE7;
	    }
	    
	    div.opacityanimated {
	        opacity: 1;
	    }
    </style>
    <script type="text/javascript" src="js/lib/jquery-1.11.2.min.js"></script>
</head>

<body>
    <div>
        <!-- CE -->
        <div class="opacitytrans">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum v Lorem ipsum.
        </div>
        <!-- GOST -->
        <div class="bgtrans">
            Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum v Lorem ipsum.
        </div>
    </div>
    <script type="text/javascript">
    	$(document).ready(function() {
    		setTimeout(function() {
    			$('.bgtrans').addClass('bganimated');
    			$('.opacitytrans').addClass('opacityanimated');
    		}, 300);
    	});
    </script>
</body>

</html>