Javascript 如何在点击图像后制作CSS动画

我正在尝试使用CSS动画移动图像，但在我单击它们之后。目前，我一进入页面，它们就移动。我希望它是，当你点击任何图像，CSS动画发生。我相信您必须使用一些javascript代码来实现这一点，但我不知道如何实现。我是编程新手，我希望能得到任何帮助。如果你们需要更多信息，请告诉我。谢谢

var doineedtowait=0；
功能myFunction（imgs）{
如果（doineedtowait==0）{
睡眠（1000）；
}
var expandImg=document.getElementById（“expandedImg”）；
expandImg.src=imgs.src；
var imgParagraph=document.getElementById（'img-paragraph'）；
imgParagraph.innerHTML=imgs.getAttribute（“yeep”）；
expandImg.parentElement.style.display=“表格单元格”；
imgParagraph.style.display='表格单元格'；
doineedtowait++；//执行后，我们将doineedtowait更新为+1
//因此，带睡眠1秒的if将不再使用
}
函数睡眠（毫秒）{
const date=date.now（）；
让currentDate=null；
做{
currentDate=Date.now（）；
}while（currentDate-日期<毫秒）；
}
document.getElementById（“myBtn”）.addEventListener（“单击”，显示日期）；
函数displayDate（）{
document.getElementById（“demo”）.innerHTML=Date（）；
}

@font-face{
字体系列：“futuralight”；
src:url（'../Fonts/Futura Light/Futura_Light_regular-webfont.woff2'）格式（'woff2'）、url（'../Fonts/Futura Light/Futura_Light_regular-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“tekoregular”；
src:url（'../Fonts/Teko/Teko-regular-webfont.woff2'）格式（'woff2'），url（'../Fonts/Teko/Teko-regular-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“playfair_displayregular”；
src:url（'../font/Playfair-Display/playfairdisplay-regular-webfont.woff2'）格式（'woff2'），url（'../font/Playfair-Display/playfairdisplay-regular-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“poppinsmedium”；
src:url（'../font/Poppins/Poppins-medium-webfont.woff2'）格式（'woff2'），url（'../font/Poppins/Poppins-medium-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
* {
边际：0px；
填充：0px；
边界：0px；
}
托普纳夫先生{
背景色：rgb（84104217）；
溢出：隐藏；
字体系列：“futuralight”；
字号：900；
}
.topnav a{
浮动：左；
颜色：#F2F2；
文本对齐：居中；
填充：20px21px；
文字装饰：无；
字号：19px；
位置：相对位置；
左：2%；
}
.托普纳夫a:以前{
内容：“；
位置：绝对位置；
宽度：84%；
高度：2倍；
底部：6px；
左：8%；
背景色：白色；
可见性：隐藏；
变换：scaleX（0）；
过渡：所有0.3秒均为0秒；
}
.topnav a:悬停：在{
能见度：可见；
变换：scaleX（1）；
}
.topnav a.活动菜单：之前{
内容：“；
位置：绝对位置；
宽度：84%；
高度：2倍；
底部：6px；
左：8%；
背景色：白色；
能见度：可见；
变换：scaleX（1）；
过渡：所有0.3秒均为0秒；
}
.栏目{
浮动：左；
宽度：25%；
填充：10px；
}
/*在网格内设置图像样式*/
.img列{
不透明度：0.85；
光标：指针；
}
.列img：悬停{
不透明度：1；
}
.全身{
背景色：#EEF0FC；
高度：5000px；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*扩展图像容器*/
#膨胀剂{
宽度：40%；
填充顶部：20px；
左侧填充：20px；
}
/*展开图像文本*/
/*图像段落*/
#img段落{
显示：无；
垂直对齐：顶部；
文本对齐：左对齐；
位置：绝对位置；
高度：400px；
宽度：50%；
背景色：白色；
盒影：02.8px2.2pxRGBA（0,0,0,0,0.034）、06.7px5.3pxRGBA（0,0,0,0.048）、012.5px10pxRGBA（0,0,0,0,0.06）、022.3px17.9pxRGBA（0,0,0,0,0.072）、0441.8px33.4pxRGBA（0,0,0,0.086）、100px80pxRGBA（0,0,0,0.12）；
边界半径：7px；
浮动：对；
右：30px；
顶部：120px；
}
#扩展包装器{
宽度：100%；
}
/*展开图像内的可关闭按钮*/
.行{
位置：绝对位置；
顶部：80px；
}
.yeep1{
位置：相对位置；
左：12px；
顶部：16px；
颜色：rgb（84104217）；
字号：900；
字体大小：40px；
字体系列：“futuralight”；
文字装饰：无；
线高：1；
左：4%；
填充顶部：30px；
}
.yeep2{
颜色：紫色；
}
yeep3先生{
颜色：绿色；
}
yeep4先生{
颜色：蓝色；
}
.yeep1：：之前{
内容：''；
背景色：rgb（84104217）；
宽度：12px；
身高：100%；
位置：绝对位置；
右：100%；
底部：-16px；
}
#专栏1{
位置：相对位置；
-webkit动画：正常的放松；
动画：floatBubble 2s向前移动正常缓减；
}
@-webkit关键帧浮动气泡{
0% {
顶部：00px；
}
100% {
顶部：500px；
}
}
@关键帧浮动气泡{
0% {
顶部：00px；
}
100% {
顶部：500px；
左：50px；
}
}
#专栏2{
位置：相对位置；
-webkit动画：正常的放松；
动画：floatBubble 2s向前移动正常缓减；
}
@-webkit关键帧浮动气泡{
0% {
顶部：00px；
}
100% {
顶部：500px；
}
}
@关键帧浮动气泡{
0% {
顶部：00px；
}
100% {
顶部：500px；
左：50px；
}
}
#第3栏{
位置：相对位置；
-webkit动画：正常的放松；
动画：floatBubble 2s向前移动正常缓减；
}
@-webkit关键帧浮动气泡{
0% {
顶部：00px；
}
100% {
顶部：500px；
}
}
@关键帧浮动气泡{
0% {
顶部：00px；
}
100% {
顶部：500px；
左：50px；
}
}
#专栏4{
位置：相对位置；
-webkit动画：正常的放松；
动画：floatBubble 2s向前移动正常缓减；
}
@-webkit关键帧f
#column1 {
    position: relative;
}

.animate {
    -webkit-animation: floatBubble 2s normal ease-out;
    animation: floatBubble 2s forwards normal ease-out;
}

function myFunction(imgs) {
    document.getElementById('column1').classList.add('animate');

    // your code ...
}