我使用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上工作,因为我已经给了动画:之前。我该怎么办?请帮忙。
答案 0 :(得分:0)
尝试将默认width: 100px;
设置为width: 0px;
。显然Safari在开始动画形式时并不高兴#0; 0%&#34;。你可以尝试这样的事情:
.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;