Keyframe Animation Not Working On Safari

Question

I have created animation using css, below is code for that

.div
{
 position:relative;
 width:250px;
 height:150px;
 background-color:gray;
}
    .div:before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100px;
        height: 100px;
        animation-name: drawline;
        animation-duration: 2s;
        -webkit-animation-name: drawline;
        -webkit-animation-duration: 2s;
        border: 1px solid #fff;
    }
@-webkit-keyframes drawline
{
 0%
 {
  width:0px;
 }
 100%
 {
  width:100px;
 }
}
@keyframes drawline
{
 0%
 {
  width:0px;
 }
 100%
 {
  width:100px;
 }
}

<div class="div"></div>

This animation is working on chrome but not working on safari because I have given animation to :before. What should I do? Please help.

I have Safari Version 10.1.1, and it seems to work just fine. What version do you use ? — j-printemps, Jun 16 '17 at 06:26
Safari 5.1.7 is a 10 year old version for Windows and have be discontinued a looooong time ago, so just drop that immediately and use something else — Asons, Jun 16 '17 at 06:41
If you still need it, check this: https://stackoverflow.com/questions/9471038/safari-absolutely-positioned-divs-not-moving-when-updated-via-dom — Asons, Jun 16 '17 at 06:53
FYI, there is no newer Safari version for Windows, they discontinued it in 2012. — Asons, Jun 16 '17 at 08:48

score 0 · Answer 1 · answered Jun 16 '17 at 06:37

Try to set your default width: 100px; to width: 0px;. And apparently Safari wasn't happy when starting animation form "0%". You can try something like this :

.div
{
 position:relative;
 width:250px;
 height:150px;
 background-color:gray;
}
    .div:before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100px;
        height: 100px;
        animation-name: drawline;
        animation-duration: 2s;
        -webkit-animation-name: drawline;
        -webkit-animation-duration: 2s;
        border: 1px solid #fff;
    }
@-webkit-keyframes drawline
{
 0% {
    opacity: 0; 
    width: 100px;
  }
  1% {
    opacity: 1;
    width: 0;
  }
  100% {
    width: 100px;
  }
}

@keyframes drawline {
  0% {
    opacity: 0; 
    width: 100px;
  }
  1% {
    opacity: 1;
    width: 0;
  }
  100% {
    width: 100px;
  }
}

<div class="div"></div>

Thanks for reply but it's not working in my safari version. – vedankita kumbhar Jun 16 '17 at 06:40 — vedankita kumbhar, Jun 16 '17 at 06:40

Keyframe Animation Not Working On Safari

1 Answers1