Javascript CSS如何使用倾斜变换设置有角度线的动画

我想合并一条被画成两条向上和向下45度的线。这是

CSS:

这将有助于：

连接器{
位置：相对位置；
利润率：100像素；
宽度：100px；
高度：2倍；
背景：#f00；
}
.连接器：之前，
.连接器：之后{
位置：绝对位置；
左：100%；
排名：0；
内容：''；
宽度：100px；
高度：2倍；
背景：#f00；
变换原点：0.100%；
变换：旋转（-45度）；
}
.连接器：之后{
变换：旋转（45度）；
}

---

我不知道我是否明白你想要什么。但是，这个呢

html

<div class="connector up"></div>
<div class="connector down"></div>

在这里，我的动画版本

HTML

<div class="container">
  <div class="connector up"></div>
  <div class="connector down"></div>
</div>

JavaScript

document.querySelector('.container').classList.add('animate');

setTimeout（函数（）{
document.querySelector（'.container'）.classList.add（'animate'）；
}, 500);
.container{
宽度：0；
高度：80px；
溢出：隐藏；
过渡：一切都很轻松；
}
.制作动画{
宽度：220px；
}
.连接器{
高度：40px；
宽度：200px；
右边框：2倍纯红；
框大小：边框框；
}
.起来{
底部边框：2倍纯红；
-moz变换：倾斜（-45度）；
-webkit变换：倾斜（-45度）；
变换：倾斜（-45度）；
}
.下来{
-moz变换：倾斜（45度）；
-webkit变换：倾斜（45度）；
变换：倾斜（45度）；
}

您需要在此处发布您的代码，而不是明天可能更改或消失的第三方网站。目前，动画代码可能根本不存在。这会使线条产生动画效果吗？一定要把代码贴在这里，而不是代码笔。嗨，@Rob昨天，为什么不在代码笔里？这是这里的普遍做法。我添加了一个动画。您可以在这里查看。您可以使用代码笔来赞美您的答案，但不能回答它。如果你严格使用它来回答问题，它应该/将被关闭。无法从SO中搜索Codepen。如果Codepen消失了，有一天，你的答案会变得毫无用处。我理解@Rob，但是，我总是在这里写代码，从不只链接到codepen或jsfiddle，所以如果有一天codepen消失了，我的代码仍然会留在这里。顺便说一句，谢谢你的提示。
<div class="container">
  <div class="connector up"></div>
  <div class="connector down"></div>
</div>

.container {
  width: 0;
  height: 80px;
  overflow: hidden;
  transition: all 2s ease;
}

.animate {
  width: 220px;
}

.connector {
  height: 40px;
  width: 200px;
  border-right: 2px solid red;
  box-sizing: border-box;
}

.up {
  border-bottom: 2px solid red;
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}

.down {
  -moz-transform: skew(45deg);
  -webkit-transform: skew(45deg);
  transform: skew(45deg);
}

document.querySelector('.container').classList.add('animate');