HTML 和 CSS 中按钮的奇怪行为

Question

我在使用按钮时遇到问题。它是具有背景颜色和一些填充的文本。基本上，当我刷新页面时，按钮在到达其尺寸之前需要不到一秒钟的时间。它以 0 填充开始，片刻之后达到我设置的值，就像动画一样，但事实并非如此。我没有为它设置任何动画。我会在这里留下代码

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
    padding: 30px;
}

.header {
    height: 95vh;
    background-image: linear-gradient(
        to right bottom, 
        rgba(126, 213, 111, 0.8), 
        rgba(40, 180, 133, 0.80)), 
        url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    position: relative;

    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}

.logo-box {
    position: absolute;
    top: 40px;
    left: 40px;
}

.logo {
   height: 35px;
}

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.heading-primary {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 60px;
}

.heading-primary-main {
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;
    animation: moveInLeft 1s ease-out;
    /*animation-delay: 3s;*/
    /*animation-iteration-count: 3;*/

}

.heading-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 17.4px;
    animation: moveInRight 1s ease-out;
}

@keyframes moveInLeft {
    0% { 
        opacity: 0;
        transform: translateX(-100px);
    }

    100% { 
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes moveInRight {
    0% { 
        opacity: 0;
        transform: translateX(100px);
    }

    100% { 
        opacity: 1;
        transform: translate(0);
    }
}

.btn:link, 
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: transform, box-shadow, .2s;
    position: relative;
    animation: moveInBottom 1s ease-out;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-white {
    background-color: #fff;
    color: #777;
}

.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: tansform, opacity, .4s;
}

.btn-white::after {
    background-color: #fff;
}

.btn:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

@keyframes moveInBottom {
    0% { 
        opacity: 0;
        transform: translateY(50px);
    }

    100% { 
        opacity: 1;
        transform: translate(0);
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

        <link rel="stylesheet" href="css/icon-font.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">

        <title>Natours | Exciting tours for adventurous people</title>
    </head>

    <body>
        <header class="header">
            <div class="logo-box">
                <img src="img/logo-white.png" alt="Logo" class="logo">
            </div>

            <div class="text-box">
                <h1 class="heading-primary">
                    <span class="heading-primary-main">Outdoors</span>
                    <span class="heading-primary-sub">is where life happens</span>
                </h1>

                <a href="#" class="btn btn-white">Discover our tours</a>
            </div>    

        </header>

    </body>
</html>

这件事在 chrome 中发生，但在 firefox 中没有。我正在一个非常知名的网站上学习课程，尽管这个人使用完全相同的代码，但他似乎没有遇到同样的问题。谢谢你们，我真的很感激你们每天所做的一切，帮助我们解决问题。新年快乐，顺便说一句

Answer 1

把transition改成 transition: transform .2s, box-shadow .2s; 和 transition: transform .4s, opacity .4s; 这是在转换中使用多个属性的方法。

transition: transform, box-shadow, .2s; 这将等同于

transition-property: transform, box-shadow, all;
transition-duration: 0s, 0s, 0.2s;

HTML 和 CSS 中按钮的奇怪行为

Strange not wanted behavior of a button in HTML and CSS

html

css

animation

behavior

button