How to make a fade out animation in CSS

JMBad

New Member

Join Date: Jul 2013
Posts: 1

How to make a fade out animation in CSS

Jul 17 '13, 08:12 AM

Hi there,

I'm trying to do a fade out transition in CSS so that a large image of a typewriter will be the first thing people see when they open my website, and will then fade automatically after 3 seconds to reveal the home page content. Any thoughts?Here's the code I think I need to use, but not sure where to put it:

Code:

<img src="http://bytes.com/trans type.png" alt="" width="800" height="600" class="fade" />

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0;
      }

and here's the existing code for the website:

/* Resets
--------------------------------------------------------------------------------*/

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, 
fieldset, input {
	margin: 0;
	padding: 0;
}

a img {
	border: 0;
}

a {
	text-decoration: none;
}

/* General Styling and Structure
--------------------------------------------------------------------------------*/

body {
	font-family: 'Quattrocento', serif;
	font-size: 14px;
	color: #3e3e3e;
	background:url(footer-bg.png) repeat;
}

.container {
	margin: 0 auto;
	width: 960px;
}

#header-wrap,
#banner-wrap,
#nav-wrap,
#main-wrap,
#footer-wrap
{
    width:100%;
	min-width:960px;
	background:#fff;
}

p a, #nav-wrap a, h2 a {
	color: #000;
	border-bottom:1px dashed #000;
}

a:hover {
	border-bottom:none;
}

blockquote {
	font-style:italic;
	border-left:4px solid #ddd;
	margin:10px 0 10px 0;
	padding-left:20px;
	line-height:1.5;
	color:#888;
}

.wsite-multicol-table-wrap {margin:0 !important;}

h2 {
	font-size: 24px;
	padding: .5em 0 .2em 0;
	line-height: 1.2;
	font-weight: normal;
	color: #000;
}

p {
	line-height: 1.5;
	padding: .5em 0;
}

div#content {min-height:400px;}

/* Header
--------------------------------------------------------------------------------*/

#header-wrap {
	padding:50px 0px 5px;
}

#logo,
#logo a {
	color:#000;
	font-size:30px;
	border:none;
}

#header, #nav-table {
	border-collapse: collapse;
	border-spacing: 0;
    width:100%;
}

#header td {
	vertical-align: middle;
	text-align: left;
}

.header-right table {
	float: right;
	width: 1px;
}

.header-right td {
	padding: 0;
}

/* Header: Phone Number
--------------------------------------------------------------------------------*/

.header-right .phone-number .wsite-text {
	display: block;
	white-space: nowrap;
}

/* Header: Social Links
--------------------------------------------------------------------------------*/

.header-right .wsite-social {
	vertical-align: middle;
}

.wsite-social-item {
	width: 28px;
	height: 30px;
	margin: 1px 0 0 4px;
}

.wsite-social-rss {
	background: url(social-icons.png) no-repeat -130px 0px;
}

.wsite-social-rss:hover {
	background-position: -130px -30px;
}

.wsite-social-rss:active {
	background-position: -130px -60px;
}

.wsite-social-linkedin {
	background: url(social-icons.png) no-repeat -65px 0px;
}

.wsite-social-linkedin:hover {
	background-position: -65px -30px;
}

.wsite-social-linkedin:active {
	background-position: -65px -60px;
}

.wsite-social-facebook {
	background: url(social-icons.png) no-repeat 0px 0px;
}

.wsite-social-facebook:hover {
	background-position: 0px -30px;
}

.wsite-social-facebook:active {
	background-position: 0px -60px;
}

.wsite-social-twitter {
	background: url(social-icons.png) no-repeat -32px 0px;
}

.wsite-social-twitter:hover {
	background-position: -32px -30px;
}

.wsite-social-twitter:active {
	background-position: -32px -60px;
}

.wsite-social-mail {
	background: url(social-icons.png) no-repeat -97px 0px;
}

.wsite-social-mail:hover {
	background-position: -97px -30px;
}

.wsite-social-mail:active {
	background-position: -97px -60px;
}

.wsite-social-pinterest {
	background: url(social-icons.png) no-repeat -227px 0px;
}

.wsite-social-pinterest:hover {
	background-position: -227px -30px;
}

