引导页过渡动画

<div class="yd active1">
    <div class="logoc"><img src="/templates/main/images/logoc3.png"></div>
    <div class="yindao"></div>
    <p class="ac">始于2001</p>
    <div class="imga">
        <img src="/templates/main/images/slogn.png">
    </div>
</div>

.yd {
	width: 100%;
	height: 100vh;
	background: url(/templates/main/images/yindao.jpg) no-repeat;
	background-size: cover
}

.ac {
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #fff;
	position: absolute;
	height: 14px;
	top: 50%;
	margin-top: 60px;
	-webkit-filter: grayscale(1);
	filter: gray;
	filter: grayscale(1);
	-webkit-transition: all 3s ease-in 1s;
	transition: all 3s ease-in 1s;
	opacity: 0
}

.active1 .ac {
	-webkit-filter: grayscale(0);
	filter: gray;
	filter: grayscale(0);
	opacity: 1
}

.imga {
	width: 246px;
	height: 100px;
	position: absolute;
	right: 100px;
	bottom: 80px;
	-webkit-filter: grayscale(1);
	filter: gray;
	filter: grayscale(1);
	-webkit-transition: all 3s ease-in 1s;
	transition: all 3s ease-in 1s;
	opacity: 0
}

.imga img {
	display: block;
	width: 100%
}

.active1 .imga {
	-webkit-filter: grayscale(0);
	filter: gray;
	filter: grayscale(0);
	opacity: 1
}

.yindao {
	width: 0%;
	height: 14px;
	background: url(/templates/main/images/yindao-bg.png) repeat;
	position: absolute;
	top: 50%;
	margin-top: 10px;
	left: 50%;
	margin-left: -479px;
	-webkit-transition: all 3s ease-in 1s;
	transition: all 3s ease-in 1s
}

.active1 .yindao {
	width: 958px
}

.logoc {
	width: 392px;
	height: 43px;
	position: absolute;
	top: 50%;
	margin-top: -60px;
	left: 50%;
	margin-left: -196px;
	-webkit-transition: all 1s ease-in 1s;
	transition: all 1s ease-in 1s
}

.logoc img {
	display: block;
	width: 100%;
	-webkit-filter: grayscale(1);
	filter: gray;
	filter: grayscale(1);
	-webkit-transition: all 3s ease-in 1s;
	transition: all 3s ease-in 1s;
	opacity: 0
}

.active1 .logoc img {
	-webkit-filter: grayscale(0);
	filter: gray;
	filter: grayscale(0);
	opacity: 1
}

@media (max-width:768px) {
	.yd {
		background: url(/templates/main/images/yindao1.jpg) no-repeat
	}

	.logoc {
		width: 196px;
		height: 22px;
		margin-left: -98px;
		top: 50%;
		margin-top: -80px
	}

	.ac {
		margin-top: -20px
	}

	.yindao {
		margin-top: -50px
	}

	.imga {
		width: 123px;
		right: 50%;
		margin-right: -62px;
		bottom: 40px
	}
}

 $(document).ready(function() {
        $(".yd").addClass("active1")
    });
    $(document).ready(function(){
        window.setTimeout(function() {
            location.href = "/index.html";
        }, 4000);
    });