css - 文本形状动画，外部形状动画

Question

我正在尝试在段落的文本上实现以下动画:

目的是根据左侧的形状为文本的边界设置动画。这是我尝试过的，但我无法弄清楚文本形状的过渡:

.mainDiv {
  width: 600px;
  margin: 0px auto;
  border: solid 1px #000;
  padding: 10px;
  min-height: 200px;
}
.element {
  width: 200px;
  height: 200px;
  background: #e3f5f1;
  float: left;
  margin-right: 5px;
}
.textElement {
  width: 395px;
  float: left;
}

<div class="mainDiv">
  <div class="element"></div>
  <div class="textElement">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Page Maker including versions of Lorem Ipsum, and more recently with desktop publishing software.
  </div>
</div>

我对 CSS 过渡和动画了解不多，所以希望得到一些帮助。

Answer 1

Disclaimer : The shape-outside property should not be used in live projects¹. It may be subject to undesired behaviours.

这种布局可以通过为shape-outside设置动画来实现。和 clip-path属性。可以转换这两个属性来制作动画。

缺点是两者对浏览器的支持都非常低，目前，该动画只能在 webkit 浏览器中使用，因为 Firefox 和 IE/Edge 不支持 shape-outside property或 clip-path property具有 polygon() 值。

这是一个例子(仅限webkit):

.mainDiv{
  width:600px;
  margin:0px auto;
  border:solid 1px #000;
  padding:10px;
  min-height:200px;
}
.element{
  width:200px;
  height:200px;
  background:#e3f5f1;
  float:left;
  margin-right:5px;
  shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
  clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
  transition: clip-path 1s, shape-outside 1s;
}
.mainDiv:hover .element {
  shape-outside: polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);
  clip-path:polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);  
}

<div class="mainDiv">
  <div class="element"></div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Page Maker including versions of Lorem Ipsum, and more recently with desktop publishing software.
</div>

¹_{CSS Shapes Module Level 1目前(2016 年 10 月)的状态为“候选推荐”。因为这意味着它是一项正在进行的工作，它可能随时更改，因此除了测试之外不应使用。}