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）属性的逗号分隔值的最后部分添加延迟。在提供两个时间值的简写中，第一个将被视为持续时间，第二个将被视为延迟。

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>

针对转换延迟定位特定属性

1 个答案: