菜单项上的 CSS Transitions 不起作用

Question

这是我第一次使用 css transitions/transformations，效果不是很好。 我只是想从底部翻译到定位切换菜单的每个条目，但我得到了奇怪的结果。 当我在我的应用程序中运行代码时，它只对列表的第一项而不是所有元素执行转换。 当我从 jsfiddle 运行相同的代码时，转换对任何元素都不起作用。

请看我的jsfiddle here

我查看了文档、许多不同的示例以及针对类似问题的许多其他解决方案。我已经尝试了所有方法，挑战高度，移除显示器，但似乎没有任何区别

<header>
  <a id="menu">
    <i class="fas fa-bars"></i>
  </a>
</header>

<nav class="nav nav-sm">
  <ul class="nav__list">
    <li class="nav__item"><a href="#">ABOUT</a></li>
    <li class="nav__item"><a href="#">SKILLS</a></li>
    <li class="nav__item"><a href="#">WORKS</a></li>
  </ul>
</nav>

header {
  width: 100%;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: right;

  background-color: #68c7c1;
  min-height: 56px;
  transition: min-height 0.3s;
}
header #menu {
  margin-left: auto;
  margin-right:10px;
  color: #eceeef;
  font-size: 2em;
}

.nav {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  background-color: #68c7c1;
}
.nav-sm, .nav-lg { display: none; }
.nav-sm.open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: calc(100% - 56px);
  margin-top: -2px;
}

.nav__list, .nav__item { width: 100%; }
.nav__list {
  display: flex;
  flex-wrap: wrap;
}
.nav__item {
  height:50px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.nav__item a {
  text-decoration: none;
  text-align: center;
  font-size: 1.2em;
  color: #eceeef;
}
.nav-sm .nav__list .nav__item {
  color: red;
  transition: -transform 3s ease-in-out;
  -moz-transition: -moz-transform 3s ease-in-out;
  -webkit-transition: -webkit-transform 3s ease-in-out;
}
.nav-sm.open .nav__item {
  padding-bottom: 80px;
  font-size: 2em;
  transform: translate(0,-50px);
  -moz-transform: translate(0,-50px);
  -webkit-transform: translate(0,-50px);
}

我试图实现的一个例子是类似于 this 的菜单。投资组合。

Answer 1

您到底想做什么？动画片 ？单击时转换？

这里是一个如何通过css写动画的例子:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

/* Standard syntax */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}