[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets
Post on:2019年3月15日
sponsors
テキストリンクやボタン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。
気になったアニメーションは、スニペットなどに登録しておくと便利ですね。
CSSeffectsSnippets
CSSeffectsSnippets -GitHub
CSSeffectsSnippetsのデモ
デモでは、CSSのさまざまなエフェクトを楽しめます。
ちなみに、Vue.jsで構築されています。
CSSeffectsSnippetsの使い方
使い方は簡単です。
デモページでそのエフェクトをクリックすると、CSSがコピーされます。あとは、テキストやボタンのHTMLを用意するだけです。いくつか、コピペしてみました。
HTML
空のdiv要素を用意し、classを与えるだけです。
|
1 2 3 4 5 |
<div class="bouncingLoader"> <div></div> <div></div> <div></div> </div> |
CSS
コピペしたCSSは下記の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@keyframes bouncing-loader { to { opacity: 0.1; transform: translate3d(0, -16px, 0); } } .bouncingLoader { display: flex; justify-content: center; } .bouncingLoader > div { width: 13px; height: 13px; margin: 32px 3px; background: #5778F3; border-radius: 50%; animation: bouncing-loader 0.6s infinite alternate; } .bouncingLoader > div:nth-child(2) { animation-delay: 0.2s; } .bouncingLoader > div:nth-child(3) { animation-delay: 0.4s; } |
ホバーしてみて
HTML
テキストにclassを与えるだけです。
|
1 |
<p class="borderLeftRight">ホバーしてみて</p> |
CSS
コピペしたCSSは下記の通り。リンク要素ではない場合は、「cursor: pointer;」を加えるとカーソルがポインターになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.borderLeftRight { display: inline-block; position: relative; color: #474E51; } .borderLeftRight::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: #5878F3; transform-origin: bottom right; transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); } .borderLeftRight:hover::after { transform: scaleX(1); transform-origin: bottom left; } |
ホバーしてみて
HTML
ラッパーのdiv要素とspan要素でボタンを実装します。
|
1 |
<div class="textAnimationLeft"><span>ホバーしてみて</span></div> |
CSS
コピペしたCSSは下記の通り。リンク要素ではない場合は、「cursor: pointer;」を加えるとカーソルがポインターになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
.textAnimationLeft { height: 40px; width: 120px; text-align: center; overflow: hidden; background: #474E51; position: relative; line-height: 40px; color: #fff; } .textAnimationLeft::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; transform: translateX(-100%); background: #5778F3; transition: transform .25s ease-in; } .textAnimationLeft:hover::before { transform: translateX(0); } .textAnimationLeft span { position: relative; z-index: 1; display: block; } .textAnimationLeft:hover span { animation: animButtonSpan 0.4s; } @keyframes animButtonSpan { 0% { transform: translateX(0); opacity: 1; } 35% { transform: translateX(20px); opacity: 0; } 50.001% { transform: translateX(-20px); } 60% { transform: translateX(0px); } } |
他にもたくさんのアニメーションがコピペできます。
sponsors
