关于screen-2__point的问题

关于screen-2__point的问题

.screen-2__point{

transition:all 1s 1s;

}

screen-2__point设置了延迟，但为什么当最开始初始化为init的时候没有延迟，是跟图片一起消失的呢？而出现的时候却延迟了！不应该都延迟吗？
慕粉4161608 2017-02-11
源自：H5+CSS3+JS实现炫酷网页   4-4 网页动态效果（上）
129
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

6回答
银白色暴风雪 2017-02-16 21:24:44

index.js:

//获取元素
var getElem = function(selector){
	return document.querySelector(selector);
}
var getAllElem = function(selector){
	return document.querySelectorAll(selector);
}
//获取元素样式
var getCls = function( element ){
	return element.getAttribute("class");
}
//设置元素样式
var setCls = function(element,cls){
	return element.setAttribute("class",cls);
}
//为元素添加样式
var addCls = function(element,cls){
	var baseCls = getCls(element);
	if(baseCls.indexOf(cls) === -1){
		setCls(element,baseCls + " " +cls);
	}
}
//为元素删除样式
var delCls = function(element,cls){
	var baseCls = getCls(element);
	if(baseCls.indexOf(cls) !== -1){
		setCls(element,baseCls.split(cls).join(" ").replace(/\s+/g," "));
	}
}
//第一步：初始化样式  init
var screenAnimateElements = {
	".screen-1" : [
	".screen-1__heading",
	".screen-1__phone",
	".screen-1__shadow"
	],
	".screen-2" : [
	".screen-2__heading",
	".screen-2__phone",
	".screen-2__subheading",
	".screen-2__point",
	".screen-2__point_i_1",
	".screen-2__point_i_2",
	".screen-2__point_i_3"
	],
	".screen-3" : [
	".screen-3__heading",
	".screen-3__phone",
	".screen-3__subheading",
	".screen-3__features"
	],
	".screen-4" : [
	".screen-4__heading",
	".screen-4__subheading",
	".screen-4__type-item_i_1",
	".screen-4__type-item_i_2",
	".screen-4__type-item_i_3",
	".screen-4__type-item_i_4"
	],
	".screen-5" : [
	".screen-5__heading",
	".screen-5__bg",
	".screen-5__subheading"
	]
}
//设置屏内元素为初始状态
var setScreenAnimateInit = function(screenCls){
	var screen = document.querySelector(screenCls);//获取当前屏的元素
	var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
	for(var i=0;i<animateElements.length;i++){
		var element = document.querySelector(animateElements[i]);
		var baseCls = element.getAttribute("class");
		element.setAttribute("class",baseCls + " " + animateElements[i].substr(1) + "_animate_init");
	}
}
//设置播放屏内的元素动画
var playScreenAnimateDone = function(screenCls){
	var screen = document.querySelector(screenCls);//获取当前屏的元素
	var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
 	for(var i=0;i<animateElements.length;i++){
	 	var element = document.querySelector(animateElements[i]);
	 	var baseCls = element.getAttribute("class");
	 	element.setAttribute("class",baseCls.replace("_animate_init","_animate_done"));
 	}
}
window.onload = function(){
	for(k in screenAnimateElements){
		if(k===".screen-1")continue;
	setScreenAnimateInit(k);
	}
}
//第二步：滚动到那里，就播放到哪里
var navItems = getAllElem(".header__nav-item");
var outLineItems = getAllElem(".outline__item");
var switchNavItemsActive = function(idx){
	for(var i=0;i<navItems.length;i++){
		delCls(navItems[i],"header__nav-item_status_active");
	}
	addCls(navItems[idx],"header__nav-item_status_active");
	for(var i=0;i<outLineItems.length;i++){
		delCls(outLineItems[i],"outline__item_status_active");
	}
	addCls(outLineItems[idx],"outline__item_status_active");
}
switchNavItemsActive(0);
window.onscroll = function(){
	var top = document.body.scrollTop;
	console.log(top);
	
	if(top>80){
		addCls( getElem(".header") , "header_status_black" );
		addCls(getElem(".outline"),"outline_status_in");
	}else{
		delCls(getElem("header"),"header_status_black");
		delCls(getElem(".outline"),"outline_status_in");
		switchNavItemsActive(0);		
	}
	if(top>1){
		playScreenAnimateDone(".screen-1");
	}
	if(top>800*1-100){
		playScreenAnimateDone(".screen-2");
		switchNavItemsActive(1);
	}
	if(top>800*2-100){
		playScreenAnimateDone(".screen-3");
		switchNavItemsActive(2);
	}
	if(top>800*3-100){
		playScreenAnimateDone(".screen-4");
		switchNavItemsActive(3);
	}
	if(top>800*4-100){
		playScreenAnimateDone(".screen-5");
		switchNavItemsActive(4);
	}
}
//第三步双向定位
var setNavJump = function(i,lib){
	var item = lib[i];
	item.onclick = function(){
		document.body.scrollTop = i*800;
	}
}
for(var i=0;i<navItems.length;i++){
	setNavJump(i,navItems);
}
for(var i=0;i<outLineItems.length;i++){
	setNavJump(i,outLineItems);
}
//第四步：滑动门特效
var navTip = getElem(".header__nav-tip");
var setTip = function(idx,lib){
	lib[idx].onmouseover = function(){
		navTip.style.left = (idx*70)+"px";
	}
	var activeIdx = 0;
	lib[idx].onmouseout = function(){
		for(var i=0;i<lib.length-1;i++){
			if(getCls(lib[i]).indexOf("header__nav-item_status_active") > -1){
				activeIdx = i;
				break;
			}
		}navTip.style.left = (activeIdx*70)+"px";
	}	
}
for(var i=0;i<navItems.length-1;i++){
	setTip(i,navItems);
}
setTimeout(function(){
	playScreenAnimateDone(".screen-1");
},300)


