CSS ::before 和 ::after 动画到按钮的中心，但只有 ::after 结束在中心

Question

我一直在尝试从这个模板中重新创建按钮 'Buy Intense now' 和 'Start a journey'：http://www.templatemonster.com/demo/58888.html

在周围人的帮助下，我想出了一个几乎相同但还不完全相同的解决方案。我已经使用了::before 和::after，但是::before 事件并没有在按钮的中间结束。那是因为它被放置在离按钮更远的地方（显然），但我不明白为什么。

请参阅下面的 fiddle 以获得更多权限。

这是我已有的：

<section id="button-container" class="section">
    <div id="effect" class="button">
        <span class="text">Free offer</span>
    </div>
</section>

*, *::before, *::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box
}
.section{
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    display:flex;
    -webkit-display:flex
}
.button{
    text-align:center;
    box-sizing:border-box;
    border:none;
    cursor:pointer;
    width:200px;
    padding:20px 0px;
    border-radius:5px;
    position:relative
}
.button .text{
    position:relative;
    z-index:100;
    font-size:17px;
    font-weight:700;
    text-transform:uppercase
}
#button-container #effect{
    background-color:#ff7900;
    overflow:hidden
}
#button-container #effect .text{
    color:#fff;
    transition:all .3s linear;
    -webkit-transition:all .3s linear
}
#button-container #effect::before{
    content:'';
    position:absolute;
    transition:left .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    -webkit-transition:left .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    left:-50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:20px;
    height:20px;
    border-radius:50%;
    background-color:#79ccf2
}
#button-container #effect::after{
    content:'';
    position:absolute;
    transition:right .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    -webkit-transition:right .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    right:-50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:20px;
    height:20px;
    border-radius:50%;
    background-color:#79ccf2
}
#button-container #effect:hover .text{
    color:#fff;
    transition:color .5s linear .5s;
    -webkit-transition:color .5s linear .5s
}
#button-container #effect:hover::before{
     transition:left .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
     -webkit-transition:left .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
      left:50%;
      width:400px;
      height:400px
}
#button-container #effect:hover::after{
      transition:right .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
      -webkit-transition:right .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
      right:50%;
      width:400px;
      height:400px
}

Fiddle

提前致谢。

Answer 1

CSS
对交替元素状态的 transform 值进行了一些调整。

#button-container #effect:hover::before {
    transition: left .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
    -webkit-transition: left .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-5%, -50%);
}

#button-container #effect::before {
    content: '';
    position: absolute;
    transition: left .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    -webkit-transition: left .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    left: -50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #79ccf2;
}

#button-container #effect:hover::after {
    transition: right .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
    -webkit-transition: right .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
    right: 50%;
    width: 400px;
    height: 400px;
    transform: translate(5%, -50%);
}

#button-container #effect::after {
content: '';
    position: absolute;
    transition: right .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    -webkit-transition: right .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    right: -50%;
    top: 50%;
    transform: translate(50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #79ccf2;
}

片段
运行下面的代码片段可以看到它的实际效果。

*, *::before, *::after{margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.section{font-family:'Open Sans', Arial, Helvetica, sans-serif;display:flex;-webkit-display:flex}
.button{text-align:center;box-sizing:border-box;border:none;cursor:pointer;width:200px;padding:20px 0px;border-radius:5px;position:relative}
.button .text{position:relative;z-index:100;font-size:17px;font-weight:700;text-transform:uppercase}
#button-container #effect{background-color:#ff7900;overflow:hidden}
#button-container #effect .text{color:#fff;transition:all .3s linear;-webkit-transition:all .3s linear}
#button-container #effect:hover::before {
    transition: left .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
    -webkit-transition: left .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-5%, -50%);
}

#button-container #effect::before {
    content: '';
    position: absolute;
    transition: left .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    -webkit-transition: left .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    left: -50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #79ccf2;
}

#button-container #effect:hover::after {
    transition: right .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
    -webkit-transition: right .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
    right: 50%;
    width: 400px;
    height: 400px;
    transform: translate(5%, -50%);
}

#button-container #effect::after {
content: '';
    position: absolute;
    transition: right .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    -webkit-transition: right .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
    right: -50%;
    top: 50%;
    transform: translate(50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #79ccf2;
}

<section id="button-container" class="section">
    <div id="effect" class="button">
        <span class="text">Free offer</span>
    </div>
</section>

Answer 2

是:after的问题。

您使用位置 right 对齐它。

当动画要移动 :after 的宽度时，它会向左增长，因为 right: 50% 限制了它。（你可以看到下面的慢动作）

像这样更改您的代码：

#button-container #effect::after{
    left: 150%;
    transition: left .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
}


#button-container #effect:hover::after{
    left: 50%;
    transition: left .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
}

https://jsfiddle.net/Lpcfuwoh/1/

CSS ::before 和 ::after 动画到按钮的中心，但只有 ::after 结束在中心

CSS ::before and ::after animation to center of button, but only ::after ends up in center

css

animation

transition