针对过渡延迟指定特定属性

Question

我正在使用以下CSS来为的功能设置动画div。通过Java .shrink添加到.header

 .brand, .brand:visited, .brand:hover {
    display: block;
    position: relative;
    height: 100px; width: 100px;
    margin-top: 25px;
    background: url('img/logo.png') no-repeat center center;
    background-size: contain;
    border: 1px solid #fff;
    border-radius: 50%;
    -webkit-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
    -moz-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
    -ms-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
    -o-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
    transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
}

header.shrink .brand {
   margin: 0; padding: 0;
   height: 80px; width: 80px;
   border-color: transparent;
}

我只想为border-color过渡设置0.35s的延迟。不知道正确的表示法，以免影响所有值。

另外，有没有办法只在一个方向施加延迟？意思是我希望在边框显示时应用延迟，但在透明时不延迟。

Answer 1

问题1-如何仅将0.35s的延迟添加到border-color属性转换？

这很简单。只需在仅提供给transition属性的逗号分隔值的最后部分添加一个延迟（即for border-color）。简而言之，当提供两个时间值时，第一个将被视为持续时间，第二个将被视为延迟。

transition: height 0.35s ease, 
            width 0.35s ease, 
            margin 0.35s ease, 
            border-color 0.35s 0.35s ease; /* notice how the delay is added here alone */

问题2-如何仅在边框显示（悬停时）时才添加延迟？

再次非常简单，添加两个transition设置-一个用于默认选择器，另一个用于:hover选择器。在:hover选择器中的一个中添加延迟，因为延迟会在border显示时出现，并且在transition默认选择器中不提供任何延迟。

transition: height 0.35s ease, 
            width 0.35s ease, 
            margin 0.35s ease, 
            border-color 0.35s 0.35s ease; /* notice how the delay is added here alone */

.brand {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  height: 80px;
  width: 80px;
  background: url('http://lorempixel.com/100/100') no-repeat center center;
  background-size: contain;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
}
.brand:hover {
  height: 100px;
  width: 100px;
  margin-top: 25px;
  border: 1px solid #f00;
  transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s 0.35s ease;
}