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?

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX