weiß hier jemand, wie ich animierte CSS Pfeile in ein Custom Widget integrieren kann ?
Das hier ist mein Versuch
Bekomme aber nichts angezeigt....
Code: Alles auswählen
- component: Label
config:
class: ="arrow"
stylesheet: >
.arrow{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.arrow span{
display: block;
width: 20px;
height: 20px;
border-bottom: 5px solid #000;
border-right: 5px solid #000;
transform: rotate(135deg);
margin: -25px;
animation: animate 2s infinite;
}
.arrow span:nth-child(2){
animation-delay: -0.2s;
}
.arrow span:nth-child(3){
animation-delay: -0.4s;
}
@keyframes animate {
0%{
opacity: 0;
transform: rotate(135deg) translate(-20px,-20px);
}
50%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(135deg) translate(20px,20px);
}
}
Jörg
