CSS Border Wrap Around Effect with Delay & Transitions

Question

I am trying to recreate the border effect exactly that is on "Quote of the Day" here:

https://www.forbes.com/ (please scroll down the page)

So it is delayed and wraps around.

https://jsfiddle.net/benchesters/w8djLcb7/3/

The problem is I cannot get any of the animations working and I have no idea why, despite using the same html and css.

.qotd-section.animated-borders .border-top-1,.qotd-section.animated-borders .border-top-2{
    -webkit-transition-delay:0s;
    -o-transition-delay:0s;
    transition-delay:0s
}
.qotd-section.animated-borders .border-left,.qotd-section.animated-borders .border-right{
    -webkit-transition-delay:.7s;
    -o-transition-delay:.7s;
    transition-delay:.7s
}
.qotd-section.animated-borders .border-bottom-1,.qotd-section.animated-borders .border-bottom-2{
    -webkit-transition-delay:1.4s;