Home / Questions / 226855
Accepted
qwerty
Asked: 2020-01-03 14:00:21 +0800 CST 2020-01-03 14:00:21 +0800 CST

How to give clip-path a transition?

  • 772

I have a div with a clip-path that forms a triangle, when hovering it becomes a square, but no corresponding animation is made with the transition.

$(".brush_about").hover(function () {
        $(this).children("video")[0].play();
        $('.text-container-about').fadeOut(1000);
    }, function () {
        var el = $(this).children("video")[0];
        el.pause();
        $('.text-container-about').fadeIn(1000);
    });
.brush_container {
  filter: drop-shadow(0px 10px 5px #0003); }
 .brush_container .brush_about {
    position: relative;
    height: 200px;
    width: 200px;
    -webkit-clip-path: polygon(100% 34%, 0 9%, 23% 100%);
    clip-path: polygon(100% 34%, 0 9%, 23% 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease; }
    .brush_container .brush_about .vid_ {
      position: relative;
      height: 100%; }
    .brush_container .brush_about:hover {
      -webkit-clip-path: none;
      clip-path: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="brush_container">
   <div class="brush_about">
     <video class="vid_" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
   </div>
</div>

javascript

1 Answers

  1. Best Answer

    The number of vertices at the beginning and end of the animation must match.

    The first thing is to define the size that the element will have at the end, in this case it will be the size of the video: 320x176and then :hovera polygon is created in it that allows it to be seen in its entirety instead of using clip-path: none.

    On the other hand, since the initial polygon also has to have four vertices in order to animate it, two of them must be in the same position to create a triangle:

    $(".brush_about").hover(function() {
  $(this).children("video")[0].play();
  $('.text-container-about').fadeOut(1000);
}, function() {
  var el = $(this).children("video")[0];
  el.pause();
  $('.text-container-about').fadeIn(1000);
});
    .brush_container {
  filter: drop-shadow(0px 10px 5px #0003);
}

.brush_container .brush_about {
  position: relative;
  height: 176px;
  width: 320px;
  clip-path: polygon(0 0, 85% 33%, 85% 33%, 33% 85%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 0.5s ease;
}

.brush_container .brush_about .vid_ {
  position: relative;
  height: 100%;
}

.brush_container .brush_about:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="brush_container">
  <div class="brush_about">
    <video class="vid_" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
  </div>
</div>

    • 4