针对特定属性的过渡延迟

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.35 秒的延迟？

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

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>

针对特定属性的过渡延迟

Targeting specific property for transition delay

html

css

css-transitions

针对特定 属性 的过渡延迟

Targeting specific property for transition delay

html

css

css-transitions

针对特定属性的过渡延迟