CSS Border Keyframes
Gibt es eine Möglichkeit die einzelnen variablen (border-top, border-left,...) mittels Keyframe "anzusprechen"?
Also ich will das border-top von oben nach unter animiert wird, danach links und rechts (von oben nach unten) danach border-botton von links und rechts aussen gefüllt werden. Border ist zuerst nicht sichtbar und wird dann durch Keyframes eingeblendet und nach x Sekunden wieder ausgeblendet.
Muss ich einzelne div dafür machen oder geht es auch leichter?
Der hier verwendete Code
<style>
div{
margin:0 auto;
height:300px;
width:300px;
background:yellow;
margin-top:43px;
animation:lauf linear 5s infinite;
border:30px solid yellow;
}
@keyframes lauf{
0%,10%{
border-top:10px solid red;
border-left:0px solid blue;
border-right:10px solid black;
border-bottom:30px solid transparent;
border-radius:0%;
}
10%,19%{border-right:10px solid green;}
20%,29%{border-right:10px solid black;}
30%,39%{border-right:10px solid green;}
40%,49%{border-right:10px solid black;}
50%,59%{
width:500px;
height:100px;
border-radius:50%;
border-top:50px solid blue;
border-left:50px solid blue;
border-right:10px solid green;
border-bottom:30px solid #123456;
}
60%,69%{border-right:10px solid black;}
70%,79%{border-right:10px solid green;}
80%,89%{border-right:10px solid black;}
90%,99%{border-right:10px solid green;}
100%{
border-top:10px solid red;
border-left:0px solid blue;
border-right:10px solid black;
border-bottom:30px solid transparent;
}
}
</style>
<div>Border<br>Animation</div>