0
收起回答
银白色暴风雪 2017-02-16 21:24:02

animate.css:

/*第一屏动画*/
.screen-1__heading,
.screen-1__phone,
.screen-1__shadow{
	transition: all 1s;
}
.screen-1__heading_animate_done,
.screen-1__phone_animate_done,
.screen-1__shadow_animate_done{
	opacity: 1;
	translate(0,0);
}
.screen-1__heading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-1__phone_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-1__shadow_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
/*第二屏动画*/
.screen-2__heading,
.screen-2__phone,
.screen-2__subheading{
	transition: all 1s;
}
.screen-2__point_done,
.screen-2__heading_animate_done,
.screen-2__phone_animate_done,
.screen-2__point_animate_done,
.screen-2__subheading_animate_done{
	opacity: 1;
	translate(0,0);
}
.screen-2__point{
	transition: all 1s .5s;
}
.screen-2__heading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-2__subheading_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-2__phone_animate_init{
	opacity: 0;
	transform: translate(0,50%);
}
.screen-2__point_i_1_animate_init{
	opacity: 0;
	transform: translate(-100%,0);
}
.screen-2__point_i_2_animate_init{
	opacity: 0;
	transform: translate(100%,0);
}
.screen-2__point_i_3_animate_init{
	opacity: 0;
	transform: translate(100%,0);
}
/*第三屏动画*/
.screen-3__heading,
.screen-3__phone,
.screen-3__subheading,
.screen-3__features{
	transition: all 1s;
}
.screen-3__features_animate_done{
	transform: scale(1);
}
.screen-3__heading_animate_done,
.screen-3__phone_animate_done,
.screen-3__subheading_animate_done{
	opacity: 1;
	translate(0,0);
}
.screen-3__heading_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-3__subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-3__phone_animate_init{
	opacity: 0;
	transform: translate(0,50%);
}
.screen-3__features_animate_init{
	opacity: 0;
	transform: scale(.5);
}
.screen-3__features__item{
	transition: all .5s;
}
.screen-3__features__item:hover{
	cursor: pointer;
	transform: scale(1.1);
	border-color: #fff;
}
/*第四屏动画*/
.screen-4__heading,
.screen-4__subheading{
	transition: all 1s;
}
.screen-4__type-item_i_1{
	transition: all 1s .3s;
}
.screen-4__type-item_i_2{
	transition: all 1s .6s;
}
.screen-4__type-item_i_3{
	transition: all 1s .9s;
}
.screen-4__type-item_i_4{
	transition: all 1s 1.2s;
}
.screen-4__type-item_i_1_animate_done,
.screen-4__type-item_i_2_animate_done,
.screen-4__type-item_i_3_animate_done,
.screen-4__type-item_i_4_animate_done{
	opacity: 1;
}
.screen-4__heading_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-4__subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-4__type-item_i_1_animate_init,
.screen-4__type-item_i_2_animate_init,
.screen-4__type-item_i_3_animate_init,
.screen-4__type-item_i_4_animate_init{
	opacity: 0;
}
/*第五屏动画*/
.screen-5__heading,
.screen-5__bg,
.screen-5__subheading{
	transition: all 1s;
}
.screen-5__heading_animate_done,
.screen-5__bg_animate_done,
.screen-5__subheading_animate_done{
	opacity: 1;
	translate(0,0);
}
.screen-5__heading_animate_init{
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-5__subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-5__bg_animate_init{
	opacity: 0;
	transform: translate(0,50%);
}
/*定义帧动画*/
@-webkit-keyframes bounce{
	0%{
		transform: scale(0);
	}
	50%{
		transform: scale(1);
	}
	100%{
		transform: scale(1);
	}
}
/*使用帧动画*/
.screen-2__point:before,
.screen-2__point:after{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 1px;
	left: 0;
	background-color: rgba(255,0,0,.4);
	-webkit-animation: bounce 2s infinite;
	border-radius: 50%;
}
.screen-2__point:before{
	-webkit-animation: bounce 2s infinite 1s;
}
.screen-2__point_i_1:before,
.screen-2__point_i_1:after{
	left: 200px;
}
/*导航条 _status_back 样式*/
.header{
	transition: all 1s;
}
.header_status_black{
	background-color: rgba(0,0,0,.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
}
.header_status_black .header__logo,
.header_status_black .header__nav-item{
	color: #fff;
}
.header_status_black .header__nav-item_status_active{
	color: red;
}
/*大纲 _status_in 样式*/
.outline{
	transition: all 1s;
	transform: translate(100%,0);
}
.outline_status_in{
	opacity: 1;
	transform: translate(0,0);
}


0
收起回答
银白色暴风雪 2017-02-16 21:23:16

index.css:

/*BEM设计模式
模块（没有前缀，多个单词用 - 连接）
元素（元素在模块之后，可以有多个层级，以 __ 连接）
修饰（某元素，或者某模块特别的状态，必须有一个状态名和状态值，使用 _ 连接）
*/
/*header*/
.header {
    background-color: #f7f7f7;
    margin: 0 auto;
}
.header__wrap {
    height: 80px;
    width: 1200px;
    position: relative;
    margin: 0 auto;
}
.header__logo {
    width: 150px;
    height: 38px;
    font-size: 20px;
    line-height: 38px;
    color: #07111b;
    text-indent: 50px;
    background: url(../img/logo.png) left center no-repeat;
    background-size: 38px 38px;
    position: absolute;
    top: 50%;
    margin-top: -19px;
    left: 20px;
}
.header__nav {
    position: absolute;
    right: 20px;
    height: 38px;
    top: 50%;
    margin-top: -19px;
}
.header__nav-item {
    color: #292f35;
    font-size: 14px;
    display: block;
    height: 38px;
    line-height: 38px;
    float: left;
    width: 30px;
    padding-left: 40px;
    text-align: center;
    position: relative;
}
.header__nav-item:hover {
    color: #f01400;
}
.header__nav-item_status_active {
    color: #f01400;
}
.header__nav-item_status_active::after {
    /*content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #f01400;*/
}
.header__nav-item_custom_button {
    background: #000;
    color: #f4f4f5;
    width: 90px;
    border-radius: 3px;
    padding: 0;
    margin-left: 40px;
}
/*第一屏*/
.screen-1 {
    height: 800px;
    background: #e7e7e7;
    position: relative;
    overflow: hidden;
    background: url(../img/bg-screen-1.png) no-repeat center;
    background-size: cover;
}
.screen-1__heading {
    font-weight: normal;
    margin: 0;
    padding: 0;
    font-size: 46px;
    line-height: 46px;
    color: #4d555d;
    text-align: center;
    padding-top: 152px;
}
.screen-1__heading b {
    color: #f01400;
    font-weight: normal;
}
.screen-1__phone {
    width: 1375px;
    height: 305px;
    background: url(../img/screen-1-phone.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -687px;
    bottom: 180px;
    z-index: 2;
}
.screen-1__shadow {
    width: 1233px;
    height: 411px;
    background: url(../img/screen-1-shadow.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -616px;
    bottom: 30px;
    z-index: 1;
    opacity: .8;
}
/*第二屏*/
.screen-2 {
    background-color: #fafafa;
    height: 800px;
    position: relative;
    overflow: hidden;
}
.screen-2__heading {
    font-size: 46px;
    line-height: 46px;
    color: #f01400;
    text-align: center;
    padding-top: 96px;
}
.screen-2__subheading {
    font-size: 14px;
    color: #2c3137;
    text-align: center;
    padding-top: 25px;
    line-height: 28px;
}
.screen-2__phone {
    width: 928px;
    height: 873px;
    background: url(../img/bg-screen-2.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -464px;
    bottom: -345px;
    z-index: 2;
}
.screen-2__point {
    position: absolute;
    width: 108px;
    height: 22px;
    padding-right: 112px;
    font-size: 22px;
    line-height: 22px;
    color: #4d555d;
    background: url(../img/icon-point-right.png) no-repeat center right;
}
.screen-2__point_custon_right {
    padding: 0 0 0 112px;
    background: url(../img/icon-point-left.png) no-repeat center left;
}
.screen-2__point_i_1 {
    top: 150px;
    left: -164px;
}
.screen-2__point_i_2 {
    top: 30px;
    right: 130px;
}
.screen-2__point_i_3 {
    top: 330px;
    right: 30px;
}
/*第三屏*/
.screen-3 {
    background-color: red;
    height: 800px;
    position: relative;
    overflow: hidden;
    /*background: url(../img/bg-screen-3.png) no-repeat center;
	background-size: cover;*/
}
.screen-3__wrap {
    width: 1200px;
    height: auto;
    margin: 0 auto;
    position: relative;
}
.screen-3__heading {
    font-size: 46px;
    line-height: 46px;
    color: #ffffff;
    text-align: left;
    padding-top: 94px;
}
.screen-3__subheading {
    font-size: 14px;
    color: #ffffff;
    text-align: left;
    padding-top: 25px;
    line-height: 28px;
}
.screen-3__phone {
    width: 750px;
    height: 873px;
    background: url(../img/bg-screen-3.png) no-repeat top;
    position: absolute;
    right: 0;
    top: 195px;
    z-index: 2;
}
.screen-3__features {
    position: absolute;
    top: 395px;
    left: 0;
    width: 320px;
    height: 280px;
}
.screen-3__features__item {
    width: 138px;
    height: 118px;
    border: 1px solid #cb7173;
    margin: 0 20px 20px 0;
    float: left;
    border-radius: 3px;
    color: #fff;
    text-align: center;
}
.screen-3__features__item__number {
    height: 36px;
    font-size: 36px;
    line-height: 36px;
    padding: 28px 0 8px;
}
.screen-3__features__item__desc {
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}
/*第四屏动画*/
.screen-4 {
    height: 800px;
    background: #fff;
    text-align: center;
}
.screen-4__wrap {
    max-width: 1200px;
    min-width: 800px;
    margin: 0px auto;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.screen-4__heading {
    position: absolute;
    top: 80px;
    width: 100%;
    font-size: 42px;
    color: #f01414;
}
.screen-4__subheading {
    position: absolute;
    top: 180px;
    width: 100%;
    font-size: 16px;
}
.screen-4__type {
    width: 1300px;
    margin-left: 30px;
    height: 270px;
    bottom: 220px;
    position: absolute;
    font-size: 16px;
    text-align: center;
}
.screen-4__type-item {
    width: 220px;
    height: 270px;
    float: left;
    margin-right: 90px;
    position: relative;
}
.screen-4__type-item-name {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 300px;
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    color: #2c3238;
}
.screen-4__type-item-storage {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 328px;
    font-size: 9px;
    height: 9px;
    line-height: 9px;
    color: #93999f;
}
.screen-4__type .photo {
    width: 240px;
    height: 270px;
    position: absolute;
    left: 0;
    top: 0;
}
.screen-4__type-item_i_1 {
    background: url("../img/phone-1.png") center left no-repeat;
}
.screen-4__type-item_i_2 {
    background: url("../img/phone-2.png") center left no-repeat;
}
.screen-4__type-item_i_3 {
    background: url("../img/phone-3.png") center left no-repeat;
}
.screen-4__type-item_i_4 {
    background: url("../img/phone-4.png") center left no-repeat;
}
/*第五屏*/
.screen-5 {
    height: 700px;
    background-color: #d9dde1;
    position: relative;
    overflow: hidden;
}
.screen-5__bg {
    width: 1920px;
    height: 443px;
    background: url(../img/bg-screen-5.png) no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: -100px;
    left: 50%;
    margin-left: -960px;
}
.screen-5__heading {
    font-size: 46px;
    line-height: 46px;
    color: #f01400;
    text-align: center;
    padding-top: 130px;
}
.screen-5__subheading {
    font-size: 14px;
    color: #2c3137;
    text-align: center;
    padding-top: 25px;
    line-height: 28px;
}
/*立即购买*/
.screen-buy {
    /*height: 320px;*/
    height: 80px;
    padding: 120px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: #2b333b url(../img/bg-screen-buy.png) no-repeat center;
}
.screen-buy__button {
    height: 80px;
    width: 240px;
    text-align: center;
    line-height: 80px;
    font-size: 24px;
    color: #fff;
    background: #f01414;
    display: inline-block;
    border-radius: 3px;
    transition: all .5s;
}
.screen-buy__button:hover {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
}
/*footer*/
.footer {
    height: 80px;
    text-align: center;
    color: #fff;
    background: #07111b;
    font-size: 12px;
    line-height: 80px;
}
.outline{
    position: fixed;
    padding: 5px 10px;
    bottom: 35vh;
    right: 0; 
    z-index: 3;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.outline__item{
    display: block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 5px 0;
    background-color: #fff;
    margin-top: 5px;
    border-top: 1px solid #eee;
    color: #93999f;
}
.outline__item:first-child{
    border: none;
}
.outline__item_status_active{
    color: red;
}
.header__nav-tip{
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #f00;
    bottom: 0;
    left: 0;
    margin-left: 40px;
    transition: all .5s;
}


0
收起回答
银白色暴风雪 2017-02-16 21:22:35

base.css:

body{
	min-width:1200px;
	background: #fff;
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: 'Microsoft Yahei',微软雅黑;
}
a{
	text-decoration: none;
}
h2,h3{
	margin: 0;
	padding: 0;
	font-weight: normal;
}


0
收起回答
银白色暴风雪 2017-02-16 21:21:56

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
    <header>
        <div>
            <div>慕课手机</div>
            <nav>
                <a href="javascript:void(0)">首页</a>
                <a href="javascript:void(0)">外观</a>
                <a href="javascript:void(0)">配置</a>
                <a href="javascript:void(0)">型号</a>
                <a href="javascript:void(0)">说明</a>
                <a href="javascript:void(0)" class="header__nav-item header__nav-item_custom_button">立即购买</a>
                <div></div>
            </nav>
        </div>
    </header>
    <div>
        <h2 class="screen-1__heading screen-1__heading_animate_init"><b>慕课手机</b>让你的生活更精彩</h2>
        <div class="screen-1__phone screen-1__phone_animate_init"></div>
        <div class="screen-1__shadow screen-1__shadow_animate_init"></div>
    </div>
    <div>
        <h2>优美的设计，更令人着迷</h2>
        <h3>采用受欢迎的设计，让他更加出色。<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致</h3>
        <div>
            <div class="screen-2__point screen-2__point_i_1">高清摄像</div>
            <div class="screen-2__point screen-2__point_custon_right screen-2__point_i_2">超薄机身</div>
            <div class="screen-2__point screen-2__point_custon_right screen-2__point_i_3">大屏显示</div>
        </div>
    </div>
    <div>
        <div>
            <h2>外形小巧，功能强大的手机</h2>
            <h3>采用受欢迎的设计，让它更加出色。<br></h3>
            <div></div>
            <div>
                <div>
                    <div>5.7</div>
                    <div>英寸大屏</div>
                </div>
                <div>
                    <div>1200</div>
                    <div>万像素</div>
                </div>
                <div>
                    <div>3D</div>
                    <div>touch</div>
                </div>
                <div>
                    <div>A9</div>
                    <div>处理器</div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <h2>丰富的手机型号</h2>
            <h3>找到适合你的手机<br></h3>
            <div>
                <div>
                    <div class="photo screen-4__type-item_i_1">
                        <div>慕课红</div>
                        <div>16G/32G/64G</div>
                    </div>
                </div>
                <div>
                    <div class="photo screen-4__type-item_i_2">
                        <div>慕课红</div>
                        <div>16G/32G/64G</div>
                    </div>
                </div>
                <div>
                    <div class="photo screen-4__type-item_i_3">
                        <div>慕课红</div>
                        <div>16G/32G/64G</div>
                    </div>
                </div>
                <div>
                    <div class="photo screen-4__type-item_i_4">
                        <div>慕课红</div>
                        <div>16G/32G/64G</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <h2>外形小巧，功能强大的手机</h2>
        <h3>采用受欢迎的设计，让它更加出色。<br></h3>
        <div></div>
    </div>
    <div>
        <a href="#">立即购买</a>
    </div>
    <footer>© 2017 imooc.com 京ICP备 13046642号-2</footer>
    <div>
        <a href="javascript:void(0)">首页</a>
        <a href="javascript:void(0)">外观</a>
        <a href="javascript:void(0)">配置</a>
        <a href="javascript:void(0)">型号</a>
        <a href="javascript:void(0)">说明</a>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>


0
收起回答
樱桃小胖子 2017-02-12 15:24:57

用来指定一个动画开始执行的时间用transition-delay，也就是说当改变元素属性值后多长时间开始执行。

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。

例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}祝学习愉快~



0
收起回答
  • 提问者 慕粉4161608 #1
    不是，我是说我设置了所有变化延迟1s，但是图片出现的时候延迟了，消失的时候却没有延迟是为什么？安理所不应该都延迟1s吗？
    2017-02-13 22:41:22
  • 樱桃小胖子 回复 提问者 慕粉4161608 #2
    建议你把全部代码贴过来，以便于更好的为您解答
    2017-02-14 10:11:09
  • 银白色暴风雪 回复 樱桃小胖子 #3
    代码贴出来了。
    2017-02-16 21:26:25
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师，我的问题是本节老师演示的宣传页项目的第二屏动画。
9 0 3
关于screen
14 0 5
老师，不太懂这里的定位，麻烦解释下
16 0 3
self.screen=screen有什么意义？等号右边的creen又等于什么？
22 0 5
.screen-2__point:before和after的定位
7 0 1

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师