关键帧动画无法在Safari

时间:2017-06-16 06:22:56

标签: css css3 safari css-animations keyframe

我使用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;
	}
}
<div class="div"></div>

这个动画正在使用chrome但是没有在safari上工作,因为我已经给了动画:之前。我该怎么办?请帮忙。

1 个答案:

答案 0 :(得分:0)

尝试将默认width: 100px;设置为width: 0px;。显然Safari在开始动画形式时并不高兴#0; 0%&#34;。你可以尝试这样的事情:

&#13;
&#13;
.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;
  }
}
&#13;
<div class="div"></div>
&#13;
&#13;
&#13;