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

ここからメインコンテンツです

topics

補助メニュー

Category:

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で遊んでみてください。プロフィールアイコンがぴょこんぴょこんします。
お知らせ
ギャル男と一緒に鎌倉で働きませんか？

マークアップエンジニア募集中です！！！！！！！！