针对转换延迟的特定属性

Question

我正在使用以下CSS为div的功能设置动画。.shrink通过Java 添加到.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.35秒的延迟。不确定正确的符号，以免影响所有值。

还有，有没有办法只在一个方向上应用延迟？这意味着我希望在边界出现时应用延迟，但在透明时不要延迟。

Answer 1

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

这很简单。只需在单独提供给transition属性（即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中不提供任何延迟。

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

<div class='brand'></div>