Example 1

color-a: #fff
color-b: #000
speed: 550ms
animation-direction: 1
animation-timing-function: linear
border-width: 2px
size-a: 2px
size-b: 2px

Example 2

color-a: rgba(0, 255, 221, .75)
color-b: transparent
speed: 800ms
animation-direction: 1
animation-timing-function: ease-in-out
border-width: 1px
size-a: 16px
size-b: 3px

Example 3

color-a: #0ff
color-b: transparent
speed: 450ms;
animation-direction: -1
animation-timing-function: linear
border-width: 1px
size-a: 4px
size-b: 3px

Example 4

color-a: #f00
color-b: #111
speed: 400ms;
animation-direction: 1
animation-timing-function: linear
border-width: 1px
size-a: 6px
size-b: 9px

Example 5

color-a: #fc0
color-b: #111
speed: 999ms;
animation-direction: -1
animation-timing-function: steps(6)
border-width: 2px
size-a: 8px
size-b: 4px

Example 6

color-a: #fff
color-b: #111
speed: 750ms;
animation-direction: 1
animation-timing-function: linear
border-width: 1px
size-a: 5px
size-b: 2px

Example 7

color-a: #505050
color-b: #fff
speed: 300ms;
animation-direction: -1
animation-timing-function: linear
border-width: 2px
size-a: 4px
size-b: 4px

Example 8

color-a: #f0f
color-b: transparent
speed: 400ms;
animation-direction: 1
animation-timing-function: linear
border-width: 1px
size-a: 4px
size-b: 8px

Example 9

color-a: rgb(187, 47, 40)
color-b: rgb(67 46 45)
speed: 200ms;
animation-direction: -1
animation-timing-function: linear
border-width: 1px
size-a: 3px
size-b: 2px

Example 10

color-a: #fff
color-b: #111
speed: 250ms
animation-direction: 1
animation-timing-function: linear
border-width: 1px
size-a: 4px
size-b: 4px