我想用CSS动画绘制一个从左往下到右往上的勾号。我已经完成了从左往下的部分,但往回走的时候似乎有些问题。它是从右往下走的。有人知道如何使这个动画更加平滑,并让它看起来像是真正地在绘制勾号吗?
setTimeout(function() {
$('#kick').addClass('draw2');
}, 500);
#kick {
height: 150px;
width: 20px;
background: green;
-webkit-transform: rotate(45deg);
position: relative;
top: -24px;
left: 273px;
}
#stem {
height: 60px;
width: 20px;
background: green;
-webkit-transform: rotate(-45deg);
position: relative;
top: 100px;
left: 200px;
}
@-webkit-keyframes draw1 {
from {
height: 0;
}
to {
height: 60px
}
}
@-webkit-keyframes draw2 {
from {
height: 0;
}
to {
height: 150px;
}
}
.draw1 {
-webkit-animation-name: draw1;
-webkit-animation-duration: 0.5s;
}
.draw2 {
-webkit-animation-name: draw2;
-webkit-animation-duration: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="checkmark">
<div class="draw1" id="stem"></div>
<div id="kick"></div>
</span>
我非常感谢在正确实现这个动画方面能够提供帮助!另外,既然我已经在使用jQuery,如果可以更高效地用jQuery / JavaScript完成这项工作,那也没问题。
animation
和-webkit-animation
中删除infinite
。 - Weafs.pyanimation
和-webkit-animation
应该设置为draw 2s ease forwards
。 - Michiel