如何像jquery一样制作纯javascript动画

嘿，伙计们，我熟悉jQuery，但不熟悉javascript。这里我有一个jQuery渲染的动画，需要使用javascript完成。我被卡住了，坦率地说，我不知道从哪里开始。这是我的名片。这个例子需要用纯javascript呈现。谁能帮我看看javascript是如何工作的

加价

---

提前感谢

我将使用javascript更改类名，并使用CSS执行实际动画。这个更新的fiddle应该会有帮助，但是类目标如下

---

编辑以将链接更新为正确的FIDLE版本，并更新为使用变量

为什么不使用css3动画..它有与浏览器兼容的问题查看jQuery源代码可以为您提供帮助。

<div class="clck">Click</div>
<div class="modal">
    <div class="head">Head</div>
</div>

.modal {
    width: 100px;
    height: 0px;
    position: absolute;
    background: orange;
    bottom: 0;
}
.clck {
    position: absolute;
    padding: 10px 20px;
    border-radius: 5px;
    background: red;
    bottom:0;
    z-index: 2;
    margin:auto;
    cursor: pointer;
}
.head {
    border-bottom: 1px solid black;
    cursor: pointer;
    text-align: center;
    padding: 10px;
}

var c = document.getElementsByClassName('clck')[0];
    c.onclick = function () {
        var m = document.getElementsByClassName('modal')[0];
            m.className = m.className + ' active';
    };