初めの画面表示時にアニメーションさせたい

画面表示時に背景画像の上に太めのボーダーを表示させたいのですが、うまくいきません。
曲がれは以下の通りです。

画像は仮ですが、開始から2秒間は下記のように画面全体に画像を表示

↓
2秒後、画像の上に枠（ボーダー）を表示

↓
※現在はマウスホバーで実装しましたが、動きは以下のような流れで考えております。

上記の流れでページ表示時に白枠を表示させるアニメーションとして実行したいです。
ホバーではなくページ表示の際に自動でボーダーのサイズが変わるようなイメージです。
javascript活用なしで表現できる方法があれば伺いたいです。
もし不可であれば、どのような考え方で実装すればいいかなどアドバイスいただければ幸いです。

現在のコードは下記となります。

haml
1.mainvisual 
2 .mainimage　//画像
3

scss
1.mainvisual {
2    width: 100%;
3    height: 100vh;
4    display: block;
5    position: relative;
6    overflow: hidden;
7    .mainimage {
8      background: url("home1.jpg");
9      width: 100%;
10      height: 100%;
11      display: block;
12      position: absolute;
13      top: 0;
14      left: 0;
15      right: 0;
16      bottom: 0;
17      margin: auto;
18      background-size: cover;
19      background-position: center center;
20    }
21    &::before {
22      content: "";
23      display: block;
24      position: relative;
25      z-index: 10;
26    }
27    &::after{
28      content: '';
29      display: block;
30      position: absolute;
31      bottom: 0;
32      left: 0;
33      height: 100%;
34      width: 100%;
35      transition: border-width 1.2s .5s cubic-bezier(0.215, 0.61, 0.355, 1);
36      border: #FFF 0px solid;
37      box-sizing: border-box;
38      z-index: 0;
39    }
40    &:hover{
41      &::after{
42        border-width: 7rem 8vw;
43      }
44    }
45
46