不知道如何为我的随机报价生成器设置动画答案

【问题标题】：Not sure how to animate my random quote generator不知道如何为我的随机报价生成器设置动画
【发布时间】：2020-04-26 04:01:14
【问题描述】：

我正在尝试让我的随机报价生成器生成动画。我希望动画看起来像另一张卡片，以相同的样式在这张卡片上翻转，类似于一副卡片。我对动画知之甚少，编码知识也很少，所以我用教程构建了这个，然后进行了一些编辑，以使其完全按照我想要的方式运行。下面是我的代码。有谁知道我如何添加它来完成该功能？这是最后一件事，我需要拥有我想要的卡片功能。

    <!DOCTYPE html>
<html>
<head>
    <title>Quote Gen</title>
</head>
<style type="text/css">
    .cardbutton{
    width: 540px;
    height: 300px;
    border-width: 12px;
    border-style: solid;
    border-color: #02fad1;
    background-color: #fff;
    border-radius: 25px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
<body>
    <h1>Simple Quote Generator</h1>

    <!--
        <button onclick="newQuote()" id="quoteDisplay" class="button">Drinking Game</button>
    -->
<div class="wrapper">
<button onclick="newQuote()" class="cardbutton" style="padding-right:15px; padding-left:15px;">
            <h1 style="font-family:poppins; position: absolute; top:100px; left:50%; margin-left:-83px;">MOST LIKELY TO</h1>
            <p id="quoteDisplay" style="position: relative; top:20px;">Whoever is most likely to, drinks!</p>
        </button>
</div>
    <script src="javascript.js"></script>
</body>
</html>

这是我的 Javascript。


var quotes = [
'Who do you want to make out with the most?',
'If you had to flash just one person in this room, who would it be?',
'If you haven\'t had your first kiss yet, who in this room do you want to have your first kiss with?',
'Of the people in this room, who would you go out with?',
'Describe the most attractive thing about each person in this room.',
'Who here do you think is the best flirt?',
'Who has the best smile?',
'Who has the cutest nose?',
'How about prettiest eyes?',
'Who\'s the funniest in this room?'
]

function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}

【问题讨论】：

标签： javascript css random jquery-animate css-animations

【解决方案1】：

我认为开始研究 HTML 动画的好地方是 CSS animations。如果您需要更具体的内容，请随时提出，但就个人而言，这是我制作动画的技巧。重新启动动画的好地方可能是几年前的 this 文章。

【讨论】：