CODEWITHSUNDEEP
csscss-animations
Adnan Kayıkçı
Adnan Kayıkçı

Reputation: 178

CSS Border Transparency Animation

i'm new in css. Here is my code:

.border1{
  border-bottom: 5px solid rgb(255, 0, 0,0.5);
  animation-name: animation;
  animation-duration: 4s;
 }
.border2{
  border-bottom: 5px solid rgb(0, 255, 0,0.5);
  animation-name: animation;
  animation-duration: 4s;
 }

And animation:

@keyframes animation {
  from {border-bottom-color: rgba(0, 255, 0, 0);}
  to {border-bottom-color: rgba(0, 255, 0, 0.5);}
}

This animation only works good with border2 because border2 is green but border1 is red. I don't want to write an animation keyframe for every border i have in code.

So i want to do something like this:

@keyframes animation {
  from {border-bottom-color: rgba(, , , 0);}
  to {border-bottom-color: rgba(, , , 0.5);}
}

Just changing the opacity and leaving the color default. Please tell me how if it's possible.

Upvotes: 1

Views: 669

Answers (1)

Temani Afif
Temani Afif

Reputation: 273031

Use CSS variables:

.border {
  border-bottom: 5px solid rgba(var(--c),0.5);
  animation: animation 4s infinite alternate linear;
  height:20px;
}

.border1{
  --c:255,0,0;

 }
.border2{
  --c:0,255,0;
 }

@keyframes animation {
  from {border-bottom-color: rgba(var(--c), 0);}
  to {border-bottom-color: rgba(var(--c), 0.5);}
}
<div class="border border1"></div>

<div class="border border2"></div>

Another idea is to use pseudo element to simulate the border then you can animate opacity:

.border {
  position:relative;
  height:20px;
}
.border:before {
  content:"";
  position:absolute;
  bottom:0px;
  left:0;
  right:0;
  height:5px;
  animation: animation 4s infinite alternate linear;
}

.border1:before{
  background:red;

 }
.border2:before{
  background:green;
 }

@keyframes animation {
  from {opacity:0;}
  to {opacity:0.5;}
}
<div class="border border1"></div>

<div class="border border2"></div>

Upvotes: 2

Related Questions