.wsite-social-pinterest:active {
	background-position: -227px -60px;
}

.wsite-social-youtube {
	background: url(social-icons.png) no-repeat -325px 0px;
}

.wsite-social-youtube:hover {
	background-position: -325px -30px;
}

.wsite-social-youtube:active {
	background-position: -325px -60px;
}

.wsite-social-plus {
	background: url(social-icons.png) no-repeat -195px 0px;
}

.wsite-social-plus:hover {
	background-position: -195px -30px;
}

.wsite-social-plus:active {
	background-position: -195px -60px;
}

.wsite-social-flickr {
	background: url(social-icons.png) no-repeat -162px 0px;
}

.wsite-social-flickr:hover {
	background-position: -162px -30px;
}

.wsite-social-flickr:active {
	background-position: -162px -60px;
}

.wsite-social-vimeo {
	background: url(social-icons.png) no-repeat -260px 0px;
}

.wsite-social-vimeo:hover {
	background-position: -260px -30px;
}

.wsite-social-vimeo:active {
	background-position: -260px -60px;
}

.wsite-social-yahoo {
	background: url(social-icons.png) no-repeat -292px 0px;
}

.wsite-social-yahoo:hover {
	background-position: -292px -30px;
}

.wsite-social-yahoo:active {
	background-position: -292px -60px;
}

/* Header: Search Box
--------------------------------------------------------------------------------*/

.header-right .wsite-search {
	margin-left:10px ;
	vertical-align: middle;
	background:url(search-bg.png) no-repeat top right;
	height:32px;
	width:200px;
}

.header-right .wsite-search-input {
	width: 150px;
	border: none;
	margin:3px;
	background: none;
}

.header-right .wsite-search-button {
	position: relative;
	right:0;
	margin: 8px;
	background: url(search-icon.png) no-repeat;
}

/* Navigation
--------------------------------------------------------------------------------*/

#nav-wrap {
	padding:0px 0px 40px;
}

#nav-wrap .container {
	clear: both;
	overflow: hidden;
	position: relative;
}

#nav-wrap .container ul {
	list-style: none;
}

#nav-wrap .container ul li {
	list-style: none;
	float: left;
	background:url(nav-separator.png) no-repeat right center;
	padding-right:6px;
}

#nav-wrap .container ul > li:first-child a,
#nav-wrap .container ul span:first-child li a {
	padding-left:0px;
}

#nav-wrap .container ul > li:last-child,
#nav-wrap .container ul span:last-child li {
	background:none;
	padding:0px;
}

#nav-wrap .container ul li a {
	display: block;
	padding: 5px 20px;
	border: 0;
	outline: 0;
	list-style-type: none;
}

#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
	border: 0;
	color:#aaa;
}

/* Navigation Submenu's
--------------------------------------------------------------------------------*/

#wsite-menus .wsite-menu li a {
	border: 0;
	background:none;
}

#wsite-menus .wsite-menu li:first-child a:hover {
	border-radius:5px 5px 0 0;
}

#wsite-menus .wsite-menu li:last-child a:hover {
	border-radius:0 0 5px 5px;
}
#wsite-menus .wsite-menu {
	border:1px solid #aaa;
	border-radius:5px;
	background:url(banner-wrapper.png);
}

/* Banner
--------------------------------------------------------------------------------*/

#banner-wrap {
	background:url(banner-wrapper.png);
	border-top:1px dashed #ddd;
	border-bottom:1px dashed #ddd;
}

/* Page type: Tall header
--------------------------------------------------------------------------------*/

.tall-header-page #banner {
	position:relative;
}

.tall-header-page .corner-left {
	background:url(banner-tall-bg-left.png) no-repeat top left;
	position:absolute;
	top:0px;
	left:0px;
	width:37px;
	height:348px;
}

.tall-header-page .corner-right {
	background:url(banner-tall-bg-right.png) no-repeat top left;
	position:absolute;
	top:0px;
	right:0px;
	width:37px;
	height:348px;
}

.tall-header-page .wsite-header {
	width: 960px;
	height: 348px;
	background: url(banner-tall.jpg) no-repeat 0px 0px;
}

/* Page type: Short header
--------------------------------------------------------------------------------*/

.short-header-page #banner {
	position:relative;
}

