关键帧动画在 Safari 上不起作用答案

【问题标题】：Keyframe Animation Not Working On Safari关键帧动画在 Safari 上不起作用
【发布时间】：2017-06-16 14:37:22
【问题描述】：

我已经使用 css 创建了动画，下面是它的代码

.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;
	}
}

&lt;div class="div"&gt;&lt;/div&gt;

此动画在 chrome 上运行，但在 safari 上运行，因为我已将动画提供给 :before。我应该怎么办？请帮忙。

【问题讨论】：

我有 Safari 版本 10.1.1，它似乎工作得很好。你用的是什么版本？
我使用的是5.1.7版本。
Safari 5.1.7 是一个 10 年前的 Windows 版本，很久以前就停产了，所以立即放弃它并使用其他东西
如果您仍然需要它，请检查：stackoverflow.com/questions/9471038/…
谢谢@LGSon 我会更新 safari 版本

标签： css safari css-animations keyframe

【解决方案1】：

尝试将您的默认width: 100px; 设置为width: 0px;。显然 Safari 在从“0%”开始动画时并不高兴。你可以试试这样的：

.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;
  }
}

&lt;div class="div"&gt;&lt;/div&gt;

【讨论】：

感谢您的回复，但它不适用于我的 Safari 版本。