CSSアニメーション
みなさんCSSアニメーションってご存知ですか?
私は最近まで知りませんでした。
CSSアニメーションを使えばCSSだけで、
まるでアニメの1シーンのような動きのあるサイトが作れます。
とりあえず見てください。言葉失いますよ。
DropOut
Yuki054さんって方が作られているのですが、
もはやアニメを見ているような気分になりません?
ここまで作れたら楽しいですよね。
でも、私なんかが手を出していいものではありませんでした。
ひどすぎ。
何がどう動くのかわからないっす。
ただ動いて楽しかったです。(´-`)
触発されていじって見たものの
どこをどういじったらどこの動きになるのか。
もはや謎。
混乱した様子が伺えるコードはこちらです。ひどい・・・。
<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;
}
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;
}
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;
}
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;
}
anime1 {
50% {transform:translate(-200px,0); background-color: red;}
100%{transform:translate(200px,0); background-color: blue;}
}
一応、transformプロパティとanimationプロパティでかなり楽しめます。
少しいじると感じます。Yuki054さんすげーって。
アニメの公式サイトもすごいですけど、
アニメーションを極めるともはやアニメです。
いずれは30分アニメとかに・・・。
って夢がありますね。٩( 'ω' )و
にほんブログ村