CSS 过渡仅在开发工具打开时有效

Question

我在 css 中有一个非常简单的转换为大写字母，只有在我打开开发工具时才有效（仅在 Mozilla 中，它在 Chrome 中根本不起作用）。这是我第一次在 CSS 中使用动画，所以我会善待我的代码中的任何 cmets。

打开开发工具时，窗口高度的变化会影响动画吗？还是只是后台的某种魔法改变了页面的行为？

CSS：

.headerHeading{
    color: blue;
    background-color: inherit;
}
nav {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background: #27009c;
    border: 1px #180062;
}


.nav-selections > a{

    text-transform: uppercase;
    letter-spacing: 5px;
    /*font: 18px "lato", sans-serif;*/
    /*display: inline-block;*/
    text-decoration: none;
    color: white;
    padding: 18px;
    float: right;
    /*margin-left: 50px;*/
    transition: 1.5s;
}

.nav-selections>.changeColorAnim:hover {
    transition: 1.2s;
    color: rgba(77,77,77,0.97);
}

ul {
    margin: 0 !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-flow: row nowrap;
    /*background-color: #B79b58;*/
    /*overflow: auto;*/
}

li {
    flex: 1;
    list-style: none;
}

HTML：

<link rel="stylesheet" href="styles/header.css">

<nav>
<ul>
    <li class="nav-selections"><a href="index.php" class="changeColorAnim">Home</a></li>
    <li class="nav-selections"><a href="pages/schedule.html" class="changeColorAnim">Program</a></li>
    <li class="nav-selections"><a href="pages/contact.html" class="changeColorAnim">Contact Us</a></li>
    <li class="nav-selections"> <a><?php
        if ($username != ""){
            echo $username;
        }else{
            echo "nepřihlášený";
        }
        ?>
            </a>
    </li>
    <li class="nav-selections"><a href="pages/login.php" class="changeColorAnim">Přihlásit/Registrace</a></li>
</ul>

实际和预期的行为

Answer 1

我认为你错过了动画。

在.nav-selections > a 样式上添加下面的动画以及animation: add-padding 0.5s ease 1 forwards;。

@keyframes add-padding{
  0%{
      padding:0;
  }
  100%{
    padding:18px;
  }
}

请看下面的片段：

.headerHeading{
    color: blue;
    background-color: inherit;
}
nav {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background: #27009c;
    border: 1px #180062;
}


.nav-selections > a{

    text-transform: uppercase;
    letter-spacing: 5px;
    /*font: 18px "lato", sans-serif;*/
    /*display: inline-block;*/
    text-decoration: none;
    color: white;
    float: right;
    /*margin-left: 50px;*/
     animation: add-padding 0.5s ease 1 forwards;
    transition: 1.5s;
}
@keyframes add-padding{
  0%{
      padding:0;
  }
  100%{
    padding:18px;
  }
}
.nav-selections>.changeColorAnim:hover {
    transition: 1.2s;
    color: rgba(77,77,77,0.97);
}

ul {
    margin: 0 !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-flow: row nowrap;
    /*background-color: #B79b58;*/
    /*overflow: auto;*/
}

li {
    flex: 1;
    list-style: none;
}

<link rel="stylesheet" href="styles/header.css">

<nav>
<ul>
    <li class="nav-selections"><a href="index.php" class="changeColorAnim">Home</a></li>
    <li class="nav-selections"><a href="pages/schedule.html" class="changeColorAnim">Program</a></li>
    <li class="nav-selections"><a href="pages/contact.html" class="changeColorAnim">Contact Us</a></li>
    <li class="nav-selections"> <a><?php
        if ($username != ""){
            echo $username;
        }else{
            echo "nepřihlášený";
        }
        ?>
            </a>
    </li>
    <li class="nav-selections"><a href="pages/login.php" class="changeColorAnim">Přihlásit/Registrace</a></li>
</ul>

你也可以测试一下here