.short-header-page .corner-left {
	background:url(banner-short-bg-left.png) no-repeat top left;
	position:absolute;
	top:0px;
	left:0px;
	width:9px;
	height:178px;
}

.short-header-page .corner-right {
	background:url(banner-short-bg-right.png) no-repeat top left;
	position:absolute;
	top:0px;
	right:0px;
	width:10px;
	height:178px;
}

.short-header-page .wsite-header {
	width: 960px;
	height: 178px;
	background: url(banner-short.jpg) no-repeat;
}

/* Page type: No header
--------------------------------------------------------------------------------*/

.no-header-page #banner-wrap {
	height:0px;
	border-bottom:none;
}

.no-header-page .wsite-header  {
        display:none;
}

/* Page type: Landing page
--------------------------------------------------------------------------------*/


.landing-page #banner {
	background: none;
	padding: 65px 0px 0px;
	min-height:390px;
}

#bannerleft {
	float: left;
	width: 325px;
}

.landing-page .wsite-header {
	width: 325px;
	height: 324px;
	background: url(banner-landing.jpg) no-repeat;
	border-radius:180px;
	-webkit-box-shadow:  0px 0px 2px 2px rgba(204, 204, 204, 0.2);
    box-shadow:  0px 0px 2px 2px rgba(204, 204, 204, 0.2);
}

.landing-banner-outer {
	display: table;
	#position: relative;
	overflow: hidden;
}

.landing-banner-mid {
	#position: absolute;
	#top: 50%;
	display: table-cell;
	vertical-align: middle;
}

.landing-banner-inner {
	#position: relative;
	#top: -50%;
}

#bannerright {
	float: right;
	padding: 0 80px 0 45px;
    width: 510px;
	height: 324px;
}

#bannerright h2 {
	color: #484747;
	font-size: 36px;
	font-weight:normal;
	margin: 0px;
	padding: 0px;
	line-height: 36px;
}

#bannerright p {
	color: #656565;
	font-size: 14px;
	padding: 20px 0px;
	line-height: 140%;
}

#bannerright .wsite-button {
	margin: 0px;
}

/* Main Content
--------------------------------------------------------------------------------*/



#main-wrap .container {
	padding:30px 0px 50px;
	min-height:400px;
}

#main-wrap .paragraph ul li {
	list-style:circle !important;
}

#main-wrap .container form .wsite-button {
	margin-top:20px;
}

/* Footer
--------------------------------------------------------------------------------*/

#footer-wrap {
	text-align:right;
	color:#cacaca;
	background:url(footer-bg.png) repeat;
}
#footer-wrap .container {
	padding:30px 0px 30px;
}

#footer-wrap h2 {
	color:#fff;
	font-size:19px;
}

#footer-wrap blockquote {
	border-left:4px solid #666;
	color:#888;
}

#footer-wrap p a, .weebly-footer a {
	color: #fff;
	border-bottom:1px dashed #fff;
}

#footer-wrap a {color:#fff;}

#footer-wrap .wsite-form-container {
	text-align:left;
}

/* Form Customization
--------------------------------------------------------------------------------*/

.wsite-form-label {
	display: inline-block;
}

#footer-wrap .wsite-form-container {
	margin-top:0px !important;
}

/* Buttons
--------------------------------------------------------------------------------*/

/* Small structure & regular style */

.wsite-button {
	height: 47px;
	display: inline-block;
	padding: 0px 7px 0px 0px;
	background: url(button.png) no-repeat 100% -141px;
	border:none;
}

.wsite-button:hover {
	background-position: 100% -188px;
}

.wsite-button:active {
	background-position: 100% -235px;
}

.wsite-button-inner {
	color: #808080 !important;
    height: 47px;
	line-height: 47px;
	display: block;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	text-transform:uppercase;
	padding: 0px 23px 0px 30px;
	background: url(button.png) no-repeat 0px 0px;
}

.wsite-button:hover .wsite-button-inner {
	background-position: 0px -47px;
}

.wsite-button:active .wsite-button-inner {
	background-position: 0px -94px;
}

/* Large structure & regular style  */

.wsite-button-large {
	color: #808080 !important;
	height: 60px;
	background: url(button-large.png) no-repeat 100% -180px;
	padding: 0px 7px 0px 0px;
}

