CSS animate a conical gradient as border image

user_2013856 0
Viewed 1028

I'm trying to animate a conical gradient with css as boder image. I uses a code pan from another developer as boilerplate and tried to change it. His animation is using a custom property to rotate the border image:

div {
    --angle: 0deg;
    width: 50vmin;
    height: 50vmin;
    border: 10vmin solid;
    border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
    
    animation: 10s rotate linear infinite;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}    

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

I tried to animate the actual gradien which did not work. I would like to get work somehow like this:

div {
    --angle: 0%;
    width: 50vmin;
    height: 50vmin;
    border: 10vmin solid;
    border-image: conic-gradient(from 0deg at 50% 50%, rgba(0, 154, 177, 0) 0%, rgba(0, 154, 177, 0) var(--angle), rgba(0, 154, 177, 1) var(--angle), rgba(0, 154, 177, 1) 100%, rgba(0, 154, 177, 0) 100%, rgba(0, 154, 177, 0) 100%) 1;
    animation: 10s rotate linear infinite;
}

@keyframes rotate {
    from {
        --angle: 0%;
    }
    to {
        --angle: 25%;
    }
}

@property --angle {
  syntax: '<angle>';
  initial-value:0%;
  inherits: false;
}

[UPDATE]

By taking the clip-path option my result now is this:

div {
  padding: 10px;
}
a{
  position:relative;
  text-decoration: none;
  padding: 10px 20px;
  background-color: transparent;
  transition: background-color .5s ease-in;
}
a:after{
  content:"";
  position:absolute;
  border:1px solid black;
  top:0;
  left:0;
  width:100%;
  height:100%;
  box-sizing: border-box;
}
a:hover{
  background-color: rgba(0,0,0,.2); 
}
a:hover:after{
  animation: .8s clipping-border ease-in forwards;
}

* {
  box-sizing: border-box;
}

@keyframes clipping-border {
  from {
    clip-path:polygon(0% 100%, 100% 100%,100% 0%,50% 0%,50% 50%,50% 0%,0% 0%);
  }
  40% {
    clip-path:polygon(0% 100%, 100% 100%,100% 0%,100% 0%,50% 50%,0% 0%,0% 0%);
  }
  40.1% {
    clip-path:polygon(0% 100%, 100% 100%,100% 0%,50% 50%,50% 50%,50% 50%,0% 0%);
  }
  60% {
    clip-path:polygon(0% 100%, 100% 100%,100% 100%,50% 50%,50% 50%,50% 50%,0% 100%);
  }
  60.1% {
    clip-path:polygon(0% 100%, 100% 100%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%);
  }
  62% {
    clip-path:polygon(5% 100%, 95% 100%,95% 50%,95% 50%,5% 50%,5% 50%,5% 50%);
    border-width: 1px;
  }
  to {
    clip-path:polygon(5% 100%, 95% 100%,95% 50%,95% 50%,5% 50%,5% 50%,5% 50%);
    border-width: 5px;
  }
}
<div>
    <a href="#">Some button</a>
</div>

css-variables css-animations css
1 Answers

Update your code like below. It's important to select the correct type, you are using percentage and not angle:

div {
  --angle: 0%;
  width: 50vmin;
  height: 50vmin;
  border: 10vmin solid;
  border-image: conic-gradient(transparent var(--angle), rgba(0, 154, 177, 1) 0 100%) 1;
  animation: 10s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 100%;
  }
}

@property --angle {
  syntax: '<percentage>'; /* this one is important */
  initial-value: 0%;
  inherits: false;
}

input[type="checkbox"] {
  position: fixed;
  top: 1em;
  left: 1em;
}

input[type="checkbox"]:after {
  content: 'Toggle Fill';
  white-space: nowrap;
  padding-left: 1.5em;
}

input[type="checkbox"]:checked+div {
  border-image-slice: 1 fill;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  background: #fff;
}

footer {
  text-align: center;
  font-style: italic;
}
<input type="checkbox" />
<div></div>

Or like this:

div {
  --angle: 0deg;
  width: 50vmin;
  height: 50vmin;
  border: 10vmin solid;
  border-image: conic-gradient(from calc(-1*var(--angle)),transparent calc(2*var(--angle)), rgba(0, 154, 177, 1) 0 100%) 1;
  animation: 10s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 180deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

input[type="checkbox"] {
  position: fixed;
  top: 1em;
  left: 1em;
}

input[type="checkbox"]:after {
  content: 'Toggle Fill';
  white-space: nowrap;
  padding-left: 1.5em;
}

input[type="checkbox"]:checked+div {
  border-image-slice: 1 fill;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  background: #fff;
}

footer {
  text-align: center;
  font-style: italic;
}
<input type="checkbox" />
<div></div>

Another idea without CSS variables using clip-path:

div {
  width: 50vmin;
  height: 50vmin;
  position:relative;
}
div::before {
  content:"";
  position:absolute;
  inset:-10vmin;
  padding: 10vmin;
  background:rgba(0, 154, 177, 1);
  -webkit-mask:
    linear-gradient(#000  0 0) content-box,
    linear-gradient(#000  0 0);
   -webkit-mask-composite:destination-out;
   mask-composite:exclude;
  animation: 5s rotate linear infinite;
  clip-path:polygon(0 0, 50% 0,50% 50%,50% 0,100% 0,100% 100%,0 100%);  
}

@keyframes rotate {
  20% {
    clip-path:polygon(0 0, 0 0,50% 50%,100% 0,100% 0,100% 100%,0 100%);  
  }
  75% {
    clip-path:polygon(0 100%, 0 100%,50% 50%,100% 100%,100% 100%,100% 100%,0 100%);  
  }
  100% {
    clip-path:polygon(50% 100%, 50% 100%,50% 50%,50% 100%,50% 100%,50% 100%,50% 100%);  
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

input[type="checkbox"] {
  position: fixed;
  top: 1em;
  left: 1em;
}

input[type="checkbox"]:after {
  content: 'Toggle Fill';
  white-space: nowrap;
  padding-left: 1.5em;
}

input[type="checkbox"]:checked+div:before {
  -webkit-mask:none;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  background: #fff;
}
<input type="checkbox" />
<div></div>

user_86203330
Related