Javascript 如何自动设置已结构化图像库的动画？

我有一个只在HTML5/CSS3中构建的响应性设计，我在YouTube上看到了一个教程，但在视频中它只是打包的，我错过了我致力于搜索的重要内容，但我没有找到第二部分或另一个视频来解释或同时作为参考，查看频道上的每个教程，但没有成功：/

这是完整的代码，适用于任何移动设备和计算机

img{
最大宽度：100%；
}
#应用程序{
宽度：90%；
身高：85%；
溢出：隐藏；
}
.ui大图像{
位置：绝对位置；
身高：100%；
宽度：100%；
溢出：隐藏；
显示：-网络工具包盒；
显示器：flex；
}
.ui大图像{
宽度：100%；
保证金权利：-100%；
}
.ui大图像img{
-o-对象配合：盖；
对象匹配：覆盖；
-o-物体位置：中心20%；
物体位置：中心20%；
宽度：100%；
身高：100%；
显示：块；
}
.ui缩略图{
位置：绝对位置；
宽度：100%；
底部：0；
左：0；
背景色：#fff；
显示：-网络工具包盒；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
弯曲方向：行；
-webkit盒包：开始；
调整内容：灵活启动；
-webkit框对齐：居中；
对齐项目：居中；
填充：0 1rem；
填料顶部：.5rem；
右：45%；
右侧填充：计算（45%+0.5rem）；
}
.ui缩略图{
显示：块；
保证金权利：.5rem；
填充：.5rem 0；
光标：指针；
}
.表皮{
背景色：#D4A12D；
位置：绝对位置；
底部：0；
高度：.25雷姆；
宽度：100%；
}
.ui缩略图>img{
宽度：自动；
}
.ui内容{
位置：绝对位置；
宽度：40%；
右：5%；
底部：0；
}
.ui文章{
背景#493e56；
颜色：白色；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：拉伸；
对齐项目：拉伸；
溢出：隐藏；
}
.ui文章{
填充：1.5雷姆；
宽度：100%；
保证金权利：-100%；
显示：-网络工具包盒；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
-webkit盒包：中心；
证明内容：中心；
}
.ui段{
保证金：0；
字体大小：.7rem；
线高：1.7；
}
.用户界面导航{
位置：绝对位置；
右：0；
底部：100%；
背景：继承；
}
.ui导航按钮{
背景#493e56；
边界：无；
-webkit外观：无；
-moz外观：无；
外观：无；
填充：.5em；
宽度：2米；
颜色：#FFF；
字体系列：monospace；
-webkit转换：继承；
过渡：继承；
-webkit转换持续时间：300ms；
过渡时间：300ms；
}
.ui导航按钮：悬停，
.ui导航按钮：焦点{
背景：#D4A12D；
大纲：无；
}
.ui导航按钮：激活{
大纲：无；
-webkit转换：translateY（0.25em）；
变换：translateY（0.25em）；
-webkit转换持续时间：100ms；
过渡时间：100ms；
}
.ui标题{
保证金：0；
边缘底部：0.5雷姆；
字号：1rem；
字体大小：正常；
}
.ui标题：之前{
内容：“动画师”；
字体大小：.5rem；
文本转换：大写；
显示：块；
边缘底部：.5rem；
字母间距：1px；
}
/* ---------------------------------- */
.ui大图像{
不透明度：0；
-webkit转换：translateX（-100%）；
转化：translateX（-100%）；
}
.ui大图像img{
-webkit变换：比例（0.85）；
变换：比例（0.85）；
}
.ui大图[数据活动]~.ui大图{
-webkit转换：translateX（100%）；
转化：translateX（100%）；
}
.ui大图像[数据活动]{
不透明度：1；
-webkit转换：translateX（0%）；
转化：translateX（0%）；
}
.ui大图像[数据活动]img{
-webkit转换：规模（1）；
变换：比例（1）；
}
/* ---------------------------------- */
.ui文章{
-webkit转换：translateX（-100%）；
转化：translateX（-100%）；
}
.ui文章：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#D4A12D；
不透明度：1；
-webkit转换持续时间：0.35s；
过渡时间：0.35s；
z指数：1；
}
.ui文章[数据活动]~.ui文章{
-webkit转换：translateX（100%）；
转化：translateX（100%）；
}
.ui文章[数据活动]{
-webkit转换：translateX（0%）；
转化：translateX（0%）；
}
.ui文章[数据活动]：之前{
不透明度：0；
}
/* ---------------------------------- */
.ui缩略图>img{
-webkit过滤器：灰度（100%）；
滤镜：灰度（100%）；
-webkit转换持续时间：0.35s；
过渡时间：0.35s；
}
.ui缩略图：活动>img{
-webkit变换：比例（0.9）；
变换：比例（0.9）；
-webkit转换持续时间：100ms；
过渡时间：100ms；
}
.ui缩略图：焦点{
大纲：无；
}
.表皮{
显示：无；
}
.ui缩略图[数据活动]>img，
.ui缩略图：悬停>图像{
-webkit过滤器：灰度（0%）；
滤镜：灰度（0%）；
}
.ui缩略图[数据处于活动状态].ui表皮{
显示：块；
}
/* ---------------------------------- */
身体{
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
-webkit框对齐：居中；
对齐项目：居中；
背景色：#1A130C；
}
*,
*：之前，
*：之后{
框大小：边框框；
位置：相对位置；
-webkit转换属性：不透明度，-webkit转换，-webkit过滤器；
转换属性：不透明度，-webkit转换，-webkit过滤器；
过渡属性：变换、不透明度、过滤器；
转换属性：变换、不透明度、过滤器，-webkit变换，-webkit过滤器；
-webkit转换持续时间：0.7s、0.7s、0.7s；
过渡时间：0.7s、0.7s、0.7s；
-webkit过渡计时功能：立方贝塞尔（0.5,0.5,1）；
过渡计时功能：立方贝塞尔（0.5,0.5,1）；
}
身体，
html{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-article[data-active] {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

function setThumbnailAction() {
  var uiThumbnailElements = document.getElementsByClassName("ui-thumbnail");
  var i, len = uiThumbnailElements.length, thumbnail;

  itemsInGallery = len - 1;

  for (i = 0; i < len; i++) {
    thumbnail = uiThumbnailElements[i];
    thumbnail.onclick = function() {
      key = this.dataset.key;
      showImage();
    }
  }
}

function showImage() {
    restoreGallery("ui-big-image");
    restoreGallery("ui-article");
    restoreGallery("ui-thumbnail");
    var image = document.querySelector("div.ui-big-image[data-key=\"" + key + "\"]");
    image.dataset.active = "true";

    var article = document.querySelector("article.ui-article[data-key=\"" + key + "\"]");
    article.dataset.active = "true";

    var uiThumbnail = document.querySelector("div.ui-thumbnail[data-key=\"" + key + "\"]");
    uiThumbnail.dataset.active = "true";
}