texto - efectos de transicion css
Animación de formas de texto, animación de formas fuera. (2)
Descargo de responsabilidad: la propiedad shape-outside no debe utilizarse en proyectos en vivo 1 . Puede estar sujeto a comportamientos no deseados.
Este tipo de diseño se puede lograr animando las propiedades shape-outside y clip-path . Ambas propiedades pueden ser transicionadas para hacer la animación.
El inconveniente es que ambos tienen un soporte de navegador muy bajo y, en la actualidad, esta animación solo funcionará en los navegadores de webkit, ya que Firefox e IE / Edge no admiten la propiedad de shape-outside o la propiedad de clip-path con un valor de polygon() .
Aquí hay un ejemplo (solo 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;
-webkit-shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
-webkit-clip-path: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;
transition: -webkit-clip-path 1s, shape-outside 1s;
}
.element:hover{
-webkit-shape-outside: polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);
shape-outside: polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);
-webkit-clip-path: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>
1 El Módulo de Formas CSS Nivel 1 actualmente (octubre de 2016) tiene el estado de "Recomendación del candidato". Como esto significa que se trata de un trabajo en progreso, puede cambiar en cualquier momento y, por lo tanto, no se debe utilizar para fines de prueba.
Estoy tratando de lograr la siguiente animación en el texto de un párrafo:
El objetivo es animar los límites del texto de acuerdo con la forma de la izquierda. Esto es lo que he intentado, pero no puedo entender la transición en la forma del texto:
.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>
No tengo mucho conocimiento de las transiciones y animaciones de CSS , así que espero obtener ayuda.
CSS
Para esto, querrá usar algunos elementos nuevos y en su mayoría no compatibles en su CSS para lograr el efecto que desea.
Estos dos elementos son
Tenga en cuenta que esto no funciona en FF según lo solicitado, pero creo que no estará demasiado lejos.
.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%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: shape-outside 1s, clip-path 1s, -webkit-clip-path 1s;
}
.element:hover {
shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
-webkit-clip-path: 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>
<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>
SVG
La mejor manera de garantizar que su página funcione en todos los navegadores sería utilizar un SVG. Este es el tipo de animación que estás buscando.
<svg viewbox="0 0 100 100" width="20%">
<path id="square" d="M0,0 L100,0 L100,100 L0,100z" fill="#e3f5f1">
<animate attributeName="d" attributeType="XML" begin="mouseover" dur="1s" to="M0,0 L100,50 L100,50 L0,100z" fill="freeze" />
<animate attributeName="d" attributeType="XML" begin="mouseout" dur="1s" to="M0,0 L100,0 L100,100 L0,100z" fill="freeze" />
</path>
</svg>