Tags

閉じる

Category

閉じる

Search

Search

閉じる

CSSアニメーションでアイコンを動かす

戻る

CSSアニメーションを使ってアイコンを動かしてみたいと思います。
以下、気をつけた点。

  • CSSアニメーションに非対応のブラウザでもアイコンとして成立している
  • 過剰なマークアップをしない

現実的に使えそうな路線で頑張ってみました。

アニメーションさせるのはこの「New!」と書かれたアイコン。

New!

		.iconNew{
 width: 3em;
 text-align: center;
 background: #54bb00;
 color: #fff;
 font-weight: bold;
 text-shadow: 0 1px 0 #3f3f3f;
 margin: 0 25px 25px 0;
 letter-spacing: 2px;
 padding-left: 4px;
}

以下、Safariかgoogle Chromeでご覧ください。

New!

		.iconNew.arrange01 span{
 display: block;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-iteration-count: infinite;
 -webkit-transform-origin: middle center;
 -webkit-transform: scale(1);
 -webkit-animation-name: outer01;
}
@-webkit-keyframes outer01 {
 0%{
 -webkit-transform: scale(1); 
 }
 70% {
 -webkit-transform: scale(1); 
 
 }
 85% {
 -webkit-transform: scale(1.4); 
 
 }
 100% {
 -webkit-transform: scale(1); 
 }
}

New!

		.iconNew.arrange02{
 -webkit-animation-duration: 4s;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-iteration-count: infinite;
 -webkit-transform-origin: middle center;
 -webkit-animation-name: outer02;
 background: #54bb00;
}
@-webkit-keyframes outer02 {
 0%{
 background: #54bb00;
 }
 30%{
 background: #54bb00;
 }
 50% {
 background: #98f139;
 -webkit-box-shadow: 0 0 7px #98f139; 
 }
 70%{
 background: #54bb00;
 }
 100% {
 background: #54bb00;
 }
}

New!

		.iconNew.arrange03{
 position: relative;
 bottom: 0;
 -webkit-animation-duration: 1.5s;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-iteration-count: infinite;
 -webkit-transform-origin: middle center;
 -webkit-animation-name: outer03;
 -webkit-transform: rotate(0deg);
}
@-webkit-keyframes outer03 {
 0%{
 -webkit-transform: rotate(0deg);
 bottom: 0;
 }
 50% {
 -webkit-transform: rotate(0deg);
 bottom: 0;
 }
 60% {
 -webkit-transform: rotate(5deg);
 bottom: 5px; 
 }
 70% {
 -webkit-transform: rotate(-5deg);
 }
 80% {
 -webkit-transform: rotate(4deg);
 }
 90% {
 -webkit-transform: rotate(-3deg);
 }
 100% {
 -webkit-transform: rotate(0deg);
 }
}

New!

		.iconNew.arrange04{
 overflow: hidden;
}
.iconNew.arrange04 span{
 -webkit-animation-duration: 6s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-iteration-count: infinite;
 -webkit-transform-origin: middle center;
 -webkit-animation-name: outer04;
 position: relative;
 left: 0;
}
@-webkit-keyframes outer04 {
 0%{
 left: 3em;
 }
 100% {
 left: -3em;
 }
}

New!

		.iconNew.arrange05{
 -webkit-animation-duration: 4s;
 -webkit-animation-timing-function: ease-in;
 -webkit-animation-iteration-count: infinite;
 -webkit-transform-origin: bottom center;
 -webkit-animation-name: outer05;
}

@-webkit-keyframes outer05 {
 0%{
 -webkit-transform: scale(1, 1);
 }
 48%{
 -webkit-transform: scale(1, 1);
 }
 50%{
 -webkit-transform: scale(1.1, 0.9);
 }
 53%{
 -webkit-transform: scale(0.9, 1.1) translate(0, -5px);
 }
 57.5%{
 -webkit-transform: scale(1, 1) translate(0, -3px);
 }
 59%{
 -webkit-transform: scale(1, 1) translate(0, 0px);
 }
 100% {
 -webkit-transform: scale(1, 1);
 }
}

過剰なマークアップになってしまいますが、一文字ずつspanで区切ればこんなことも。

New!

		.iconNew02.arrange01,
