I am trying to animate my logo with CSS.

It works fine in browsers like Opera, Chrome, Edge but lags in Firefox. I tried adding the vendor prefixes like -moz- , -o-, -webkit- to animation, animation-delay and transform but still it is lagging only in Firefox.

Here is the fiddle link click here

scrollbar css also not working only in Firefox

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background-color: white;
}

html::-webkit-scrollbar-thumb {
  background: var(--colorMain);
}

html::-moz-scrollbar {
  width: 10px;
}

html::-moz-scrollbar-track {
  background-color: white;
}

html::-moz-scrollbar-thumb {
  background: var(--colorMain);
}

CodePudding user response：

First you need to remove the display: contents; in your .wrapper span and the animation will play smoothly.

.wrapper span {
  /* display: contents; */
  -webkit-text-stroke-width: 1.5px;
  text-shadow: 0 0px var(--brShadow), 0 0px var(--tlShadow);
  transform: translate(0, 100%) rotate(2deg);
  animation: jump 2s ease-in-out infinite;

  color: var(--colorMain);
}

To solve the second problem, add scrollbar-color: var(--colorMain) white; property to the html class, because Firefox scrollbar to customize differently.

html {
  font-size: 63.5%;
  overflow-x: hidden;
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
  text-decoration: none;
  scrollbar-color: var(--colorMain) white; /* new line */
}

:root {
  --colorMain: #4784e6;
}

* {
  font-family: 'Nunito', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

html {
  font-size: 63.5%;
  overflow-x: hidden;
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
  text-decoration: none;
  scrollbar-color: var(--colorMain) white; /* new line */
}

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background-color: white;
}

html::-webkit-scrollbar-thumb {
  background: var(--colorMain);
}

/* header section */

section {
  padding: 5rem 10%;
}

a {
  text-decoration: none;
}

.header span {
  font-size: 3rem;
  background: rgba(255, 255, 255, 0.2);
  color: var(--colorMain);
  border-radius: 0.5rem;
  padding: 0.1rem 0.1rem;
}

.wrapper {
  width: max-content;
  margin-left: 2rem;
  margin-right: 2rem;
}

.wrapper span {
  /* display: contents; */
  -webkit-text-stroke-width: 1.5px;
  text-shadow: 0 0px var(--brShadow), 0 0px var(--tlShadow);
  transform: translate(0, 100%) rotate(2deg);
  animation: jump 2s ease-in-out infinite;

  color: var(--colorMain);
}

.wrapper span:nth-child(1) {
  animation-delay: 120ms;
}

.wrapper span:nth-child(2) {
  animation-delay: 240ms;
}

.wrapper span:nth-child(3) {
  animation-delay: 360ms;
}

.wrapper span:nth-child(4) {
  animation-delay: 480ms;
}

.wrapper span:nth-child(5) {
  animation-delay: 600ms;
}

.wrapper span:nth-child(6) {
  animation-delay: 720ms;
}

@keyframes jump {
  33% {
    text-shadow: 0 10px rgb(64, 206, 206), 0 15px #aadef2;
  }

  50% {
    transform: translate(0, 0) rotate(-4deg);
    text-shadow: 0 0px #8fc0a9, 0 0px #84a9ac;
  }

  66.67% {
    text-shadow: 0 -10px rgb(64, 206, 206), 0 -15px #8fc0a9;
  }
}

<section >
  <a href="#" >
    <div >
      <span>T</span>
      <span>R</span>
      <span>A</span>
      <span>V</span>
      <span>E</span>
      <span>L</span>
    </div>
  </a>
</section>