.wsite-button-large:hover {
	background-position: 100% -240px;
}

.wsite-button-large:active {
	background-position: 100% -300px;
}

.wsite-button-large .wsite-button-inner {
	height: 60px;
	line-height: 60px;
	padding: 0px 23px 0px 30px;
	background: url(button-large.png) no-repeat 0px 0px;
}

.wsite-button-large:hover .wsite-button-inner {
	background-position: 0px -60px;
}

.wsite-button-large:active .wsite-button-inner {
	background-position: 0px -120px;
}


/* Highlighted styles */

.wsite-button-highlight {
	background-image: url(button-highlight.png);
}

.wsite-button-highlight .wsite-button-inner {
	color:#262626 !important;
	background-image: url(button-highlight.png);
}

.wsite-button-large.wsite-button-highlight {
	background-image: url(button-large-highlight.png);
}

.wsite-button-large.wsite-button-highlight .wsite-button-inner {
	color:#262626 !important;
	background-image: url(button-large-highlight.png);
}

Last edited by Rabbit; Jul 17 '13, 03:24 PM. Reason: Please use code tags when posting code.

Tags: None

shadowstrike

New Member

Join Date: Aug 2013
Posts: 21

Aug 23 '13, 06:08 AM

Hi Please refer my code in order to see the fade in/fade out effect.....

Code:

<html>

<body>

<style type="text/css">
#lightbox {
	display:none;
	background:#000000;
	opacity:0.9;filter:alpha(opacity=90);
	position:absolute;
	top:0px;
	left:0px;
	min-width:100%;
	min-height:100%;
	z-index:1000;
} 

#contact-us-lightbox-panel {
	display:none;
	position:fixed;
	top:100px;
	left:20%;
	margin-left:0px;
	width:900px;
	background:#FFFFFF;
	padding:7px;
	border:2px solid #CCCCCC;
	z-index:1001;
}

#contact-us-lightbox-panel #headerbar-lightbox-panel{
	width: 904px;
}

#contact-us-lightbox-panel #contents_for_address{
	background-color: #a6a6a6;
	width: 904px;
	height: 70px;
	margin-top: 10px;
}

#contact-us-lightbox-panel #contents_for_address #left{
	float: left;
	margin-left: 50px;
	font-family: Helvetica;
	font-size: 14px;
}

#contact-us-lightbox-panel #contents_for_address #left img{
	position: absolute;
	left: 25px;
}

#contact-us-lightbox-panel #contents_for_address #right{
	margin-left: 500px;
	font-family: Helvetica;
	font-size: 14px;
}

#contact-us-lightbox-panel #contents_for_write_to_us{
	margin-top: 10px;
}

#contact-us-lightbox-panel #contents_for_write_to_us textarea{
	width: 880px; 
	height: 150px;
}
 
</style>
<div class="Clickme">ClickMe</div>
<div id="contact-us-lightbox-panel">  
	<div id="headerbar-lightbox-panel"></div>
	<div class="close-panel"><a href="#">X</a></div>
	<div id="contents_for_address">
		<div id="left">
			
			<p>Call Us :</p>
			<p>Office number :0000000</p>
			<p>Toll Free : 0000000</p>
		</div>
		<div id="right">
			<p>Address :</p>
			<p>asdasdsadasd</p>
			<p>dsadasdasdsadas</p>
		</div>
	</div>
	<div id="contents_for_write_to_us">
		<p>Write To Us(Characters 600 Limit)</p>
		<textarea></textarea>
	</div>
	<button class="save-pop">Submit</button>
	<button class="save-pop">Reset</button>
</div>
<div id="lightbox"></div>  

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".Clickme").click(function(){
    $("#lightbox, #contact-us-lightbox-panel").fadeIn(300); 
  });
   $(".close-panel").click(function(){  
    $("#lightbox, #contact-us-lightbox-panel").fadeOut(300);   
  });
     $(".save-pop").click(function(){  
    $("#lightbox, #contact-us-lightbox-panel").fadeOut(300);   
  });
});
	
</script>
</body>

<html>

Make sure you import the jquery library before you run the program......In case if you need any help,please do lemme know

Comment

Previous template Next