CSSでここまでできる!jQuery不要のCSSアニメーションまとめ

今回はjQueryを使わずともjQueryと並べるくらいのCSSアニメーションをまとめてみました。

CSSアニメーションを取り入れることでサイトのデザインに幅が出るし、よりオシャレにすることができるでしょう。

 

透明のテキストの下で画像を移動させる

まるでアニメのように透明のテキストの後ろで画像が横に流れていくアニメーションです。

background-clipで画像をテキストでくり抜き、animationを使って画像を左に移動させます。

HTML

<div class="type-mask">
<h2>サンプルテキスト</h2>
</div>

 

CSS

.type-mask h2{
-webkit-animation: scrollmask 10s ease 1.5s infinite;
-webkit-background-clip: text;
background-image: url(img/sample.jpg);
color: transparent;
font-size: 80px;
}
@-webkit-keyframes scrollmask {
0% {background-position: 0 0;}
100% {background-position: 100% 0;}
}

 

映画のように文字を手前から後ろに遠近感を出して動かす

映画の最後のスタッフロールのような感じで、手前から文字を奥に向かって流すアニメーションです。

rotateXでX軸回転させ、prespectiveを使うことで文字に奥行きを出すことができます。

文字だけでなく画像もスクロール可能です。

HTML

<div class="type-pers-parent">
<div class="type-pers-child">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor nisl id est auctor mollis sed non urna. Sed et ornare neque.</p>
</div>
</div>

 

CSS

.type-pers-parent {
perspective: 150px;
-webkit-perspective: 150px;
height: 200px;
background-color: #222;
overflow: hidden;
}
.type-pers-child {
text-align: justify;
padding: 5%;
-webkit-animation: typetext linear 15s infinite;
color: #F1C40F;
letter-spacing: 1px;
}
 
@-webkit-keyframes typetext {
0% {transform: rotateX(45deg) translate(0,0);}
100% {transform: rotateX(45deg) translate(0,-500px);}
}

 

動く斜線のプログレスバー

linear-gradientでストライプの斜線を作成し、background-positionで左右の位置をずらしてアニメーションを作ります。

アニメーションはinfinateで無限リピートにします。

HTML

<div class="type-stripe"></div>

 

CSS

