CSS 过渡：如何产生这种效果（链接过渡）

Question

HTML

<a href="#">
        <div class="contact-button">
            <div class="contact-button-text">
                Linkedin
            </div>
           <div class="block-1b">L</div>
           <div class="block-2b">I</div>
           <div class="block-3b">N</div>
           <div class="block-4b">K</div>
           <div class="block-5b">E</div>
           <div class="block-6b">D</div>
           <div class="block-7b">I</div>
           <div class="block-8b">N</div>
        </div>
        </a>

CSS

.block-1b,
.block-2b,
.block-3b,
.block-4b,
.block-5b,
.block-6b,
.block-7b,
.block-8b {
    color: #fff;
    font-family: 'quicksand', sans-serif;
    text-align: center;
    line-height: 50px;
    width: 20%;
    height: 50px;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #506989;
    transform-origin: top;
    transform: rotateX(-90deg);
    transition: .5s;
}

.contact-button {
    width: 200px;
    height: 50px;
    border: 1px solid #333;
    margin: 0 auto;
    z-index: 2;
    position: relative;
    overflow: hidden;
}

.contact-button-text {
    color: #333;
    font-family: 'quicksand', sans-serif;
    text-align: center;
    line-height: 50px;
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}




.block-1b {
    width: 25px;
}


.block-2b {
    width: 25px;
    left: 25px;
}


.block-3b {
    width: 25px;
    left: 50px;
}


.block-4b {
    width: 25px;
    left: 75px;
}


.block-5b {
    width: 25px;
    left: 100px;
}


.block-6b {
    width: 25px;
    left: 125px;
}


.block-7b {
    width: 25px;
    left: 150px;
}

.block-8b {
  width: 25px;
  left: 175px;
}
.contact-button:hover .block-1b {
    transform: translateY(0);
    background-color: #6b8fbb; 
}

.contact-button:hover .block-2b {
    transform: translateY(0);
    background-color: #6b8fbb; 
    transition-delay: .1s;
}

.contact-button:hover .block-3b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .2s;
}

.contact-button:hover .block-4b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .3s;
}

.contact-button:hover .block-5b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .4s;
}

.contact-button:hover .block-6b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .5s;
}

.contact-button:hover .block-7b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .6s;
}

.contact-button:hover .block-8b {
     transform: translateY(0);
     background-color: #6b8fbb; 
     transition-delay: .7s;
}

这是我目前的按钮动画。我希望效果像猫扑一样摆动，所以它会向前、向后、然后再次向前摆动，最后停止。

你可以在这里看到我想要制作的效果：https://jsfiddle.net/6e9jzhtw/

我想用过渡而不是动画来产生这种效果。无论如何 link 在单个元素上一起过渡？因此，将鼠标悬停在其中一个字母方块上：

-45度 45度 0度

如果不是，我知道我可以使用 jquery 重置动画，这样我可以再次将鼠标悬停在它上面并在播放一次后查看效果，但我真的很想将其设为过渡效果，如果可能。

谢谢。

Answer 1

不确定你为什么说你希望只使用过渡而不是动画，因为两者都做其他事情，据我正确理解你的问题，你想要两者。

一个transition用来控制改变时的速度（具体，不是所有）css属性。

这就是您希望 :hover on/off 发生的情况

一个 animation 只是一堆使用预定义模式的准备好的转换，因此允许您更复杂的中间状态。

现在，我为什么说你两者都需要？您似乎希望能够 start/stop 对主要（按钮）元素的 :hover 产生影响，通常这是过渡的完美候选者。 'catflap' 是一个更复杂的状态序列，因此这（按设计）符合动画条件。

为了让这两个合作，你需要定义一个"state as you want it with and without :hover"，所以你会有类似

的东西

.contact-button [class*=block-] {
    /* .. removed style properties for clarity */
    transform: rotateX(-90deg);
    transition: transform .2s ease-in-out,
                background-color .3s ease-out;
}
.contact-button:hover [class*=block-] {
    transform: rotateX(0);
    background-color: #6b8fbb;
}

注意： 我是一个非常懒惰的开发人员，我没有定义 .block-1b, .., .block-8b，而是简单地说 所有包含 [=18 的类似元素=]，这种 attribute selectors 被认为是缓慢的（但在这个演示的关注列表中它可能非常低）。

这将提供一个非常基本的过渡，实现基本的 "falling down" 效果。所以现在我们需要为每个 block-.

延迟一点

.contact-button [class*=block-]:nth-of-type(8n+1) {
   /* intentionally left "blank" */
}

.contact-button [class*=block-]:nth-of-type(8n+2) {
    transition-delay: .05s;
}

/* ...etc up to nth-of-type(8n+8) */

虽然将第一个元素的transition-delay保留为默认值（没有延迟），但我们需要影响所有其他元素，我喜欢使用nth-child和nth-of-type为此。

为清楚起见，我已将第一个元素从 <div> 重命名为 <span>，唯一目的是能够使用 nth-of-type（与元素类型匹配）

好的，现在过渡已在 :hover 上完成，每个图块将 "fall" 稍微落后于前一个。

然后我们需要解决'catflap'。如上所述，这是动画的候选对象（正如您已经发现的那样），因此我们需要添加动画。我想在知道过渡完成后开始动画，不幸的是，这必须手动完成（或 javascript，我试图将其排除在等式之外，因为你威胁要使用 jQuery..).

我们需要选择一个感觉合适的延迟，对我来说，0.15 秒（150 毫秒）是一个很好的价值，您可能会有不同的看法。

因此，我们将 animation-delay 添加到所有 nth-of-type 规则中

.contact-button [class*=block-]:nth-of-type(8n+1) {
    animation-delay: .15s;
}

.contact-button [class*=block-]:nth-of-type(8n+2) {
    transition-delay: .05s;
    animation-delay: .2s;
}

/* ...etc up to nth-of-type(8n+8) */

这已经很接近了，除了 :hover 在动画中途关闭时的抖动效果。这可以通过默认暂停动画来解决，并且只在悬停时运行，就像这样

.contact-button [class*=block-] {
    /* .. removed style properties for clarity */
    transform: rotateX(-90deg);
    transition: transform .2s ease-in-out,
                background-color .3s ease-out;
    animation-play-state: paused;
}

.contact-button:hover [class*=block-] {
    transform: rotateX(0);
    background-color: #6b8fbb;
    animation: catflap 2s;
    animation-play-state: running;
}

All of this combined leads to the following demo。在其中，我还冒昧地让 'catflap' 感觉更自然一点，方法是减少它在每个转弯时的摇摆。

现在您可能想知道为什么我最初声称自己是一个懒惰的开发人员，却编写了如此详尽的 css 选择器。好吧，说实话，我会使用 .contact-button:hover :nth-of-type(8n+3) 之类的东西，而从不使用 classes，因为我不会控制那些规则中的 animation/transition。我仍然会使用 class 来控制这些，但对所有人来说都是一样的，例如.contact-button:hover .block，足够了。

CSS 过渡：如何产生这种效果（链接过渡）

CSS transition: how to produce this effect (linking transitions)

html

css

animation

transitions