Border animation in CSS -Part 1

Published: 18 December 2021
on channel: Masters In Web Design

Border animation in CSS

/*CSS*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #8bc34a;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.border-anim{
width: 400px;
height: 600px;
background: #ffc107;
position: relative;
}
.border-anim::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 15%;
height: 10%;
border-top: 3px solid #FFF;
border-left: 3px solid #FFF;
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
}
.border-anim::after{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 15%;
height: 10%;
border-bottom: 3px solid #FFF;
border-right: 3px solid #FFF;
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
}
.border-anim:hover::before, .border-anim:hover::after{
width: 99%;
height: 99%;
}

Watch video Border animation in CSS -Part 1 online, duration hours minute second in high quality that is uploaded to the channel Masters In Web Design 18 December 2021. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 11 times and liked it 2 visitors.

653