CODEWITHSUNDEEP
csscss-animations
Tim Mcneal
Tim Mcneal

Reputation: 283

CSS animation not working properly in Safari

My animation works in both Chrome and Firefox but not Safari, and I cannot figure out why. I use both the -webkit-animation and the simple animation function, yet it refuses to work in Safari. My CSS is as follows:

.bar{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}
.bar::before{
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: 0;
  background: #ecf0f1;
}
.bar::after{
  content: '';
  background: #7CE1C9;
  height: 30px;

  display: block;
  width: 100%;
  -webkit-animation: bar-before 1 1.8s;
  animation: bar-before-two 1 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@-webkit-keyframes bar-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}
@keyframes bar-before-two {
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

I am simply at a standstill, any ideas?

Upvotes: 0

Views: 205

Answers (1)

Stickers
Stickers

Reputation: 78796

There are two names in the animation bar-before and bar-before-two they were not prefixed properly, I think you can just merge them into one - i.e. progress-bar. Otherwise set them individually.

-webkit-animation: progress-bar 1.8s;
animation: progress-bar 1.8s;

@-webkit-keyframes progress-bar{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}
@keyframes progress-bar{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}


.bar{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}
.bar::before{
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: 0;
  background: #ecf0f1;
}
.bar::after{
  content: '';
  background: #7CE1C9;
  height: 30px;
  display: block;
  width: 100%;
  -webkit-animation: progress-bar 1.8s;
  animation: progress-bar 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@-webkit-keyframes progress-bar{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}
@keyframes progress-bar{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}
<div class="bar">bar</div>

Upvotes: 1

Related Questions