如何将我的javascript的动画过渡到我的CSS中？

Question

我试图通过将其动画值放在css页面中来使我的javascript更具可移植性。我希望这个改变将允许我更新我的CSS页面内的动画值而不是我的javascript。当我试图做出改变时，我似乎无法让它工作。

这是我的工作代码......

// javascript动画div增大大小

$(document).ready(function() {
$(".someContent").on("click", function() {
    $(this).toggleClass("highLight");
    if ($(this).hasClass('highLight')) {
    $(this).animate({"width": "80%", "height": "200px", "opacity": "1"}, "fast");
} else {
    $(this).animate({"width": "30%", "height": "60px", "opacity": "1"}, "fast");
}
});
})

//与上面的javascript一起使用的css

.someContent {
width: 30%;
margin-left: 100px;
border: 2px solid black;
border-radius: 10px;
text-align: left;
padding: 0px;
height: 60px;
}

.highLight {
background: rgba(0, 0, 0, .6);
border: 2px solid black;
overflow: hidden;
-webkit-transition: top 0.2s;
transition: top 0.2s;
}

//我认为这段代码可以改变javascript

$(document).ready(function() {
$(".someContent").on("click", ".vacation", function() {
    $(this).toggleClass("highLight");
});
})

//并且可能以这种方式更改css以处理动画

.someContent {
width: 30%;
margin-left: 100px;
border: 2px solid black;
border-radius: 10px;
text-align: left;
padding: 0px;
height: 60px;
-webkit-transition: top 0.2s;
transition: top 0.2s;
}

.highLight {
background: rgba(0, 0, 0, .6);
width: 60%;
height: 300px;
border: 2px solid black;
overflow: hidden;
-webkit-transition: top 0.2s;
transition: top 0.2s;
}