Javascript 如何添加带有CSS关键帧的翻转卡动画？

我制作了一个21点游戏。现在我要庄家的牌，当它们出现时，从后面翻转到前面。我在CSS中构建了关键帧，但无法将其应用于JS文件

JAVASCRIPT

function deal() {
    if (newgame == true) {
        var random = Math.floor((Math.random() * 13));
        var UserCards = document.getElementById('user');
        var card = document.createElement('img');
        card.setAttribute("width", 450);
        card.setAttribute("src", images[random]);
        UserCards.appendChild(card);
        UserCards.className ='myDIV';
        checkUserScore += cards[random];  
        if (checkUserScore > 21)
        {
            UserCards.appendChild(card);
            alert("you hit more than 21");
        }          
    }

编辑：OP在粘贴代码时是否遗漏了函数右大括号，或者这是一个实际错误

CSS

<style>
        .myDIV {
            margin: auto;
            border: 1px solid black;
            width: 500px;
            height: 500px;
            background-image:url(media/cards/UpsideDown.jpg);
            color: white;
            animation: mymove 5s infinite;
        }

        @keyframes mymove {
            50% {
                transform: rotate(360deg);
                background-image:url(media/cards/QC.jpg);
            }
        }
</style>

myDIV先生{
保证金：自动；
边框：1px纯黑；
宽度：500px；
高度：500px；
背景图片：url（media/cards/UpsideDown.jpg）；
颜色：白色；
动画：mymove 5s无限；
}
@关键帧mymove{
50% {
变换：旋转（360度）；
背景图片：url（media/cards/QC.jpg）；
}
}

您搜索过了吗

正文{
字体系列：Arial、Helvetica、无衬线字体；
}
.翻盖卡片{
背景色：透明；
宽度：300px；
高度：300px；
透视图：1000px；
}
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.6s；
变换样式：保留-3d；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
}
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}
.翻转卡正面，
.把卡片翻回去{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.翻转卡正面{
背景色：#bbb；
颜色：黑色；
}
.把卡片翻回去{
背景色：#2980b9；
颜色：白色；
变换：旋转（180度）；
}

用文字翻转卡片
将鼠标悬停在下图上：
无名氏
建筑师和工程师

我们爱那个家伙

请显示您的标记。没有它，JS和CSS都没有任何意义。是的，我看到了你发布的内容，我不知道如何在不点击的情况下让卡片自己翻转，我希望它在添加图像后翻转