駆け出しプログラマーの備忘録

異業種から訪れたIT業界について赤裸々トークを繰り広げる予定!                                 あ、私はプログラミングとは無縁の人生を送ってきたクソザコ野郎です٩( 'ω' )و

駆け プロ

#37 【CSSアニメーション】CSSって奥が深すぎてついていけない・・・

f:id:momotaroch:20180421230332p:plain

CSSアニメーション

 

みなさんCSSアニメーションってご存知ですか?

私は最近まで知りませんでした。

 

CSSアニメーションを使えばCSSだけで、

まるでアニメの1シーンのような動きのあるサイトが作れます。

 

とりあえず見てください。言葉失いますよ。

DropOut

 

Yuki054さんって方が作られているのですが、

もはやアニメを見ているような気分になりません?

 

ここまで作れたら楽しいですよね。

でも、私なんかが手を出していいものではありませんでした。

 

ひどすぎ。

何がどう動くのかわからないっす。

ただ動いて楽しかったです。(´-`)

 

触発されていじって見たものの

どこをどういじったらどこの動きになるのか。

もはや謎。

混乱した様子が伺えるコードはこちらです。ひどい・・・。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="20180425.css">
</head>
<body>
	<div id="contents">
		<div class="con4"></div>
		<div class="con1"></div>
		<div class="con2"></div>
		<div class="con3"></div>
	</div>
</body>
</html>

 

#contents {
	height: 1000px;
}

.con1 {
	margin-top: 200px;
	width: 500px;
	height: 150px;
	background-color: purple;

	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	animation-name: anime2;
}
@keyframes anime2 {
	25%{transform: rotate(-45deg);}
	50%{transform: rotate(45deg);}
	75%{transform: rotate(-180deg);}
	100%{width: 0;height: 0;}
}


.con2 {
	margin-top: 100px;
	width:1000px;
	height: 250px;
	background-color: red;

	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	animation-name: anime3;

}
@keyframes anime3 {
	50%{background-color: pink;transform:translateX(100%);transform: rotate(90deg);}
	100%{background-color: red;height:0;transform: rotate(-450deg);}
}

.con3 {
	width:1000px;
	height: 250px;
	background-color: blue;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	animation-name: anime4;

}
@keyframes anime4 {
	50%{opacity:.5;transform: rotate(-180deg);}
	100%{background-color: blue;transform:translateX(100%);transform:rotate(360deg);height:0;}
}

.con4 {
	width: 100px;
	height:100px;
	margin:0 auto;
	background-color: yellow;
	border-radius: 50%;
	
	animation-name: anime1;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

@keyframes anime1 {
	50% {transform:translate(-200px,0); background-color: red;}
	100%{transform:translate(200px,0); background-color: blue;}
}

 

一応、transformプロパティとanimationプロパティでかなり楽しめます。

少しいじると感じます。Yuki054さんすげーって。

 

アニメの公式サイトもすごいですけど、

アニメーションを極めるともはやアニメです。

 

いずれは30分アニメとかに・・・。

って夢がありますね。٩( 'ω' )و

にほんブログ村 IT技術ブログへ
にほんブログ村