.type-stripe {
height: 10px;
background: linear-gradient(-45deg, #3498DB 25%, #fff 25%, #fff 50%, #3498DB 50%, #3498DB 75%, #fff 75%, #fff);
-webkit-animation: stripeBg 10s linear infinite;
background-size: 20px 20px;
border: 1px solid #3498DB;
}
@-webkit-keyframes stripeBg {
0% {background-position: 0 0;}
100% {background-position: 100% 0;}
}

 

文字をバウンドさせる

文字を一度バウンドさせた後揃えて表示します。バウンドする文字はロゴなどにも使いやすいでしょう。

一度だけバウンドして繰り返さないようにしたい場合はanimationからinfinateを外しましょう。

HTML

<div class="type-textbound">
<span class="textbound1">L</span>
<span class="textbound2">O</span>
<span class="textbound3">G</span>
<span class="textbound4">O</span>
</div>

 

CSS

.type-textbound {
font-size: 60px;
text-align: center;
}
 
.textbound1 {-webkit-animation: bound .5s ease-in-out;}
.textbound3 {-webkit-animation: bound .7s ease-in-out;}
.textbound2 {-webkit-animation: bound .9s ease-in-out;}
.textbound4 {-webkit-animation: bound 1s ease-in-out;}
 
@-webkit-keyframes bound {
0% {transform: scale(0) translate(0,-500px);}
50% {transform: scaleX(2) translate(0,200px);}
70% {transform: scaleY(.5) translate(0,-100px);}
90% {transform: scaleX(1.5) translate(0,50px);}
100% {transform: scale(1) translate(0,0);}
}

 

文字をキラッとさせる

transform: rotateで光を傾け、アニメーション場で透過させます。

光自体は::before擬似要素で作り、リピートすることでキラッとさせることができます。

HTML

<div class="type-shine">SAMPLE</div>

 

CSS

.type-shine {
font-size: 60px;
position: relative;
overflow: hidden;
}
.type-shine:before {
-webkit-animation: shine .6s ease 1.5s;
content:"";
position: absolute;
top: 0;
left: -250px;
width: 100%;
height: 100%;
transform: rotate3d(0,0,1,-45deg) translate3d(0,-120%,0);
}
@-webkit-keyframes shine {
0% {transform: rotate3d(0,0,1,-45deg) translate3d(0,-120%,0);background: rgba(255,255,255,0.5);}
100% {transform: rotate3d(0,0,1,-25deg) translate3d(0,150%,0);background: rgba(255,255,255,0.5);}
}

 

カウントダウン

1〜10までのカウンターを::before擬似要素とCSSカウンターで作り、1秒ごとにアニメーションを切り替えていきます。

切り替えにはnth-childとanimation-delayを使って順番に表示します。

HTML

<div class="type-countdown">
<div class="type-countdown-list"></div>
<div class="type-countdown-list"></div>
<div class="type-countdown-list"></div>
<div class="type-countdown-list"></div>
<div class="type-countdown-list"></div>
<div class="type-countdown-list"></div>
<div class="type-countdown-list"></div>
<div class="type-countdown-list"></div>
<div class="type-countdown-list"></div>
<div class="type-countdown-list"></div>
</div>

 

CSS

.type-countdown {
position: relative;
height: 100px;
width: 100%
}
 
.type-countdown-list {
counter-increment: number ;
position: absolute;
-webkit-animation: countdown 1s;
margin: auto 0;
width: 100%;
opacity:0;
font-size: 60px;
text-align: center;
}
 
.type-countdown-list:before {
content: counter(number);
}
 
.type-countdown-list:nth-child(9) { -webkit-animation-delay: 1s;}
.type-countdown-list:nth-child(8) { -webkit-animation-delay: 2s;}
.type-countdown-list:nth-child(7) { -webkit-animation-delay: 3s;}
.type-countdown-list:nth-child(6) { -webkit-animation-delay: 4s;}
.type-countdown-list:nth-child(5) { -webkit-animation-delay: 5s;}
.type-countdown-list:nth-child(4) { -webkit-animation-delay: 6s;}
.type-countdown-list:nth-child(3) { -webkit-animation-delay: 7s;}
.type-countdown-list:nth-child(2) { -webkit-animation-delay: 8s;}
.type-countdown-list:nth-child(1) { -webkit-animation-delay: 9s;}
 
@-webkit-keyframes countdown {
50% {opacity:1;}
100% {opacity:0;}
}

 

CSSアニメーションプロパティの解説

ここまでで出てきたanimation、transformなどについて解説します。

 

アニメーション

CSSアニメーションの種類には以下のようなものがあります。

animation ループ有り ページ表示後 即可動
transform ループ無し 変形(移動・拡大・回転・傾斜・遠近)が可能
transition ループ無し 滑らかに変化させる(移動時間を調整)

 

transformで指定できるプロパティ

transformには変形や移動など、様々ことができる値が用意されています。

また、半角スペースで区切って効果を連結することもでき、逆の値を指定したい場合はマイナスを指定します。

以下はtransformに指定できる値です。

translate 移動 transform: translate(20px,20px) (右、下)に20px移動
rotate 回転 transform: rotate(45deg) (45度)時計回りに回転
skew 傾斜 skew(0,170deg) (横、縦)に傾斜
scale 縮尺 transform: scale(1.2) (横、縦)に拡大
perspective 遠近 transform: perspective(200) 数値が小さいほど遠近感が強くなる

 

またtransformにも種類があり、基準となる点を変更したり、描写を変更することができます。

transform-origin 基点 transform-origin: 100% 100%; 左上からの位置
transform-style 描写 transform-style:flat;
transform-style:preserve-3d;
子要素を平らに表示するか
子要素を立体に表示するか
backface-visibility 裏面 backface-visibility: visible;
backface-visibility: hidden;
裏面の表示/非表示

 

まとめ

jQueryに負けないくらいのアニメーションCSSだけで行うコードを紹介しました。

海外のサイトも含めるとまだまだ面白いアニメーションがたくさんあります。

「CSSでここまでできるのか…」と思えるようなアニメーションばかりなので、興味のある人は調べてみると面白いと思います。