CODEWITHSUNDEEP
css
SkyMicro
SkyMicro

Reputation: 47

My style works perfectly in Chrome but not in Firefox

I wrote simple css for blink text shadow.

It is correctly working in google chrome.

but not work in firefox.

I need to work this in all type browsers.

Can someone help me please 

#container {
  width: 500px;
  margin: auto;
}
#container {
  width: 500px;
  margin: auto;
}
p {
  text-align: center;
  font-size: 2em;
  margin: 20px 0 20px 0;
}
a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
p:nth-child(1) a {
  color: #316885;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}
p:nth-child(1) a:hover {
  color: #316885;
  -webki t-animation: none;
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #6C7376, 0 0 70px #6C7376, 0 0 80px #6C7376, 0 0 100px #6C7376, 0 0 150px #6C7376;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #6C7376, 0 0 35px #6C7376, 0 0 40px #6C7376, 0 0 50px #6C7376, 0 0 75px #6C7376;
  }
}
<html>

<head>
  <style>
  </style>
</head>

<body>
  <div id="container">
    <p>
      <a class="changeColor">Daily Mail Dispathch Service-Sri Lanka Army</a>

    </p>
  </div>
</body>

</html>

Upvotes: 1

Views: 66

Answers (1)

m4n0
m4n0

Reputation: 32255

You still need to define @keyframes for Firefox. Your current code targets only webkit browsers and thus works on Chrome.

@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #6C7376, 0 0 70px #6C7376, 0 0 80px #6C7376, 0 0 100px #6C7376, 0 0 150px #6C7376;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #6C7376, 0 0 35px #6C7376, 0 0 40px #6C7376, 0 0 50px #6C7376, 0 0 75px #6C7376;
  }
}

Output:

#container {
  width: 500px;
  margin: auto;
}
#container {
  width: 500px;
  margin: auto;
}
p {
  text-align: center;
  font-size: 2em;
  margin: 20px 0 20px 0;
}
a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
p:nth-child(1) a {
  color: #316885;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}
p:nth-child(1) a:hover {
  color: #316885;
  -webkit-animation: none;
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #6C7376, 0 0 70px #6C7376, 0 0 80px #6C7376, 0 0 100px #6C7376, 0 0 150px #6C7376;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #6C7376, 0 0 35px #6C7376, 0 0 40px #6C7376, 0 0 50px #6C7376, 0 0 75px #6C7376;
  }
}
@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #6C7376, 0 0 70px #6C7376, 0 0 80px #6C7376, 0 0 100px #6C7376, 0 0 150px #6C7376;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #6C7376, 0 0 35px #6C7376, 0 0 40px #6C7376, 0 0 50px #6C7376, 0 0 75px #6C7376;
  }
}
<div id="container">
  <p>
    <a class="changeColor">Daily Mail Dispathch Service-Sri Lanka Army</a>
  </p>
</div>

Upvotes: 1

Related Questions