vovを使ってCSSアニメーションをやってみる
2024.12.06 09:00
2024.12.05 16:52
CSS3のアニメーションを使いたいと思い、ライブラリを調べたところ、
「vov」というのを見つけたので試してみました。
https://vaibhav111tandon.github.io/vov.css
ライブラリを読み込んで、
対象の要素に所定のclassを貼り付けるだけという超簡単仕様！
こんな感じでゆっくり表示されます。
コードはこんな感じ。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/gh/vaibhav111tandon/vov.css@latest/vov.css" rel="stylesheet" type="text/css">
<title></title>
<style type="text/css">
.box1 {
background-color: blue;
height: 300px;
width: 300px;
}
.box2 {
background-color: red;
height: 300px;
width: 300px;
}
.box3 {
background-color: yellow;
height: 300px;
width: 300px;
}
.box4 {
background-color: orange;
height: 300px;
width: 300px;
}
</style>
</head>
<body id="top">
<div class="box1 vov fade-in-down slowest">
上から下に表示
</div>
<div class="box2 vov fade-in-left slowest">
左から右に表示
</div>
<div class="box3 vov fade-in-right slowest">
右から左に表示
</div>
<div class="box4 vov fade-in-up slowest">
下から上に表示
</div>
</body>
</html>たとえば一番上であれば「box1」に「vov fade-in-down slowest」というクラスをつけるだけです。
「vov」でアニメーションを有効にし、
「fade-in-down」で「上から降りながら表示される」という動きをつけ、
「slowest」で「速さを設定」します。
動きは「fade-out-bottom-left」や「fade-out-up」などで、
速さの指定は「fast」「faster」「fastest」、「slow」「slower」「slowest」などで設定可能。
詳しくはこちらで細かく書いてあります。