从梯形到右梯形的动画变换充满梯度

我需要从梯形到梯形充满梯度的动画。这是我所做的：http://jsfiddle.net/7Aav7/。
从梯形到右梯形的动画变换充满梯度

#box { 
    border-bottom: 100px solid transparent; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 50px; 
    background-origin: border-box; 
    background-image: -webkit-linear-gradient(blue, yellow); 
    border-right: 0px solid white; 
    -webkit-animation: rightTrapezoid 2s infinite alternate; 
} 
@-webkit-keyframes rightTrapezoid { 
    to { 
     border-right-width: 50px; 
    } 
}

但在这种情况下，我的右边缘是白色的 - 我需要它是透明的（不要与车身颜色绑）。有什么办法可以做到这一点？这可能与CSS转换？谢谢大家的帮助。

来源

2013-03-04 Artem Svirskyi

我不认为这是可能的，因为你需要的边界使得梯形具有正确的背景。同时你不希望右边框具有相同的背景。 – dave 2013-03-04 12:13:56

并用css转换？ – 2013-03-04 12:16:34

如果您需要支持旧浏览器，那么使用画布自己绘制形状或使用raphael.js如何？ – 2013-03-04 12:39:37

这是我的解决方案，使用包装div。

的（镗孔）HTML：

<div id="container"> 
<div id="inner"> 
</div> 
</div>

在内的div

，标准的东西。只有注意负左

#inner { 
    width: 400px; 
    height: 150px; 
    left: -50px; 
    position: absolute; 
    background-image: -webkit-linear-gradient(blue, yellow); 
    -webkit-animation: rightTrapezoid 2s infinite alternate; 
}

和动画，只是用歪斜

@-webkit-keyframes rightTrapezoid { 
    to { 
     -webkit-transform: skew(30deg,0deg); 
    } 
}

这对DIV两侧产生动画。要隐藏左侧运动，我使用div容器，具有溢出隐藏（使用内部div的负左）

#container { 
    left: 55px; 
    top: 0px; 
    width: 400px; 
    height: 150px; 
    position: absolute; 
    overflow: hidden; 
}

here is the fiddle

来源

2013-03-04 22:13:17 vals

哦，对）谢谢你） – 2013-03-04 22:28:03

从梯形到右梯形的动画变换充满梯度

回答

相关问题