Question

我正在使用CSS动画和jQuery在十字路口移动汽车以模拟驾驶执照测验。

示例图片： http://i39.tinypic.com/2gv6ma0.jpg

每辆车都有属性和动画，例如：红色车左转。

@-webkit-keyframes "move-a" {
 20% {
   left: 155px;
   top: 250px;
   -webkit-transform: rotate(-75deg);
   transform: rotate(-75deg);   
 }
 40% {
   left: 148px;
   top: 210px;
   -webkit-transform: rotate(-100deg);
   transform: rotate(-100deg);
 }
 60% {
   left: 135px;
   top: 170px;
   -webkit-transform: rotate(-120deg);
   transform: rotate(-120deg);
 }
 80% {
   left: 90px;
   top: 150px;   
   -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
 }
 100% {
   left: 10px;
   top: 145px;   
   -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
 }

我必须做40个不同的动画十字路口，每个都有3-4-5辆汽车，以这种方式制作每辆汽车的动画都是自杀。

我知道可以在Adobe Illustrator上绘制路径，将其导出为SVG并将其转换为CSS3动画。

问题是：

如何获得像我一样的简单CSS代码（包含更多关键帧）？

我该怎么做？

如何实施此方法？

这样做的好方法/工具是什么？

Answer 1

可以通过将两个动画类应用于两个嵌套div来实现这一点 - 一个用于处理X动作，一个用于处理Y动作，另一个用于调整每个动画的立方贝塞尔宽松，直到获得所需的动作为止。。

使用SVG SMIL animation and directly animate your content要容易得多。或者使用snap或raphael svg动画库。

来自Path的CSS3动画。怎么实现呢？

1 个答案: