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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!