CSSで作ったアニメーションが出てくるタイミングを「スクロールして要素が出た時」に設定したいです

HTML
1コード
2```<div class="bgextend bgLRextend"><span class="bgappear">背景色が伸びて出現<br>（左から）</span></div>
3    <div class="bgextend bgRLextend"><span class="bgappear">背景色が伸びて出現<br>（右から）</span></div>
4    <div class="bgextend bgDUextend"><span class="bgappear">背景色が伸びて出現<br>（下から）</span></div>
5    <div class="bgextend bgUDextend"><span class="bgappear">背景色が伸びて出現<br>（上から）</span></div>
6```HTML
7コード

CSS
1コード
2```/*========= レイアウトのためのCSS ===============*/
3
4.bgextend{
5	width: 220px;
6	padding: 20px;
7	margin:0 20px 20px 0;
8	box-sizing:border-box;
9}
10
11/*========= 背景色の動きのCSS ===============*/
12
13/*背景色が伸びて出現 共通*/
14.bgextend{
15	animation-name:bgextendAnimeBase;
16	animation-duration:1s;
17	animation-fill-mode:forwards;
18	position: relative;
19	overflow: hidden;/*　はみ出た色要素を隠す　*/
20	opacity:0;
21}
22
23@keyframes bgextendAnimeBase{
24  from {
25    opacity:0;
26  }
27
28  to {
29    opacity:1;  
30}
31}
32
33/*中の要素*/
34.bgappear{
35	animation-name:bgextendAnimeSecond;
36	animation-duration:1s;
37	animation-delay: 0.6s;
38	animation-fill-mode:forwards;
39	opacity: 0;
40}
41
42@keyframes bgextendAnimeSecond{
43	0% {
44	opacity: 0;
45	}
46	100% {
47	opacity: 1;
48}
49}
50
51/*--------- 左から --------*/
52.bgLRextend::before{
53	animation-name:bgLRextendAnime;
54	animation-duration:1s;
55	animation-fill-mode:forwards;
56    content: "";
57    position: absolute;
58    width: 100%;
59    height: 100%;
60    background-color: #666;/*伸びる背景色の設定*/
61}
62@keyframes bgLRextendAnime{
63	0% {
64		transform-origin:left;
65		transform:scaleX(0);
66	}
67	50% {
68		transform-origin:left;
69		transform:scaleX(1);
70	}
71	50.001% {
72		transform-origin:right;
73	}
74	100% {
75		transform-origin:right;
76		transform:scaleX(0);
77	}
78}
79```ここに言語を入力
80コード

CSSで作ったアニメーションが出てくるタイミングを「スクロールして要素が出た時」に設定したいです。下のjQueryコードを使って実装することは可能でしょうか。
下のjQueryコードを追記し、CSSの「.bgLRextend::before」を「.bgLRextend .blockIn::before」に変更して実行してみましたがうまくいかなかったです。
ご返答頂けると幸いです。

jQuery
1コード
2``` $(function() {
3          $(window).scroll(function() {
4          $(".bgextend").each(function() {
5          var scroll = $(window).scrollTop();
6          var blockPosition = $(this).offset().top;
7          var windowHeihgt = $(window).height();
8          if (scroll > blockPosition - windowHeihgt +300) {
9            $(this).addClass("blockIn");
10          }
11        });
12      });
13    });
14