控制多个CSS转换的定时/延迟

Question

我在一个有三个div的站点上工作，当我在其中任何一个上悬停时，我希望div在长度上扩展，然后，我希望文本能够改变。

目前，我已经得到了它，这样div扩展了，同时文本也发生了变化。我不知道如何在div完成动画后进行文本更改。我尝试过将这段代码transition: .2s .2s;添加到每个类和id中，但似乎没有什么效果。有什么想法吗？

下面是到页面的链接：http://colorsplash.co.uk/test.html

这是密码：

HTML：

<div class="boxes">
    <div class="box1">
        <div id="create-box" class="about-box"><span class="box-span">Create</span></div>
    </div>
    <div class="box2">
        <div id="produce-box" class="about-box"><span class="box-span">Produce</span></div>
    </div>
    <div class="box3">
        <div id="collab-box" class="about-box"><span class="box-span">Collaborate</span></div>
    </div>
</div>

CSS：

.boxes{
   padding-top: 50px;
   text-align: center;
   font-family: Arial;
}
.about-box{
   height: 20px;
   display: inline-block;
   width: 150px;
   padding: 20px;
   color: white;
   background-color: black;
   margin: 10px 10px 0 10px;
   -o-transition:.2s;
   -ms-transition:.2s;
   -moz-transition:.2s;
   -webkit-transition:.2s;
   transition:.2s;
}
.about-box:hover{
   width: 300px;
}
.box1,.box2,.box3{
   display: inline;
}
.box1:hover #create-box span{
   display: none;
}
.box1:hover #create-box:after{
   content: 'Create visual designs & interactive media';
}
.box2:hover #produce-box span{
   display: none;
}
.box2:hover #produce-box:after{
   content: 'Produce / Manufacture clothing pieces';
}
.box3:hover #collab-box span{
   display: none;
}
.box3:hover #collab-box:after{
   content: 'Collaborate on diverse creative projects';
}

Answer 1

http://codepen.io/anon/pen/vLWewb

.boxes{
   padding-top: 50px;
   text-align: center;
   font-family: Arial;
}
.about-box{
   height: 20px;
   display: inline-block;
   width: 150px;
   padding: 20px;
   color: white;
   background-color: black;
   margin: 10px 10px 0 10px;
   -o-transition:.2s;
   -ms-transition:.2s;
   -moz-transition:.2s;
   -webkit-transition:.2s;
   transition:.2s;
}
.about-box:hover{
   width: 300px;
}
.box1,.box2,.box3{
   display: inline;
}

.about-box:after{
  white-space:nowrap;
   content:"";
  -o-transition:.2s;
   -ms-transition:.2s;
   -moz-transition:.2s;
   -webkit-transition:.2s;
   transition:.2s;
}

.box1:hover #create-box span{
   display: none;
}
.box1:hover #create-box:after{
   content: 'Create visual designs & interactive media';
}
.box2:hover #produce-box span{
   display: none;
}
.box2:hover #produce-box:after{
   content: 'Produce / Manufacture clothing pieces';
}
.box3:hover #collab-box span{
   display: none;
}
.box3:hover #collab-box:after{
   content: 'Collaborate on diverse creative projects';
}

Answer 2

如果您想了解如何在transition的帮助下实现这一效果，那么下面是演示。我用过transition-delay。为了延迟transition，并使用visibility来控制pseudo-content显示。只要看一看片段，你就会明白这个概念。

​

.boxes {
      padding-top: 50px;
      text-align: center;
      font-family: Arial;
    }
    
    .about-box {
      height: 20px;
      display: inline-block;
      width: 150px;
      padding: 20px;
      color: white;
      background-color: black;
      margin: 10px 10px 0 10px;
      -o-transition: .2s;
      -ms-transition: .2s;
      -moz-transition: .2s;
      -webkit-transition: .2s;
      transition: all ease .2s;
    }
    .about-box:after {
      white-space: nowrap;
    }
    .about-box:hover {
      width: 300px;
      transition: .5s ease-out; 
      transition-delay: 0s;
    }
    
    .box1,
    .box2,
    .box3 {
      display: inline;
    }
    
    .box1:hover #create-box span {
      display: none;
    }
    .box1 #create-box:after, .box2 #produce-box:after, .box3 #collab-box:after {
      content: '';
      visibility: hidden;
      transition-delay: .3s;
    } 
    .box1:hover #create-box:after {
      content: 'Create visual designs & interactive media';
      visibility: visible;
    }
    
    .box2:hover #produce-box span {
      display: none;
    }
    
    .box2:hover #produce-box:after {
      content: 'Produce / Manufacture clothing pieces';
      visibility: visible;
    }
    
    .box3:hover #collab-box span {
      display: none;
    }
    
    .box3:hover #collab-box:after {
      content: 'Collaborate on diverse creative projects';
      visibility: visible;
    }

<div class="boxes">
  <div class="box1">
    <div id="create-box" class="about-box"><span class="box-span">Create</span></div>
  </div>
  <div class="box2">
    <div id="produce-box" class="about-box"><span class="box-span">Produce</span></div>
  </div>
  <div class="box3">
    <div id="collab-box" class="about-box"><span class="box-span">Collaborate</span></div>
  </div>
</div>

​