Border Animation using CSS

 

Hello friends, I am sharing another CSS animation examples snippet based on pure CSS border animation in this blog. Previously I have shared many snippets on bootstrap, CSS animation examples, JavaScript. Would you mind making sure to check those as well?  For better understanding, Please follow the below tutorial before downloading the code.

I hope you have watched the whole video. In the snippets, I have used a Bootstrap column grid to create three different boxes. I have provided a div named 'img-area' in each box, which will contain the image div. I have given it another name, 'line,' to create the border animation in the background. I have used a linear-gradient background color for the line div and set an animation property for it. Later used CSS keyframes animation to create the animation on hover. Without further explanation, I am providing the code below.

You may like this:

• Homepage design with Bootstrap and Animate CSS
• Pure CSS Animated Background

Pure CSS Border animation [ Source Code]:

First, create an HTML file with and .html extension and CSS file with a.css extension. after that, link the CSS file in the HTML. Please copy the code below and paste it into the corresponding files and save it.

ADD HTML

<div class="box-area"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="img-area line"> <div class="single-img" style="background-image: url(https://i.postimg.cc/XqDjXNvr/1.jpg);"></div> </div> </div> <div class="col-md-4"> <div class="img-area line"> <div class="single-img" style="background-image: url(https://i.postimg.cc/RCb47FMF/2.jpg);"></div> </div> </div> <div class="col-md-4"> <div class="img-area line"> <div class="single-img" style="background-image: url(https://i.postimg.cc/V6ZQWGPT/3.jpg);"></div> </div> </div> </div> </div> </div>


ADD CSS:

.box-area { padding: 10% 0; } .img-area .single-img { width: 361px; height: 350px; } .line { box-shadow: 0 2px 20px #000; transition: 0.5s; background: linear-gradient(-45deg, transparent 40%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.8) 50%, transparent 50%); background-color: rgba(255, 255, 255, 0.3); background-size: 400% 400%; background-position: 90% 90%; animation: animate 2s ease infinite; } .line .single-img { background-size: auto 100%; background-position: center; transition: .2s; } .line:hover .single-img { background-size: auto 100%; } .img-area:hover .single-img { width: 348px; } .line:hover { padding: 6px; } @keyframes animate { to { background-position: 25% 25%; } }


I hope you have created your version of the project. If you like the snippet, then please follow us on our social media profiles to stay connected with this blog. Thank you for stopping by.