Skip to main content

No funcionan Keyframes en Mozilla y en Chrome sí, en cambio en Mozilla si funcionan Transiciones y en Chrome no

Estoy tratando de usar @keyframes en mozilla y no funciona pero en chrome todo perfecto, en cambio cuando intento usar transitions en chrome no me funciona pero en mozilla sí. Ya he intentado usar los prefijos que se compilan con SCSS pero nada, también agregué el prefijo -moz- porque SCSS solo compilaba con los prefijos -webkit- y nada.

<body>
  <details>
      <summary>HTML</summary>
      <div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima accusantium mollitia soluta, maiores eligendi laudantium, vero a, possimus repellat odit minus numquam quas officia eveniet voluptate nemo obcaecati reiciendis distinctio.</p>
      </div>
  </details>

  <details>
    <summary>CSS</summary>
    <div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima accusantium mollitia soluta, maiores eligendi laudantium, vero a, possimus repellat odit minus numquam quas officia eveniet voluptate nemo obcaecati reiciendis distinctio.</p>
    </div>
</details>

<details>
    <summary>JS</summary>
    <div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima accusantium mollitia soluta, maiores eligendi laudantium, vero a, possimus repellat odit minus numquam quas officia eveniet voluptate nemo obcaecati reiciendis distinctio.</p>
    </div>
</details>
</body>

Aquí Css utilizando animaciones:

  1. Primera animación con propiedad height selector div
  2. Segunda animación con propiedad opacity y margin-top para el selector p.
*,
::before,
::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: sans-serif;
}

details {
  width: 500px;
  margin: 1.5em auto;
}

summary {
  background-color: hsla(140, 100%, 40%, .9);
  padding: .8em 1em;
  cursor: pointer;
  color: #111;
  outline: none;
}

summary::marker {
  color: #fff;
}

div {
  padding: 0 1em;
  box-shadow: 1px 1px 1px 0px #ddd;
  border: 1px solid #eee;
  animation-name: height;
  animation-duration: .4s;
  height: 150px;
}

@keyframes height {
  from {
    height: 0;
  }
  to {
    height: 150px;
  }
}

p {
  color: #111;
  animation-name: opacity;
  animation-duration: .4s;
}

@keyframes opacity {
  from {
    margin-top: 0;
    opacity: 0;
  }

  to {
    margin-top: 1em;
    opacity: 1;
  }
}

Aquí Css utilizando transiciones:

  1. Transición para selector div
  2. transición para selector p
*,
::before,
::after {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: sans-serif;
}

details {
  width: 500px;
  margin: 1.5em auto;
}

summary {
  background-color: hsla(140, 100%, 40%, .9);
  padding: .8em 1em;
  cursor: pointer;
  color: #111;
  outline: none;
}

summary::marker {
  color: #fff;
}

div {
    padding: 0 1em;
    box-shadow: 1px 1px 1px 0px #ddd;
    border: 1px solid #eee;
    transition: height .4s;
    height: 0;
}

details[open] div {
    height: 150px;
}

p {
    color: #111;
    opacity: 0;
    margin-top: 0;
    transition: all .6s;
}

details[open] p {
    margin-top: 1em;
    opacity: 1;
}

Gracias de antemano