CSSという時代の進歩は素晴らしい。目を見張るものがある。
今や時代はCSS3。CSSさえ使いこなすことができれば世界を股にかけることだって不可能ではないのだ。
いいかね読者の諸君。
これからはCSSだ。生きていくのに最も必要なもの、それはCSSだ。
愛だの恋だの友情だの、そんなものは週刊少年ジャンプにまかせておけばいいのだ。
CSSで画像をプルプルさせよう
ということで前置きはこのへんにしておいて、今日はタイトル通り「CSSで画像をプルプルさせよう」という小ネタです。
やっぱりプルプルなので、サンプルにはプリンの画像を用意しました。
以下、いろいろと実践例を置いておくので画像にマウスを合わせてみてください。
スマホからの閲覧の方も、画像をタッチすると動きますよ。やってみてね
※IEでは動きません。
実践例①ぷるぷる
.purupurupuru{
position:relative;
-webkit-animation-duration: .25s;
-moz-animation-duration:.25s;
-ms-animation-duration:.25s;
-o-animation-duration:.25s;
animation-duration:.25s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes pururururu {
0% {
left: 10px;
top:10px;
}
10% {
left: 15px;
top:0;
}
20% {
left:0px;
top:15px;
}
30% {
left:10px;
top:0px;
}
40% {
left:30px;
top:8px;
}
50% {
left:10px;
top:0;
}
60% {
left:20px;
top:-5px;
}
70% {
left:15px;
top:3;
}
80% {
left:0;
top:10px;
}
90% {
left:12px;
top:2px;
}
100% {
left:0;
top:-5px;
}
}
@-moz-keyframes pururururu {
0% {
left: 10px;
top:10px;
}
10% {
left: 15px;
top:0;
}
20% {
left:0px;
top:15px;
}
30% {
left:10px;
top:0px;
}
40% {
left:30px;
top:8px;
}
50% {
left:10px;
top:0;
}
60% {
left:20px;
top:-5px;
}
70% {
left:15px;
top:3;
}
80% {
left:0;
top:10px;
}
90% {
left:12px;
top:2px;
}
100% {
left:0;
top:-5px;
}
}
@-webkit-keyframes pururururu {
0% {
left: 10px;
top:10px;
}
10% {
left: 15px;
top:0;
}
20% {
left:0px;
top:15px;
}
30% {
left:10px;
top:0px;
}
40% {
left:30px;
top:8px;
}
50% {
left:10px;
top:0;
}
60% {
left:20px;
top:-5px;
}
70% {
left:15px;
top:3;
}
80% {
left:0;
top:10px;
}
90% {
left:12px;
top:2px;
}
100% {
left:0;
top:-5px;
}
}
.purupurupuru:hover {
-webkit-animation-name: pururururu;
-moz-animation-name:pururururu;
}
実践例②きゅんきゅん
.kyunkyunkyun {
position:relative;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-moz-keyframes kyuuuuuun {
0% { -moz-transform: skewX(9deg); }
10% { -moz-transform: skewX(-8deg); }
20% { -moz-transform: skewX(7deg); }
30% { -moz-transform: skewX(-6deg); }
40% { -moz-transform: skewX(5deg); }
50% { -moz-transform: skewX(-4deg); }
60% { -moz-transform: skewX(3deg); }
70% { -moz-transform: skewX(-2deg); }
80% { -moz-transform: skewX(1deg); }
90% { -moz-transform: skewX(0deg); }
100% { -moz-transform: skewX(0deg); }
}
@-o-keyframes kyuuuuuun {
0% { -o-transform: skewX(9deg); }
10% { -o-transform: skewX(-8deg); }
20% { -o-transform: skewX(7deg); }
30% { -o-transform: skewX(-6deg); }
40% { -o-transform: skewX(5deg); }
50% { -o-transform: skewX(-4deg); }
60% { -o-transform: skewX(3deg); }
70% { -o-transform: skewX(-2deg); }
80% { -o-transform: skewX(1deg); }
90% { -o-transform: skewX(0deg); }
100% { -o-transform: skewX(0deg); }
}
@-webkit-keyframes kyuuuuuun {
0% { -webkit-transform: skewX(9deg); }
10% { -webkit-transform: skewX(-8deg); }
20% { -webkit-transform: skewX(7deg); }
30% { -webkit-transform: skewX(-6deg); }
40% { -webkit-transform: skewX(5deg); }
50% { -webkit-transform: skewX(-4deg); }
60% { -webkit-transform: skewX(3deg); }
70% { -webkit-transform: skewX(-2deg); }
80% { -webkit-transform: skewX(1deg); }
90% { -webkit-transform: skewX(0deg); }
100% { -webkit-transform: skewX(0deg); }
}
.kyunkyunkyun:hover {
-webkit-animation-name: kyuuuuuun;
-moz-animation-name: kyuuuuuun;
-o-animation-name: kyuuuuuun;
animation-name: kyuuuuuun;
}
実践例③ふらふら
.furafurafura{
position:relative;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
@keyframes furaaaaan {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}
@-moz-keyframes furaaaaan {
0% { -moz-transform: translateX(0%); }
15% { -moz-transform: translateX(-25%) rotate(-5deg); }
30% { -moz-transform: translateX(20%) rotate(3deg); }
45% { -moz-transform: translateX(-15%) rotate(-3deg); }
60% { -moz-transform: translateX(10%) rotate(2deg); }
75% { -moz-transform: translateX(-5%) rotate(-1deg); }
100% { -moz-transform: translateX(0%); }
}
@-o-keyframes furaaaaan {
0% { -o-transform: translateX(0%); }
15% { -o-transform: translateX(-25%) rotate(-5deg); }
30% { -o-transform: translateX(20%) rotate(3deg); }
45% { -o-transform: translateX(-15%) rotate(-3deg); }
60% { -o-transform: translateX(10%) rotate(2deg); }
75% { -o-transform: translateX(-5%) rotate(-1deg); }
100% { -o-transform: translateX(0%); }
}
@-webkit-keyframes furaaaaan {
0% { -webkit-transform: translateX(0%); }
15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
30% { -webkit-transform: translateX(20%) rotate(3deg); }
45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
60% { -webkit-transform: translateX(10%) rotate(2deg); }
75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
100% { -webkit-transform: translateX(0%); }
}
.furafurafura:hover {
-webkit-animation-name: furaaaaan;
-moz-animation-name: furaaaaan;
-o-animation-name: furaaaaan;
animation-name: furaaaaan;
}
結論：CSS3はスゴイ
今回ご紹介したコードはCSS3に基づいてます。
CSSは本当にすごいなと思いますし、検索すればもっともっと遊び心に満ちたcssプロパティが見つかると思います。
あなたのサイトやブログにも、ちょっとしたアクセントとしていかがでしょうか。
では！
↓ぷるぷるさせたいなと思った方はシェアを。
