animated border

how to create a rainbow animated border

Good designs are result of consistent practice and dedication, there might be times where you want a certain designs out of simple imagination but actualizing it in reality is the real deal.  A very good example of such design is an animated border, for a minute you might wonder, what for? , why an animated border? , However, its not a complicated as it may look right now, enough of the yapping, let’s learn how to make a rainbow animated border.

Example of an animated border

Assuming this is your HTML

<body>

<div class=”rainbow”>Example</div>

</body>

And you want a rainbow animated border round the text

Then, your css goes like this

CSS

/*animate the background gradient position, use vh so that start/end syncs up viewport horizontal*/

@keyframes rainbow {

from {

background-position: -100vh 0;

}

to {

background-position: 100vh 0;

}

}

/*compatibility*/

@-moz-keyframes rainbow {

from {

background-position: -100vh 0;

}

to {

background-position: 100vh 0;

}

}

@-webkit-keyframes rainbow {

from {

background-position: -100vh 0;

}

to {

background-position: 100vh 0;

}

}

@-ms-keyframes rainbow {

from {

background-position: -100vh 0;

}

to {

background-position: 100vh 0;

}

}

@-o-keyframes rainbow {

from {

background-position: -100vh 0;

}

to {

background-position: 100vh 0;

}

}

.rainbow {

padding: 15px 20px;

font-size: 40px;

border: double 0.3em transparent;

border-radius: 10px;

color: white;

font-family: “Courier New”, Courier, monospace;

/*added a colourstop here, without the third colourstop you will get a hard edge*/

background: linear-gradient(rgb(233, 174, 120), rgb(179, 138, 138)),

repeating-linear-gradient(

to right,

rgb(82, 82, 209),

rgb(235, 50, 235),

rgb(82, 82, 209)

);

background-origin: border-box;

background-clip: content-box, border-box;

animation-name: rainbow;

animation-duration: 3s;

/*set animation to continue forever, and to move at a single rate instead of easing*/

animation-iteration-count: infinite;

animation-timing-function: linear;

}

If try run the code above, you will definitely have an animated border round the example text as seen below.

animated border

You can even make it more interesting by add the following HTML and CSS code to see a more nice and good looking design.

Another Example of animated border

Html

<div class=”rainbow”>

<h2>simple imagination, great result</h2>

</div>

Css

.rainbow {

height: 30%;

width: 80%;

border-radius: 27px;

background: #e0e0e0;

box-shadow: 5px 5px 0px #bebebe, -5px -5px 0px #ffffff;

/*To create the animating border  */

background: linear-gradient(rgb(233, 174, 120), rgb(179, 138, 138)),

repeating-linear-gradient(

to right,

rgb(82, 82, 209),

rgb(235, 50, 235),

rgb(82, 82, 209)

);

background-origin: border-box;

background-clip: content-box, border-box;

animation-name: rainbow;

animation-duration: 3s;

/*set animation to continue forever, and to move at a single rate instead of easing*/

animation-iteration-count: infinite;

animation-timing-function: linear;

}

h2 {

width: 80%;

text-align: center;

margin: 0 auto;

margin-top: 30px;

font-size: 1.5rem;

letter-spacing: 4px;

word-spacing: 4px;

line-height: 40px;

color: white;

text-transform: uppercase;

}

animated border

And your result should look like the one above. forget about the many lines of code added, the main idea is to create an animated border round our element.

Leave a Comment

Your email address will not be published. Required fields are marked *