Question

我有一个非常简单的过渡到CSS中的大写字母，仅当我打开开发工具时才起作用（仅在Mozilla中，它根本在Chrome中不起作用）。这是我第一次使用CSS制作动画，因此，请注意我对代码的任何评论。

打开开发工具时，动画是否会受到窗口高度变化的影响？还是只是某些魔术改变了页面的行为？

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

我认为您缺少动画。

添加以下动画以及animation: add-padding 0.5s ease 1 forwards;风格的.nav-selections > a。

@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对其进行测试

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

1 个答案: