CODEWITHSUNDEEP
htmlcsscss-transitionspolygon
singmotor
singmotor

Reputation: 4180

How to transition from a triangle to a circle

I have some images masked with clip-paths in CSS to show equilateral triangles. I want them to expand and become circles on hover.

Here's my CSS:

.tri-Up {
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    transition: 2s;
}
a:hover .tri-Up,
a:focus .tri-Up {
  -webkit-clip-path:circle(50%,50%,75%);
  clip-path: circle(50%,50%,75%);
}

And my HTML:

<div class="col-sm-4 portfolio-item dontwantpadding">
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                        <img src="img/photo.png" class="tri-Up img-responsive" alt="">
                    </a>
                </div>

And a jsfiddle, where the transition isn't working: http://jsfiddle.net/kjaog69j/

I've found a bit of stuff online, but nothing going from triangle to circle, much less expanding. I've extensively googled and been through "animating CSS shapes, W3Schools on CSS transitions, CSStricks, and the like. Any suggestions or help would be much appreciated.

Thanks!

Upvotes: 1

Views: 2508

Answers (3)

vals
vals

Reputation: 64164

An approach trying to push it to the limit. This is of course experimental code, since it is just supported in Chrome, as far as I know, and somehow in a buggy way.

clip path can not be animated if you don't make it easy for the browser. That is, the paths must be somehow equivalents. One way to achieve this in you case would be to transform a circle to a very wide ellipse. And defining the circle as an ellipse, where both radii are equal.

But this can give us only one side of the triangle, so we will need 3 nested elements, each rotated 120 deg, to get the triangle

div {
  position: absolute;
  transition: all 1s;
}

.container {
  width: 540px;
  height: 540px;
  left: 50px;
  top: 50px;
  overflow: hidden;

}
.test1 {
  width: 1600px;
  height: 1600px;
  -webkit-transform: rotate(120deg);
  top: -544px;
  left: -544px;
  -webkit-clip-path: ellipse( 1000px 196px at 800px 735px);
  z-index: 10;
}

.container:hover .test1 {
   -webkit-clip-path: ellipse( 256px 256px at 800px 800px); 
}


.test2 {
  width: 1100px;
  height: 1100px;
  top: 250px;
  left: 250px;
  -webkit-transform: rotate(120deg);
  -webkit-clip-path: ellipse( 1000px 196px at 550px 485px);
}

.container:hover .test2, .test2:hover {
   -webkit-clip-path: ellipse( 256px 256px at 550px 550px); 
}

.test3 {
  /* display: none; */
  width: 750px;
  height: 750px;
  top: 175px;
  left: 175px;
  -webkit-clip-path: ellipse( 1000px 196px at 375px 310px);
  -webkit-transform: rotate(120deg);
  background: url(http://placekitten.com/628/800);
}

.container:hover .test3, .test3:hover {
   -webkit-clip-path: ellipse( 256px 256px at 375px 375px); 
}
<div class="container">
<div class="test1">
<div class="test2">
<div class="test3">
</div>
</div>
</div>
</div>

Upvotes: 1

Harsh
Harsh

Reputation: 1695

You need to change clip-path for circle.

Modified CSS:

.tri-Up {
    height: 100px;
    width: 100px;
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    transition: 2s;
}


a:hover .tri-Up,
a:focus .tri-Up {

-webkit-clip-path: circle(50px at 50px 50px);
}

JSfiddle: http://jsfiddle.net/kjaog69j/1/

Although would advise to not use clip-path but use simple height, width and border-radius for defining polygon/shapes.

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

Change 

a:hover .tri-Up,
a:focus .tri-Up {
  -webkit-clip-path:circle(50%,50%,75%);
  clip-path: circle(50%,50%,75%);
}

to this 

a:hover .tri-Up,
a:focus .tri-Up {
  -webkit-clip-path: circle(50px at 50px 50px);
  clip-path: circle(50px at 50px 50px);
}

here is a demo

.tri-Up {
  height: 100px;
  width: 100px;
  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  transition: 2s;
}

a:hover .tri-Up,
a:focus .tri-Up {
  -webkit-clip-path: circle(50px at 50px 50px);
  clip-path: circle(50px at 50px 50px);
}
<div class="col-sm-4">
  <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">

    <img src="http://placehold.it/560x484" class="tri-Up img-responsive" alt="">
  </a>
</div>

Upvotes: 1

Related Questions