原生css页面滑动到指定位置开始动画_html/css 滚动到元素位置，显示加载动画

每次滚动到元素时，都显示加载动画，如何添加？

元素添加初始参数

以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。

添加初始数据，默认透明度0、左右分别移动100px。

1 //左侧容器2 .item-leftContainer{

3 opacity:0;

4 transform:translateX(-100px);

5 }

6 //右侧容器7 .item-rightContainer{

8 opacity:0;

9 transform:translateX(100px);

10 }

添加动画数据

在less中添加动画数据。这里只设置了to，也可以省略第1步中的初始参数设置而在动画里设置from。

执行后，透明度由0到1，俩个容器向中间移动100px回到原处。

1 //动画2 @keyframes showLeft{

3 to {4 opacity:1;

5 transform:translateX(0px);

6 }

7 }8 @keyframes showRight{

9 to {10 opacity:1;

11 transform:translateX(0px);

12 }

13 }14 @keyframes hideLeft{

15 to {16 opacity:0;

17 transform:translateX(-1