.iconNew02.arrange01 span{
 -webkit-animation-duration: 1.5s;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-iteration-count: infinite;
}

.iconNew02.arrange01 span{
 display: inline-block;
 -webkit-transform-origin: middle center;
 -webkit-transform: scale(1);
 -webkit-animation-name: letter01;
 background: #54bb00;
 color: #fff;
 font-weight: bold;
 padding: 4px;
}

.iconNew02.arrange01 span.letter02{
 -webkit-animation-name: letter02;
 -webkit-animation-delay: 0.2s;
}

.iconNew02.arrange01 span.letter03{
 -webkit-animation-name: letter03;
 -webkit-animation-delay: 0.4s;
}

.iconNew02.arrange01 span.letter04{
 -webkit-animation-name: letter04;
 -webkit-animation-delay: 0.6s;
}

@-webkit-keyframes letter01 {
 0%{
 -webkit-transform: scale(1); 
 }
 70% {
 -webkit-transform: scale(1); 
 }
 85% {
 -webkit-transform: scale(1.5); 
 }
 100% {
 -webkit-transform: scale(1); 
 }
}

@-webkit-keyframes letter02 {
 0%{
 -webkit-transform: scale(1); 
 }
 70% {
 -webkit-transform: scale(1); 
 }
 85% {
 -webkit-transform: scale(1.5); 
 }
 100% {
 -webkit-transform: scale(1); 
 }
}

@-webkit-keyframes letter03 {
 0%{
 -webkit-transform: scale(1); 
 }
 70% {
 -webkit-transform: scale(1); 
 }
 85% {
 -webkit-transform: scale(1.5); 
 }
 100% {
 -webkit-transform: scale(1); 
 }
}

@-webkit-keyframes letter04 {
 0%{
 -webkit-transform: scale(1); 
 }
 70% {
 -webkit-transform: scale(1);
 }
 85% {
 -webkit-transform: scale(1.5); 
 }
 100% {
 -webkit-transform: scale(1); 
 }
}

New!

		.iconNew02.arrange02,
.iconNew02.arrange02 span{
 -webkit-animation-duration: 1.5s;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-iteration-count: infinite;
}

.iconNew02.arrange02 span{
 display: inline-block;
 -webkit-transform-origin: middle center;
 -webkit-transform: scale(1);
 -webkit-animation-name: letter01b;
 background: #54bb00;
 color: #fff;
 font-weight: bold;
 padding: 4px;
 position: relative;
 bottom: 0;
}

.iconNew02.arrange02 span.letter02{
 -webkit-animation-name: letter02b;
 -webkit-animation-delay: 0.2s;
}

.iconNew02.arrange02 span.letter03{
 -webkit-animation-name: letter03b;
 -webkit-animation-delay: 0.4s;
}

.iconNew02.arrange02 span.letter04{
 -webkit-animation-name: letter04b;
 -webkit-animation-delay: 0.6s;
}

@-webkit-keyframes letter01b {
 0%{
 bottom: 0;
 }
 70% {
 bottom: 0;
 }
 85% {
 bottom: 7px;
 }
 100% {
 bottom: 0;
 }
}

@-webkit-keyframes letter02b {
 0%{
 bottom: 0;
 }
 70% {
 bottom: 0;
 }
 85% {
 bottom: 7px;
 }
 100% {
 bottom: 0;
 }
}

@-webkit-keyframes letter03b {
 0%{
 bottom: 0;
 }
 70% {
 bottom: 0;
 
 }
 85% {
 bottom: 7px;
 
 }
 100% {
 bottom: 0;
 }
}

@-webkit-keyframes letter04b {
 0%{
 bottom: 0;
 }
 70% {
 bottom: 0;
 }
 85% {
 bottom: 7px;
 }
 100% {
 bottom: 0;
 }
}

ここまでできて感動するものの、実際なかなか使える機会がないですよね。
ちょっと悔しいので、今公開中のmixiアプリの中でCSSアニメーションを使ってみました。
むだづかい告白帳
Safariで遊んでみてください。プロフィールアイコンがぴょこんぴょこんします。

お知らせ

ギャル男と一緒に鎌倉で働きませんか？
マークアップエンジニア募集中です！！！！！！！！