CSSanimateの作り方
CSSanimateとは
CSSanimateとは、jQueryやJSライブラリを使わずにwebサイトに動的な動きをプラスするCSS3の技術である
@keyframesについて
CSSanimateには@keyframesを使います
sample.css
@keyframes free_name{
/* 適当な名前でもOK、
日本語も使えるけどあまり使わない方がいい */
0%{
/* アニメーションのはじめ */
}
100%{
/* アニメーションの終わり */
}
}
free_nameの部分はどんな名前でもいい
0%がアニメーションの始まり
100%がアニメーションの終わりと覚えよう
これを実際に動かすにはanimationというプロパティが必要になる下ではboxとい名前のクラスにかけて見る
sample.css
.box{
animation:free_name 5s ease -2s infinite alternate;
}
右から
-
@keyframesの横に書いてあるanimation-nameの値、 - どのくらいの時間をかけて再生をするのか
animation-durationの値、 -
animation-timing-functionの値、 - どのくらい時間が経ったらアニメーションを発動するのか
animation-delayの値、 -
animation-iteration-countの値、 -
animation-directionの値
をスペースで区切って指定する
試しに作ってみよう
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
</div>
</body>
</html>
style.css
.box{
background-color: red;
animation:anime 1s ease-in-out 0s infinite alternate;
height: 50px;
}
@keyframes anime{
0%{width:10px}
100%{width:200px}
}
するとこいう風に動く
Undertaleのような RPGのような体力ゲージのようなアニメーションを作ることができる。
@keyframes animeの部分でアニメーションを指定。はじめは横の長さが10pxだが、最後は200pxになるアニメーションを1sかけて再生する。
ease-in-outで車のように加速して減速するするようにしてある。この部分をease-outにするとだんだんと高速に、ease-inにするとだんだんと減速していく。
infiniteで無限に再生してalternateで行ったり来たりする。
こんな感じ簡単にできるしアレンジを加えることもできる。