角丸グラデを作って角丸の線を徐々に表示する

「border-image」で枠線をグラデーションで作成しても「border-radius」は効きません。
なので、まず角丸グラデを作成します。

See the Pen
Untitled by mikisekikawa (@_mi)
on CodePen.

角丸グラデの親要素を作成

html

<div class="grad__box js-anime">

</div>

css

.grad__box {
	position: relative;
	background: linear-gradient(92.8deg, #FF8A9F 0.2%, #AF93FF 100%);
	border-radius: 10px;
	padding: 1px;
}

角丸グラデの子要素を作成

次に、角丸グラデをボーダーに見せるために、インナーのブロックを作成します

html

<div class="grad__box js-anime">
	<div class="grad__box__inner js-anime">
		<p class="grad__box__text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
</div>

css

.grad__box__inner {
	background-color: #fff;
	border-radius: 10px;
	padding: 75px;
}

背景と同系色のブロックを疑似要素で作成して上に被せる

続いて、背景色と同色の色で疑似要素を作成し、ボックスの上に「position: absolute」で被せて隠します。

css

.grad__box {
 	max-width: 800px;
  	margin: 30px auto;
	position: relative;
	background: linear-gradient(92.8deg, #FF8A9F 0.2%, #AF93FF 100%);
	border-radius: 10px;
	padding: 1px;

	&::before,
	&::after {
		content: "";
		width: 100%;
		height: 5px;
		background-color: #fff;
		position: absolute;
		transition: .5s linear;
	}

	//上
	&::before {
		right: 0;
		top: -1px;
		transition-delay: 0s;
	}

	//下
	&::after {
		left: 0;
		bottom: 0;
		transition-delay: .7s;
	}
}

.grad__box__inner {
	background-color: #fff;
	border-radius: 10px;
	padding: 75px;

	&::before,
	&::after {
		content: "";
		width: 5px;
		height: 100%;
		background-color: #fff;
		position: absolute;
		transition: .2s linear;
	}

	//左
	&::before {
		left: -1px;
		top: 0;
		transition-delay: 1.2s;
	}

	//右
	&::after {
		right: -1px;
		bottom: 0;
		transition-delay: .5s;
	}
}

jsで画面に入ってきたら要素にclassを追加、cssの記述を追加

jsで「js-anime」という要素が画面に入ってきたら、「is-active」というclassを追加します。

js

function jsAnime() {
    const wHeight = $(window).height();
    const scroll = $(window).scrollTop();

    $('.js-anime').each(function () {
        const targetPosition = $(this).offset().top;

        if(scroll > targetPosition - wHeight + 100) {
            $(this).addClass("is-active");
        }
    });
}

$(window).on('scroll', function(){
    jsAnime();
});

$(window).on('load', function(){
    jsAnime();
});

あとは「is-active」の疑似要素にcssを設定します

css

.grad__box {
  	max-width: 800px;
  	margin: 30px auto;
	position: relative;
	background: linear-gradient(92.8deg, #FF8A9F 0.2%, #AF93FF 100%);
	border-radius: 10px;
	padding: 1px;

	&::before,
	&::after {
		content: "";
		width: 100%;
		height: 5px;
		background-color: #fff;
		position: absolute;
		transition: .5s linear;
	}

	//上
	&::before {
		right: 0;
		top: -1px;
		transition-delay: 0s;
	}

	//下
	&::after {
		left: 0;
		bottom: 0;
		transition-delay: .7s;
	}

	//この箇所を追加
	&.is-active {
		&::before {
			width: 0;
		}

		&::after {
			width: 0;
		}
	}
}

.grad__box__inner {
	background-color: #fff;
	border-radius: 10px;
	padding: 75px;

	&::before,
	&::after {
		content: "";
		width: 5px;
		height: 100%;
		background-color: #fff;
		position: absolute;
		transition: .2s linear;
	}

	//左
	&::before {
		left: -1px;
		top: 0;
		transition-delay: 1.2s;
	}

	//右
	&::after {
		right: -1px;
		bottom: 0;
		transition-delay: .5s;
	}

	//この箇所を追加
	&.is-active {
		&::before {
			height: 0;
		}

		&::after {
			height: 0;
		}
	}
}