Skip to main content
2 de 4
se eliminó 1 carácter en el cuerpo

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, tambien agregue 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 animacion con propiedad height selector div
  2. Segunda animacion 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. Transicion para selector div
  2. transicion 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