テキスト・画像が揺れていると気になりますね！
簡単に揺れる仕組みを実装が出来ますので今回は「CSS Shake」を使って再現してみます！
ページコンテンツ
HTML構造 STEP1
|
1 |
<div class="shake"></div> |
＜div＞の間に、テキスト・画像を入れてください。
|
1 |
<div class="shake">ゆれるテキスト</div> |
こんな感じで入れてください。
揺れのバリエーション
|
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 |
/*ベーシック*/ <div class="shake"></div> /*激しくゆれる*/ <div class="shake shake-hard"></div> /*ゆっくりゆれる*/ <div class="shake shake-slow"></div> /*小刻みにゆれる*/ <div class="shake shake-little"></div> /*横にゆれる*/ <div class="shake shake-horizontal"></div> /*縦にゆれる*/ <div class="shake shake-vertical"></div> /*真ん中を中心にゆれる*/ <div class="shake shake-rotate"></div> /*透過しながらゆれる*/ <div class="shake shake-opacity"></div> /*狂ったようにゆれる*/ <div class="shake shake-crazy"></div> |
使い方は上に書いたように使ってください。
CSS STEP2
赤枠で囲った「Download」をクリックしてください。ここに記述してあるCSSを貼り付けます。
|
1 |
.shake{display:inline-block;transform-origin:center center}.shake:hover{animation-name:shake-base;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.freez{animation-name:shake-base;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s;animation-play-state:paused}.shake.freez.shake-hard{animation-name:shake-hard;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.freez.shake-slow{animation-name:shake-slow;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.freez.shake-little{animation-name:shake-little;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.freez.shake-horizontal{animation-name:shake-horizontal;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.freez.shake-vertical{animation-name:shake-vertical;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.freez.shake-rotate{animation-name:shake-rotate;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.freez.shake-opacity{animation-name:shake-opacity;animation-duration:200ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.freez.shake-crazy{animation-name:shake-crazy;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.freez:hover{animation-play-state:running}.shake.shake-hard:hover{animation-name:shake-hard;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-slow:hover{animation-name:shake-slow;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-little:hover{animation-name:shake-little;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-horizontal:hover{animation-name:shake-horizontal;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-vertical:hover{animation-name:shake-vertical;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-rotate:hover{animation-name:shake-rotate;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-opacity:hover{animation-name:shake-opacity;animation-duration:200ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-crazy:hover{animation-name:shake-crazy;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-constant{animation-name:shake-base;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-constant.shake-hard{animation-name:shake-hard;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-constant.shake-slow{animation-name:shake-slow;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-constant.shake-little{animation-name:shake-little;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-constant.shake-horizontal{animation-name:shake-horizontal;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-constant.shake-vertical{animation-name:shake-vertical;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-constant.shake-rotate{animation-name:shake-rotate;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-constant.shake-opacity{animation-name:shake-opacity;animation-duration:200ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-constant.shake-crazy{animation-name:shake-crazy;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:0s}.shake.shake-constant.hover-stop:hover{animation-play-state:paused}.shake.shake-delay{animation-name:shake-base;animation-duration:100ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:4s}@keyframes shake-base{0%{transform:translate(0px, 0px) rotate(0deg)}2%{transform:translate(-1.5px, 1.5px) rotate(-0.5deg)}4%{transform:translate(0.5px, -2.5px) rotate(0.5deg)}6%{transform:translate(0.5px, 0.5px) rotate(0.5deg)}8%{transform:translate(-2.5px, -1.5px) rotate(-0.5deg)}10%{transform:translate(-2.5px, -2.5px) rotate(-1.5deg)}12%{transform:translate(-2.5px, -1.5px) rotate(-0.5deg)}14%{transform:translate(1.5px, 1.5px) rotate(-0.5deg)}16%{transform:translate(-0.5px, -2.5px) rotate(0.5deg)}18%{transform:translate(-1.5px, -2.5px) rotate(-1.5deg)}20%{transform:translate(-0.5px, 0.5px) rotate(0.5deg)}22%{transform:translate(-2.5px, -2.5px) rotate(-1.5deg)}24%{transform:translate(-0.5px, 0.5px) rotate(-1.5deg)}26%{transform:translate(0.5px, 0.5px) rotate(0.5deg)}28%{transform:translate(1.5px, -2.5px) rotate(-0.5deg)}30%{transform:translate(0.5px, -1.5px) rotate(-0.5deg)}32%{transform:translate(-2.5px, -0.5px) rotate(-1.5deg)}34%{transform:translate(-2.5px, -2.5px) rotate(-0.5deg)}36%{transform:translate(1.5px, -0.5px) rotate(-1.5deg)}38%{transform:translate(1.5px, 1.5px) rotate(-1.5deg)}40%{transform:translate(-1.5px, -2.5px) rotate(0.5deg)}42%{transform:translate(1.5px, 1.5px) rotate(-0.5deg)}44%{transform:translate(1.5px, -2.5px) rotate(0.5deg)}46%{transform:translate(-0.5px, -0.5px) rotate(-0.5deg)}48%{transform:translate(1.5px, -0.5px) rotate(-1.5deg)}50%{transform:translate(-1.5px, -2.5px) rotate(0.5deg)}52%{transform:translate(-1.5px, 1.5px) rotate(-1.5deg)}54%{transform:translate(-1.5px, -2.5px) rotate(0.5deg)}56%{transform:translate(1.5px, -0.5px) rotate(0.5deg)}58%{transform:translate(0.5px, 1.5px) rotate(-0.5deg)}60%{transform:translate(1.5px, 0.5px) rotate(0.5deg)}62%{transform:translate(-0.5px, -1.5px) rotate(-0.5deg)}64%{transform:translate(1.5px, -2.5px) rotate(-0.5deg)}66%{transform:translate(-1.5px, -0.5px) rotate(-1.5deg)}68%{transform:translate(-2.5px, 0.5px) rotate(0.5deg)}70%{transform:translate(-2.5px, -2.5px) rotate(-1.5deg)}72%{transform:translate(-1.5px, -0.5px) rotate(0.5deg)}74%{transform:translate(-2.5px, -1.5px) rotate(-0.5deg)}76%{transform:translate(0.5px, 0.5px) rotate(-1.5deg)}78%{transform:translate(-2.5px, 1.5px) rotate(-0.5deg)}80%{transform:translate(1.5px, -0.5px) rotate(-0.5deg)}82%{transform:translate(0.5px, 1.5px) rotate(-0.5deg)}84%{transform:translate(1.5px, -1.5px) rotate(-0.5deg)}86%{transform:translate(0.5px, -1.5px) rotate(-1.5deg)}88%{transform:translate(-1.5px, 1.5px) rotate(-0.5deg)}90%{transform:translate(1.5px, -2.5px) rotate(-1.5deg)}92%{transform:translate(-2.5px, 1.5px) rotate(0.5deg)}94%{transform:translate(-2.5px, 0.5px) rotate(-1.5deg)}96%{transform:translate(0.5px, 1.5px) rotate(0.5deg)}98%{transform:translate(0.5px, 1.5px) rotate(-1.5deg)}}@keyframes shake-little{0%{transform:translate(0px, 0px) rotate(0deg)}2%{transform:translate(-1px, 0px) rotate(-0.5deg)}4%{transform:translate(-1px, 0px) rotate(-0.5deg)}6%{transform:translate(0px, 0px) rotate(-0.5deg)}8%{transform:translate(0px, -1px) rotate(-0.5deg)}10%{transform:translate(-1px, -1px) rotate(-0.5deg)}12%{transform:translate(0px, -1px) rotate(-0.5deg)}14%{transform:translate(0px, 0px) rotate(-0.5deg)}16%{transform:translate(-1px, -1px) rotate(-0.5deg)}18%{transform:translate(-1px, -1px) rotate(-0.5deg)}20%{transform:translate(0px, -1px) rotate(-0.5deg)}22%{transform:translate(-1px, 0px) rotate(-0.5deg)}24%{transform:translate(-1px, -1px) rotate(-0.5deg)}26%{transform:translate(0px, -1px) rotate(-0.5deg)}28%{transform:translate(0px, 0px) rotate(-0.5deg)}30%{transform:translate(0px, 0px) rotate(-0.5deg)}32%{transform:translate(-1px, -1px) rotate(-0.5deg)}34%{transform:translate(-1px, 0px) rotate(-0.5deg)}36%{transform:translate(-1px, -1px) rotate(-0.5deg)}38%{transform:translate(0px, -1px) rotate(-0.5deg)}40%{transform:translate(0px, -1px) rotate(-0.5deg)}42%{transform:translate(-1px, -1px) rotate(-0.5deg)}44%{transform:translate(0px, 0px) rotate(-0.5deg)}46%{transform:translate(0px, -1px) rotate(-0.5deg)}48%{transform:translate(-1px, -1px) rotate(-0.5deg)}50%{transform:translate(0px, 0px) rotate(-0.5deg)}52%{transform:translate(0px, -1px) rotate(-0.5deg)}54%{transform:translate(-1px, 0px) rotate(-0.5deg)}56%{transform:translate(0px, 0px) rotate(-0.5deg)}58%{transform:translate(0px, 0px) rotate(-0.5deg)}60%{transform:translate(-1px, -1px) rotate(-0.5deg)}62%{transform:translate(0px, 0px) rotate(-0.5deg)}64%{transform:translate(0px, -1px) rotate(-0.5deg)}66%{transform:translate(-1px, -1px) rotate(-0.5deg)}68%{transform:translate(-1px, -1px) rotate(-0.5deg)}70%{transform:translate(-1px, -1px) rotate(-0.5deg)}72%{transform:translate(0px, 0px) rotate(-0.5deg)}74%{transform:translate(0px, 0px) rotate(-0.5deg)}76%{transform:translate(0px, -1px) rotate(-0.5deg)}78%{transform:translate(0px, 0px) rotate(-0.5deg)}80%{transform:translate(0px, 0px) rotate(-0.5deg)}82%{transform:translate(-1px, 0px) rotate(-0.5deg)}84%{transform:translate(0px, -1px) rotate(-0.5deg)}86%{transform:translate(0px, 0px) rotate(-0.5deg)}88%{transform:translate(0px, -1px) rotate(-0.5deg)}90%{transform:translate(-1px, 0px) rotate(-0.5deg)}92%{transform:translate(-1px, -1px) rotate(-0.5deg)}94%{transform:translate(-1px, -1px) rotate(-0.5deg)}96%{transform:translate(-1px, -1px) rotate(-0.5deg)}98%{transform:translate(0px, -1px) rotate(-0.5deg)}}@keyframes shake-slow{0%{transform:translate(0px, 0px) rotate(0deg)}2%{transform:translate(-10px, -6px) rotate(2.5deg)}4%{transform:translate(-5px, -5px) rotate(2.5deg)}6%{transform:translate(0px, 4px) rotate(-3.5deg)}8%{transform:translate(1px, -3px) rotate(-3.5deg)}10%{transform:translate(-7px, -10px) rotate(-2.5deg)}12%{transform:translate(7px, 9px) rotate(0.5deg)}14%{transform:translate(-4px, 5px) rotate(-3.5deg)}16%{transform:translate(-8px, 8px) rotate(-0.5deg)}18%{transform:translate(9px, -2px) rotate(0.5deg)}20%{transform:translate(-5px, 3px) rotate(-0.5deg)}22%{transform:translate(6px, -5px) rotate(-2.5deg)}24%{transform:translate(-1px, 4px) rotate(0.5deg)}26%{transform:translate(7px, -6px) rotate(2.5deg)}28%{transform:translate(-10px, -3px) rotate(-2.5deg)}30%{transform:translate(-6px, -8px) rotate(-0.5deg)}32%{transform:translate(-2px, -2px) rotate(-3.5deg)}34%{transform:translate(1px, -8px) rotate(-0.5deg)}36%{transform:translate(2px, 2px) rotate(1.5deg)}38%{transform:translate(-4px, 3px) rotate(-2.5deg)}40%{transform:translate(3px, 6px) rotate(-1.5deg)}42%{transform:translate(-6px, -7px) rotate(-3.5deg)}44%{transform:translate(3px, -2px) rotate(-0.5deg)}46%{transform:translate(3px, -1px) rotate(0.5deg)}48%{transform:translate(-9px, -6px) rotate(-3.5deg)}50%{transform:translate(-8px, 0px) rotate(0.5deg)}52%{transform:translate(-3px, -9px) rotate(-0.5deg)}54%{transform:translate(2px, 5px) rotate(1.5deg)}56%{transform:translate(1px, -4px) rotate(1.5deg)}58%{transform:translate(8px, -4px) rotate(-3.5deg)}60%{transform:translate(0px, -10px) rotate(0.5deg)}62%{transform:translate(-1px, 1px) rotate(-0.5deg)}64%{transform:translate(-9px, 2px) rotate(0.5deg)}66%{transform:translate(2px, -6px) rotate(1.5deg)}68%{transform:translate(-9px, 8px) rotate(0.5deg)}70%{transform:translate(-1px, -8px) rotate(-2.5deg)}72%{transform:translate(9px, 0px) rotate(-0.5deg)}74%{transform:translate(-7px, -4px) rotate(-0.5deg)}76%{transform:translate(4px, -6px) rotate(0.5deg)}78%{transform:translate(-4px, 5px) rotate(-0.5deg)}80%{transform:translate(-2px, -5px) rotate(1.5deg)}82%{transform:translate(-1px, 5px) rotate(-0.5deg)}84%{transform:translate(3px, -2px) rotate(1.5deg)}86%{transform:translate(-2px, -2px) rotate(0.5deg)}88%{transform:translate(-7px, -9px) rotate(-0.5deg)}90%{transform:translate(-7px, -4px) rotate(1.5deg)}92%{transform:translate(6px, -9px) rotate(-3.5deg)}94%{transform:translate(-3px, -10px) rotate(2.5deg)}96%{transform:translate(1px, -1px) rotate(2.5deg)}98%{transform:translate(4px, 8px) rotate(2.5deg)}}@keyframes shake-hard{0%{transform:translate(0px, 0px) rotate(0deg)}2%{transform:translate(5px, 0px) rotate(-3.5deg)}4%{transform:translate(1px, 6px) rotate(-2.5deg)}6%{transform:translate(-1px, 6px) rotate(0.5deg)}8%{transform:translate(8px, -9px) rotate(0.5deg)}10%{transform:translate(8px, 6px) rotate(-1.5deg)}12%{transform:translate(-4px, 7px) rotate(2.5deg)}14%{transform:translate(-6px, -9px) rotate(2.5deg)}16%{transform:translate(-2px, -7px) rotate(0.5deg)}18%{transform:translate(-3px, 8px) rotate(-3.5deg)}20%{transform:translate(9px, 3px) rotate(-2.5deg)}22%{transform:translate(-10px, 6px) rotate(0.5deg)}24%{transform:translate(-9px, -10px) rotate(2.5deg)}26%{transform:translate(-7px, 9px) rotate(1.5deg)}28%{transform:translate(7px, -5px) rotate(-3.5deg)}30%{transform:translate(-9px, 8px) rotate(-0.5deg)}32%{transform:translate(-9px, 1px) rotate(0.5deg)}34%{transform:translate(0px, -2px) rotate(2.5deg)}36%{transform:translate(4px, 0px) rotate(-1.5deg)}38%{transform:translate(7px, 8px) rotate(-0.5deg)}40%{transform:translate(-2px, 2px) rotate(-2.5deg)}42%{transform:translate(-6px, -3px) rotate(-3.5deg)}44%{transform:translate(-4px, -10px) rotate(1.5deg)}46%{transform:translate(0px, 5px) rotate(-3.5deg)}48%{transform:translate(-3px, -7px) rotate(-2.5deg)}50%{transform:translate(7px, -7px) rotate(-1.5deg)}52%{transform:translate(9px, 4px) rotate(2.5deg)}54%{transform:translate(8px, 5px) rotate(-2.5deg)}56%{transform:translate(4px, 7px) rotate(-3.5deg)}58%{transform:translate(-10px, 3px) rotate(2.5deg)}60%{transform:translate(6px, 3px) rotate(-3.5deg)}62%{transform:translate(6px, 0px) rotate(2.5deg)}64%{transform:translate(1px, 0px) rotate(-2.5deg)}66%{transform:translate(-7px, 1px) rotate(-1.5deg)}68%{transform:translate(-3px, -5px) rotate(-3.5deg)}70%{transform:translate(9px, -8px) rotate(-1.5deg)}72%{transform:translate(0px, -4px) rotate(-3.5deg)}74%{transform:translate(-5px, 7px) rotate(-0.5deg)}76%{transform:translate(-10px, -9px) rotate(-3.5deg)}78%{transform:translate(1px, -8px) rotate(2.5deg)}80%{transform:translate(4px, 4px) rotate(1.5deg)}82%{transform:translate(7px, -10px) rotate(0.5deg)}84%{transform:translate(-3px, 1px) rotate(0.5deg)}86%{transform:translate(-2px, 7px) rotate(-3.5deg)}88%{transform:translate(-2px, -7px) rotate(0.5deg)}90%{transform:translate(5px, -5px) rotate(2.5deg)}92%{transform:translate(8px, 1px) rotate(-2.5deg)}94%{transform:translate(-3px, -7px) rotate(-3.5deg)}96%{transform:translate(-2px, -1px) rotate(1.5deg)}98%{transform:translate(6px, 0px) rotate(0.5deg)}}@keyframes shake-horizontal{0%{transform:translate(0px, 0px) rotate(0deg)}2%{transform:translate(7px, 0px) rotate(0deg)}4%{transform:translate(7px, 0px) rotate(0deg)}6%{transform:translate(7px, 0px) rotate(0deg)}8%{transform:translate(-2px, 0px) rotate(0deg)}10%{transform:translate(2px, 0px) rotate(0deg)}12%{transform:translate(4px, 0px) rotate(0deg)}14%{transform:translate(0px, 0px) rotate(0deg)}16%{transform:translate(8px, 0px) rotate(0deg)}18%{transform:translate(0px, 0px) rotate(0deg)}20%{transform:translate(-4px, 0px) rotate(0deg)}22%{transform:translate(-9px, 0px) rotate(0deg)}24%{transform:translate(9px, 0px) rotate(0deg)}26%{transform:translate(-7px, 0px) rotate(0deg)}28%{transform:translate(-7px, 0px) rotate(0deg)}30%{transform:translate(2px, 0px) rotate(0deg)}32%{transform:translate(-4px, 0px) rotate(0deg)}34%{transform:translate(-5px, 0px) rotate(0deg)}36%{transform:translate(-7px, 0px) rotate(0deg)}38%{transform:translate(1px, 0px) rotate(0deg)}40%{transform:translate(-5px, 0px) rotate(0deg)}42%{transform:translate(-8px, 0px) rotate(0deg)}44%{transform:translate(-2px, 0px) rotate(0deg)}46%{transform:translate(0px, 0px) rotate(0deg)}48%{transform:translate(1px, 0px) rotate(0deg)}50%{transform:translate(-4px, 0px) rotate(0deg)}52%{transform:translate(7px, 0px) rotate(0deg)}54%{transform:translate(-2px, 0px) rotate(0deg)}56%{transform:translate(-4px, 0px) rotate(0deg)}58%{transform:translate(2px, 0px) rotate(0deg)}60%{transform:translate(2px, 0px) rotate(0deg)}62%{transform:translate(-1px, 0px) rotate(0deg)}64%{transform:translate(0px, 0px) rotate(0deg)}66%{transform:translate(2px, 0px) rotate(0deg)}68%{transform:translate(6px, 0px) rotate(0deg)}70%{transform:translate(8px, 0px) rotate(0deg)}72%{transform:translate(-5px, 0px) rotate(0deg)}74%{transform:translate(-7px, 0px) rotate(0deg)}76%{transform:translate(-2px, 0px) rotate(0deg)}78%{transform:translate(2px, 0px) rotate(0deg)}80%{transform:translate(-6px, 0px) rotate(0deg)}82%{transform:translate(0px, 0px) rotate(0deg)}84%{transform:translate(1px, 0px) rotate(0deg)}86%{transform:translate(1px, 0px) rotate(0deg)}88%{transform:translate(0px, 0px) rotate(0deg)}90%{transform:translate(6px, 0px) rotate(0deg)}92%{transform:translate(-7px, 0px) rotate(0deg)}94%{transform:translate(-3px, 0px) rotate(0deg)}96%{transform:translate(6px, 0px) rotate(0deg)}98%{transform:translate(-2px, 0px) rotate(0deg)}}@keyframes shake-vertical{0%{transform:translate(0px, 0px) rotate(0deg)}2%{transform:translate(0px, 8px) rotate(0deg)}4%{transform:translate(0px, 2px) rotate(0deg)}6%{transform:translate(0px, -10px) rotate(0deg)}8%{transform:translate(0px, 9px) rotate(0deg)}10%{transform:translate(0px, 5px) rotate(0deg)}12%{transform:translate(0px, 6px) rotate(0deg)}14%{transform:translate(0px, -9px) rotate(0deg)}16%{transform:translate(0px, -4px) rotate(0deg)}18%{transform:translate(0px, -8px) rotate(0deg)}20%{transform:translate(0px, -3px) rotate(0deg)}22%{transform:translate(0px, 9px) rotate(0deg)}24%{transform:translate(0px, 9px) rotate(0deg)}26%{transform:translate(0px, -2px) rotate(0deg)}28%{transform:translate(0px, -2px) rotate(0deg)}30%{transform:translate(0px, 6px) rotate(0deg)}32%{transform:translate(0px, 9px) rotate(0deg)}34%{transform:translate(0px, 9px) rotate(0deg)}36%{transform:translate(0px, -8px) rotate(0deg)}38%{transform:translate(0px, -2px) rotate(0deg)}40%{transform:translate(0px, 4px) rotate(0deg)}42%{transform:translate(0px, 6px) rotate(0deg)}44%{transform:translate(0px, -2px) rotate(0deg)}46%{transform:translate(0px, 2px) rotate(0deg)}48%{transform:translate(0px, 7px) rotate(0deg)}50%{transform:translate(0px, -4px) rotate(0deg)}52%{transform:translate(0px, 4px) rotate(0deg)}54%{transform:translate(0px, -1px) rotate(0deg)}56%{transform:translate(0px, -8px) rotate(0deg)}58%{transform:translate(0px, -3px) rotate(0deg)}60%{transform:translate(0px, 7px) rotate(0deg)}62%{transform:translate(0px, -1px) rotate(0deg)}64%{transform:translate(0px, 4px) rotate(0deg)}66%{transform:translate(0px, 7px) rotate(0deg)}68%{transform:translate(0px, 0px) rotate(0deg)}70%{transform:translate(0px, 4px) rotate(0deg)}72%{transform:translate(0px, 4px) rotate(0deg)}74%{transform:translate(0px, 1px) rotate(0deg)}76%{transform:translate(0px, -10px) rotate(0deg)}78%{transform:translate(0px, -7px) rotate(0deg)}80%{transform:translate(0px, 4px) rotate(0deg)}82%{transform:translate(0px, 7px) rotate(0deg)}84%{transform:translate(0px, -5px) rotate(0deg)}86%{transform:translate(0px, 9px) rotate(0deg)}88%{transform:translate(0px, -5px) rotate(0deg)}90%{transform:translate(0px, 5px) rotate(0deg)}92%{transform:translate(0px, 8px) rotate(0deg)}94%{transform:translate(0px, -3px) rotate(0deg)}96%{transform:translate(0px, -3px) rotate(0deg)}98%{transform:translate(0px, -8px) rotate(0deg)}}@keyframes shake-rotate{0%{transform:translate(0px, 0px) rotate(0deg)}2%{transform:translate(0px, 0px) rotate(-7.5deg)}4%{transform:translate(0px, 0px) rotate(-4.5deg)}6%{transform:translate(0px, 0px) rotate(-4.5deg)}8%{transform:translate(0px, 0px) rotate(1.5deg)}10%{transform:translate(0px, 0px) rotate(5.5deg)}12%{transform:translate(0px, 0px) rotate(6.5deg)}14%{transform:translate(0px, 0px) rotate(-7.5deg)}16%{transform:translate(0px, 0px) rotate(-3.5deg)}18%{transform:translate(0px, 0px) rotate(6.5deg)}20%{transform:translate(0px, 0px) rotate(-1.5deg)}22%{transform:translate(0px, 0px) rotate(-5.5deg)}24%{transform:translate(0px, 0px) rotate(-3.5deg)}26%{transform:translate(0px, 0px) rotate(6.5deg)}28%{transform:translate(0px, 0px) rotate(2.5deg)}30%{transform:translate(0px, 0px) rotate(-2.5deg)}32%{transform:translate(0px, 0px) rotate(5.5deg)}34%{transform:translate(0px, 0px) rotate(3.5deg)}36%{transform:translate(0px, 0px) rotate(4.5deg)}38%{transform:translate(0px, 0px) rotate(-7.5deg)}40%{transform:translate(0px, 0px) rotate(-5.5deg)}42%{transform:translate(0px, 0px) rotate(-7.5deg)}44%{transform:translate(0px, 0px) rotate(1.5deg)}46%{transform:translate(0px, 0px) rotate(-5.5deg)}48%{transform:translate(0px, 0px) rotate(-1.5deg)}50%{transform:translate(0px, 0px) rotate(6.5deg)}52%{transform:translate(0px, 0px) rotate(-1.5deg)}54%{transform:translate(0px, 0px) rotate(-0.5deg)}56%{transform:translate(0px, 0px) rotate(4.5deg)}58%{transform:translate(0px, 0px) rotate(3.5deg)}60%{transform:translate(0px, 0px) rotate(-2.5deg)}62%{transform:translate(0px, 0px) rotate(-1.5deg)}64%{transform:translate(0px, 0px) rotate(-7.5deg)}66%{transform:translate(0px, 0px) rotate(-4.5deg)}68%{transform:translate(0px, 0px) rotate(6.5deg)}70%{transform:translate(0px, 0px) rotate(-3.5deg)}72%{transform:translate(0px, 0px) rotate(1.5deg)}74%{transform:translate(0px, 0px) rotate(-0.5deg)}76%{transform:translate(0px, 0px) rotate(-5.5deg)}78%{transform:translate(0px, 0px) rotate(-7.5deg)}80%{transform:translate(0px, 0px) rotate(-6.5deg)}82%{transform:translate(0px, 0px) rotate(-7.5deg)}84%{transform:translate(0px, 0px) rotate(6.5deg)}86%{transform:translate(0px, 0px) rotate(6.5deg)}88%{transform:translate(0px, 0px) rotate(0.5deg)}90%{transform:translate(0px, 0px) rotate(3.5deg)}92%{transform:translate(0px, 0px) rotate(-1.5deg)}94%{transform:translate(0px, 0px) rotate(-7.5deg)}96%{transform:translate(0px, 0px) rotate(-4.5deg)}98%{transform:translate(0px, 0px) rotate(-5.5deg)}}@keyframes shake-opacity{0%{transform:translate(0px, 0px) rotate(0deg);opacity:0.9}10%{transform:translate(-4px, 0px) rotate(1.5deg);opacity:0.5}20%{transform:translate(-2px, 4px) rotate(-2.5deg);opacity:0.5}30%{transform:translate(-3px, 4px) rotate(1.5deg);opacity:0.2}40%{transform:translate(0px, 3px) rotate(-0.5deg);opacity:0.8}50%{transform:translate(-1px, -5px) rotate(-2.5deg);opacity:0.3}60%{transform:translate(4px, -4px) rotate(0.5deg);opacity:0.7}70%{transform:translate(-1px, -4px) rotate(-2.5deg);opacity:0.9}80%{transform:translate(-1px, -1px) rotate(-0.5deg);opacity:0.3}90%{transform:translate(1px, 4px) rotate(1.5deg);opacity:0.1}}@keyframes shake-crazy{0%{transform:translate(0px, 0px) rotate(0deg);opacity:0}10%{transform:translate(11px, 1px) rotate(1deg);opacity:0.7}20%{transform:translate(11px, 8px) rotate(-2deg);opacity:0.3}30%{transform:translate(-17px, -13px) rotate(7deg);opacity:0}40%{transform:translate(-10px, 8px) rotate(-1deg);opacity:0.6}50%{transform:translate(8px, -15px) rotate(-9deg);opacity:0.5}60%{transform:translate(2px, 15px) rotate(5deg);opacity:0.7}70%{transform:translate(12px, 16px) rotate(9deg);opacity:0.8}80%{transform:translate(4px, -7px) rotate(-8deg);opacity:0.5}90%{transform:translate(-15px, -10px) rotate(2deg);opacity:0.3} |
CSSは長いですが、別途専用のCSSファイルを用意して読み込ませれば問題ないですね。
まとめ
[サンプル] テキスト・画像を揺らす
テキストを注目させたい！ バナーに注目するようにしたい場合など使えそうです。
