Hi everyone
I am trying to create an animated border and am succeeding in codepen (https://codepen.io/AleXSR700/pen/PoXroNK) but failing in HA.
In the editor preview I can see the hover effect, so it is not all broken. I am thinking that the problem might be that the effect is outside the visible area of the editor and/or card.
Test 1 (only hover working)
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
card_mod:
style: |
ha-card::before,
ha-card::after,
ha-card {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
ha-card {
width: 200px;
height: 200px;
margin: auto;
background: no-repeat 50%/70% rgba(0, 0, 0, 0.1);
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
ha-card::before,
ha-card::after {
content: "";
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
ha-card::before {
animation-delay: -4s;
}
@keyframes clipMe {
0%,
100% {
clip: rect(0px, 220px, 2px, 0px);
}
25% {
clip: rect(0px, 2px, 220px, 0px);
}
50% {
clip: rect(218px, 220px, 220px, 0px);
}
75% {
clip: rect(0px, 220px, 220px, 218px);
}
}
ha-card:hover::after, .ha-card:hover::before {
background-color: rgba(255, 0, 0, 0.3);
}
Test 2 where I tried to use relative positioning (only hover working)
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
card_mod:
style: |
ha-card {
position: relative;
width: 200px;
height: 200px;
margin: auto;
background: no-repeat 50%/70% rgba(0, 0, 0, 0.1);
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
ha-card::before,
ha-card::after {
content: "";
position: absolute;
z-index: -1;
top: -5%;
bottom: -5%;
left: -5%;
right: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
ha-card::before {
animation-delay: -4s;
}
@keyframes clipMe {
0%,
100% {
clip-path: polygon(0% 0%,100% 0%,100% 2%,0% 2%);
}
25% {
clip-path: polygon(0% 0%,2% 0%,2% 100%,0% 100%);
}
50% {
clip-path: polygon(98% 100%,100% 100%,100% 2%,98% 2%);
}
75% {
clip-path: polygon(0% 100%,100% 100%,100% 98%,0% 98%);
}
}
ha-card:hover::after, .ha-card:hover::before {
background-color: rgba(255, 0, 0, 0.3);
}
Test 3 (there is actually an animation inside the card
show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: sun.sun
card_mod:
style: |
ha-card::before,
ha-card::after,
ha-card {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
ha-card {
width: 200px;
height: 200px;
margin: auto;
background: no-repeat 50%/70% rgba(0, 0, 0, 0.1);
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
ha-card::before,
ha-card::after {
content: "";
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px;
animation: clipMe 8s linear infinite;
}
ha-card::before {
animation-delay: -4s;
}
@keyframes clipMe {
from {
clip-path: polygon(0% 100%,100% 100%,100% 100%,100% 100%);
transform-origin: bottom left;
transform: rotate(0deg);
}
to {
clip-path:polygon(0% 100%,100% 100%,100% calc(100% - 2px),0 calc(100% -2px));
transform-origin: bottom left;
transform: rotate(360deg);
}
}
ha-card:hover::after, .ha-card:hover::before {
background-color: rgba(255, 0, 0, 0.3);
}
Test 3 animation: