我已经使用 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,因为我已将动画提供给 :before。我应该怎么办?请帮忙。
最佳答案
尝试将默认的 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;
}
}
<div class="div"></div>
关于css - 关键帧动画不适用于 Safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44582164/