控制多个 CSS 过渡的时间/延迟答案

【问题标题】：Controlling the timing/delay of multiple CSS transitions控制多个 CSS 过渡的时间/延迟
【发布时间】：2016-01-19 16:46:12
【问题描述】：

我正在一个有三个 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';
}

【问题讨论】：

我相信你要找的是关键帧
你为什么不使用 JQuery？它更容易:)
如果真的需要用 CSS 来完成，关键帧动画是最好的选择。如果您不熟悉关键帧动画，请告诉我。我会帮你的。
是的，我不知道关键帧是什么。你知道我可以阅读它们的好资源吗？

标签： html css web

【解决方案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';
}

【讨论】：

【解决方案2】：

如果你想看看这个效果是如何在transition的帮助下完成的，那么这里是demo。我用过transition-delay。为了延迟transition并使用visibility来控制pseudo-content的显示。只需通过sn-p，您就会理解这个概念。

.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>

【讨论】：