Effect preview

Before realizing the transition effect, you need to understand the clip-path attribute of css, which is the core attribute to realize the transition. The clip-path attribute can use the clipping method to create the displayable area of ​​the element. The part inside the area is displayed, and the part outside the area is hidden. That is to say, the cropped size will not exceed the actual size, the excess will be hidden, and the actual size will be displayed.
The attributes of clip-path are as follows:

Attributes	illustrate
inset()	Four parameters, top right bottom left, define an inset rectangle.
circle( )	Define a circle, Syntax: circle(x-axis (size) at x-axis coordinate y-axis coordinate); after at is the cutting position, the first parameter is left and right, the second parameter is up and down
ellipse();	Define an ellipse (using two radii and a center location). Syntax: ellipse(x-axis offset y-axis offset at x-axis coordinate y-axis coordinate)
polygon();	Define a polygon (using an SVG fill rule and a set of vertices). Four parameters, up, right, down, left, the first parameter of each position represents the left and right offset, and the second parameter represents the up and down offset
path();	Defines an arbitrary shape (defined with an optional SVG fill rule and an SVG path).

Please see the documentation for details: https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

Here the circle() attribute is used as a demonstration. Circle can define a circle (using a radius and a center position). The first parameter is the radius, which is the size, and the second parameter is the center position, which is the x and y axes. coordinate.

After understanding this, you can start writing the transition animation. First define the original display element vue.svg. When the mouse moves into the vue.svg element, the transition animation vite.svg is displayed, and the transition animation (vite. svg) to cover the original animation (vue.svg).

<div class="fillAnimation" @mouseenter="touch">
     <img src="../assets/vue.svg" style="width:200px;" alt="">
        
     <!-- animation after transition -->
     <div :class="touchStatus ? 'touch clipPathAnimation' : 'clipPathAnimation'">
          <img src="../assets/vite.svg" style="width:200px;" alt="">
     </div>
</div>

// js part
// mouseover
const touchStatus = ref(false)
const touch = () => touchStatus.value = true

.fillAnimation{
    width: 300px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-color: cadetblue;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.clipPathAnimation{
    width: 300px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-image: linear-gradient(to right, #12c2e9 , #c471ed);
    clip-path: circle(0px at 0 0px);  /*The initial size is 0, not displayed*/
}
/*mouseover trigger*/
.touch{
    animation: clipPathAn 2s forwards;  /* forwards Keep the effect at the end of the animation */
}
@keyframes clipPathAn {
    from { clip-path: circle(0px at 0 0px);  }
    to { clip-path: circle(200% at 0 200px); }  /* At the end, the size becomes 200%, which is hidden beyond the actual size, so the original size displayed here is still 100%. The reason for changing to 200% here is that the anchor point is on the far left, and 100% can only display half of the original image. , so it should be written as 200%. */
}

border animation

Another implementation of clip-path: border animation

The clip-path will only be displayed in the clipped area. Use animation to dynamically modify the value of the clip-path to achieve the visual effect of element movement. Effect diagram:

After achieving this effect, add a mask above the animation to cover the unnecessary parts to realize the border animation.

<div class="borderLine">
     <div class="borderCenter">
         <div class="innerButton">button</div>
     </div>
</div>

.borderLine{
    width: 150px;
    height: 70px;
    margin: 30px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    /* Inner Box - Masks parts not needed for animation */
    .borderCenter{
       position: absolute;
       top: 2px;
       left: 2px;
       width: calc(100% - 4px - 12px);
       height: calc(100% - 4px - 12px);
       text-align: center;
       border:6px solid white;
       border-radius: 4px;
       background-color: #fff;
       z-index: 10;
        .innerButton{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            color: #fff;
            border-radius: 4px;
            background-color: #15c0e9;
        }
    }

    &::before,
    &::after
    {
        content: "";
        display: inline-block;
        width: 150px;
        height: 70px;
        position: absolute;
        background-color: #15c0e9;
        animation: insetRound 3s infinite linear;  /* linear An animation with the same speed from start to finish */
    }
    &::after{
        animation: insetRound 3s infinite -1.5s linear;   /* insetRound Animation lasts 3s, infinite loop advances 1.5s (negative number advances, positive number delays) and plays at a constant speed */
    }
}

@keyframes insetRound {
    0%,100%{
        clip-path: inset(0 0 96% 0); /* x Axis upper left */
    }
    25%{
        clip-path: inset(0 0 0 98%);  /* x Axis upper left */
    }
    50%{
        clip-path: inset(96% 0 0 0);  /* x Axis upper left */
    }
    75%{
        clip-path: inset(0 98% 0 0); /* x Axis upper left */
    }

}

box-shadow implementation: border animation

Similar border animation effects can also be achieved using box-shadow.

.box{
   box-show : 0px 0px 0px 0px #ccc;
}

box-show has 5 parameters

• The first parameter: Control the left and right positions of the element shadow
• The second parameter: Control the upper and lower positions of the element shadow
• The third parameter: Controls the blurring of element shadows
• The fourth parameter: Control the size of the element shadow (zoom in & zoom out)
• The fifth parameter: set the color of the element shadow

Move the position where the shadow is displayed at an oblique angle, and hide the part beyond the red border.

<div class="borderShow">
     <div class="borderShowCenter">button</div>
</div>

.borderShow{
    width: 150px;
    height: 70px;
    margin: 30px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid red;
    display: flex;
    justify-content: space-around;
    align-items: center;

    &::before,
    &::after
    {
       content: '';
       position: absolute;
       top: 2px;
       left: 2px;
       width: calc(100% - 4px - 12px);
       height: calc(100% - 4px - 12px);
       text-align: center;
       border:6px solid white;
       border-radius: 4px;
       background-color: #fff;
       animation: showRound 3s infinite linear;
    }

    &::after{
        animation: showRound 3s infinite -1.5s linear; /* insetRound Animation lasts 3s, infinite loop advances 1.5s (negative number advances, positive number delays) and plays at a constant speed */
    }

    /* inner box */
    .borderShowCenter{
       position: absolute;
       top: 8px;
       left: 8px;
       width: calc(100% - 4px - 12px);
       height: calc(100% - 4px - 12px);
       text-align: center;
       border-radius: 4px;
       display: flex;
       justify-content: space-around;
       align-items: center;
       color: #fff;
       background-color: #c073ed;
       z-index: 10; /* override pseudo-element */
    }
}
@keyframes showRound {
    /* box-shadow : x axis y-axis blur zoom color; */
    0%,100%{
        box-shadow: 0px -66px 0px 0px #c073ed; /* up */
    }
    25%{
        box-shadow: 146px 0px 0px 0px #c073ed; /* right */
    }
    50%{
        box-shadow: 0px 66px 0px 0px #c073ed; /* next */
    }
    75%{
        box-shadow: -146px 0px 0px 0px #c073ed; /* left */
    }
}

Case source code: https://gitee.com/wang_fan_w/css-diary

If you think this article is helpful to you, please like, bookmark and forward~