In this tutorial we will see how to create Border Animation with CSS. We have used position property, ::before selector, transform property, animation property and CSS keyframes for this purpose.
There are two ways to animate border elements in CSS: the animation and transition properties.
Animation needs @keyframes, meaning a start and endpoint must be specified. Keyframes are used for multistep animations.
Using transition, the animation must be triggered by something, like a click or :hover.
animation and transition are shorthands for an array of properties that control duration, delay, iteration, etc.
Read More about CSS Animated Progress Bar.
In this Article, We will create different border animations which you can easily use in your day-to-day projects.
1) Rotating Rainbow Border
HTML Code:
<div class="rainbow">
Rainbow border
</div>CSS3 Code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
*, *::before, *::after {
box-sizing: border-box;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.rainbow {
position: relative;
z-index: 0;
width: 400px;
height: 300px;
border-radius: 10px;
padding: 2rem;
overflow: hidden;
}.rainbow::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #399953;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
animation: rotate 4s linear infinite;
}
.rainbow::after {
content: '';
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: white;
border-radius: 5px;
}Demo:
2) Sliding Border Animation
HTML Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./3.style.css">
<title>Document</title>
</head>
<body>
<a href="https://www.instagram.com/sir___alfred">My Instagram : @sir___alfred</a>
<br>
<a href="https://www.linkedin.com/in/Sir-Alfred">My LinkedIn</a>
<button>
Button
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</body>
</html>
CSS Code:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
button {
margin: 10rem 0 0 10rem;
padding: 1.5rem 2.5rem;
border: none;
outline: none;
background-image: linear-gradient(to top left, rgb(57, 176, 255) 60%, #fff);
color: white;
letter-spacing: 0.5rem;
font-size: 2rem;
box-shadow: 1rem 1rem 4rem #808080;
position: relative;
overflow: hidden;
}
button span:nth-child(1) {
position: absolute;
height: 0.2rem;
width: 100%;
background-image: linear-gradient(
to right,
rgb(0, 153, 255) 30%,
rgb(203, 6, 230) 40%,
rgb(57, 176, 255)
);
top: 0;
left: 0;
animation: line1 1s linear infinite;
}
@keyframes line1 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
button span:nth-child(2) {
position: absolute;
height: 100%;
width: 0.2rem;
background-image: linear-gradient(
to bottom,
rgb(0, 153, 255) 30%,
rgb(203, 6, 230) 40%,
rgb(57, 176, 255)
);
top: 0;
right: 0;
animation: line2 1s linear 1.5s infinite;
}
@keyframes line2 {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
button span:nth-child(3) {
position: absolute;
height: 0.2rem;
width: 100%;
background-image: linear-gradient(
to right,
rgb(0, 153, 255) 30%,
rgb(203, 6, 230) 40%,
rgb(57, 176, 255)
);
bottom: 0;
left: 0;
animation: line3 1s linear infinite;
}
@keyframes line3 {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
button span:nth-child(4) {
position: absolute;
height: 100%;
width: 0.2rem;
background-image: linear-gradient(
to bottom,
rgb(0, 153, 255) 30%,
rgb(203, 6, 230) 40%,
rgb(57, 176, 255)
);
top: 0;
left: 0;
animation: line4 1s linear 1.5s infinite;
}
@keyframes line4 {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
Demo:
Leave a Reply