CSS3设置线条延伸动画，怎么从右向左延伸

html-css021

CSS3设置线条延伸动画，怎么从右向左延伸,第1张

<pre t="code" l="html"><!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px

height:100px

background:red

position:absolute

animation:myfirst 5s

-webkit-animation:myfirst 5s

animation-fill-mode: forwards

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:redleft:500pxbottom:50px}

25% {background:redleft:500pxheight:130pxbottom:50px}

50% {background:redleft:500pxheight:160pxbottom:50px}

75% {background:redleft:500pxheight:190pxbottom:50px}

100% {background:redleft:500pxheight:210pxbottom:50px}

}

</style>

</head>

<body>

<div></div>

</body>

</html>这只是个演示的demo，方法就是这样，animation-fill-mode: forwards这一句给你解释下，这句就是当动画完成时，动画会停留在最后一帧。其他代码都比较简单，不懂随时问我。

希望能够帮助到你，！

可以x和y分开写动画，速度不一样，就形成曲率了

@keyframes anix {

0% {top: 0}

100% {top: 200px}

}

@keyframes aniy {

0% {left: 0}

100% {left: 100px}

}