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

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

元素添加初始参数

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

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

//左侧容器

.item-leftContainer {

opacity: 0;

transform: translateX(-100px);

}

//右侧容器

.item-rightContainer {

opacity: 0;

transform: translateX(100px);

}

添加动画数据

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

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

//动画

@keyframes showLeft {

to {

opacity: 1;

transform: translateX(0px);

}

}

@keyframes showRight {

to {

opacity: 1;

transform: translateX(0px);

}

}

@keyframes hideLeft {

to {