basti1012.bplaced.net

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?

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>