HTML、CSSのみで、アニメーションを基本をまとめてみました。 同様にちょっとした応用で文字に動きを与えたり立方体を3Dで動かした備忘録です。
- アニメーションの基本
- 文字のアニメーション
- 立方体を動かす
アニメーションの基本
平行移動
回転
拡大縮小
せん断変形
バウンド
回転起点右上
回転3D
XY方向
CSS
/* ----------------------- アニメーションの基本 ------------------------- */ #animation { height: 600px; width: 100%; border:solid 1px #555; padding: 20px; transform-style:preserve-3d; /* 3次元宣言 */ perspective: 150px; /* 奥行き */ } /* ----- 移動する箱の基本 ------------ */ #animation div { border: solid 1px gray; width: 80px; height: 25px; padding:10px; background: skyblue; text-align: center; display:inline-block; line-height: 25px; margin: 50px; } /* ------------ 平行移動 ------------------------------ */ #id1{ animation:story1 3s linear 0s infinite normal; } /*------------- 回転 --------------------------------- */ #id2{ animation:story2 5s linear 0s infinite normal; } /* ------------ 拡大縮小 ------------------------------ */ #id3{ animation:story3 5s linear 0s infinite normal; } /* ------------ せん断変形 ----------------------------- */ #id4{ animation:story4 5s linear 0s infinite normal; } /* ------------ バウンド ------------------------------- */ #id5{ animation: story51 0.5s ease-out 0s infinite alternate, story52 4s linear 0s infinite alternate; top: 10px; left: 10px; position: absolute; border-radius: 50%; } /* ------------ 回転の起点設定 -------------------------- */ #id6{ animation:story2 3s linear 0s infinite normal; transform-origin: right top; font-size: smaller; } /* ------------ 回転 3D X軸方向 ------------------------- */ #id7 { animation:story7 3s linear 0s infinite normal; } /* ------------ 回転 3D X軸,Y軸方向 ---------------------- */ #id8 { animation:story8 3s linear 0s infinite normal; } /* ------------ アニメーションストーリー -------------------- */ /* ------------ 平行移動 ---------------------------------- */ @keyframes story1{ 0%, 100% { transform:translateX(0); } 50% { transform:translateX(450px); } } /* ------------ 回転 ------------ */ @keyframes story2{ 0% { transform:rotate(0); animation-timing-function:linear; } 100% { transform:rotate(360deg); } } /* ------------ 拡大縮小 ------------ */ @keyframes story3 { 0%, 100% { transform:scale(2, 0.5); } 50% { transform:scale(0.5, 2); } } /* ------------ せん断変形 ------------ */ @keyframes story4 { 0%, 100% { transform:skewX(-45deg); } 50% { transform:skewX(+45deg); } } /* ------------ バウンド ------------ */ @keyframes story51 { 0% {top: 500px;} 100% {top:400px;} } @keyframes story52 { 0% {left: 0;} 100% {left:500px;} } /* ------------ 回転 3D X軸方向 ------------ */ @keyframes story7 { 0%{transform: rotateY(0deg);} 100%{transform: rotateY(360deg);} } /* ------------ 回転 3D X軸,Y軸方向 ------------ */ @keyframes story8 { 0%{transform: rotateY(0deg) rotateX(0deg);} 100%{transform: rotateY(360deg) rotateX(360deg);} }
HTML
<div id="animation"> <div id="id1">平行移動</div><br> <div id="id2">回転</div> <div id="id3">拡大縮小</div> <div id="id4">せん断変形</div> <div id="id5">バウンド</div> <div id="id6">回転起点右上</div> <div id="id7">回転3D</div> <div id="id8">XY方向</div> </div>
文字のアニメーション
CODINGSTOCK
C
O
D
I
N
G
S
T
O
C
K
C O D I N G S T O C K
CSS
/* ------ tab2 切り抜き -------- */ #letter h2{ animation: scrollmask 10s ease 0s infinite alternate; -webkit-background-clip: text; background-image: url(sample.jpg); color: transparent; font-size: 70px; font-family: 'Bowlby One SC', cursive; padding: 10px; } @-webkit-keyframes scrollmask { 0% {background-position: 0 0;} 100% {background-position: 100% 0;} } /* ----------- tab2 テキストバウンド --------------*/ .type-textbound { height: 200px; font-size: 65px; text-align: center; font-family: 'Bowlby One SC', cursive; /* border: dotted 1px #555; */ padding: 10px; color: #df8800; text-shadow: 0 0 2px rgba(255, 255, 255, 1), 0 5px 10px rgba(0, 0, 0, 0.3); } .textbound1 {animation: bound 0.5s ease-in-out 1.5s infinite; position:absolute;left: 60px;} .textbound2 {animation: bound 0.75s ease-in-out 1.25s infinite; position: absolute;left: 120px} .textbound3 {animation: bound 1.5s ease-in-out 0.5s infinite; position: absolute;left: 180px} .textbound4 {animation: bound 1s ease-in-out 1s infinite; position: absolute;left: 240px;} .textbound5 {animation: bound 0.5s ease-in-out 1.5s infinite; position: absolute;left: 280px;} .textbound6 {animation: bound 0.75s ease-in-out 1.25s infinite; position: absolute;left: 340px;} .textbound7 {animation: bound 1.5s ease-in-out 0.5s infinite; position: absolute;left: 400px;} .textbound8 {animation: bound 0.5s ease-in-out 1.5s infinite; position: absolute;left: 460px;} .textbound9 {animation: bound 0.75s ease-in-out 1.25s infinite; position: absolute;left: 520px;} .textbound10 {animation: bound 1.5s ease-in-out 0.5s infinite; position: absolute;left: 580px;} .textbound11 {animation: bound 1s ease-in-out 1s infinite; position: absolute;left: 640px;} @-webkit-keyframes bound { from {transform: scale(0) translate(0,-500px);} 10% {transform: scaleX(1) translate(0,200px);} 20% {transform: scaleY(.5) translate(0,-100px);} 25% {transform: scaleX(.75) translate(0,50px);} 30% {transform: scale(1) translate(0,0);} 100% {transform: scale(1) translate(0,0);} } /* -------------------- tab2 ウエーブ -----------------------*/ h2.name { /* text-align: center; */ /* font-family: 'Nunito', sans-serif; */ font-family: 'Bowlby One SC', cursive; font-size: 50pt; color: #fffff0; letter-spacing: -5pt; } .name span {animation: name_animation 1s ease-in-out infinite alternate;} @keyframes name_animation { 0% {text-shadow: 0 0 2px rgba(255, 255, 255, 1),0 5px 10px rgba(0, 0, 0, 0.3);} 100% {text-shadow: 0 0 2px rgba(255, 255, 255, 0.5),0 0 0 rgba(0, 0, 0, 0);} } .name span:nth-child(2) {animation-delay: 0.15s;} .name span:nth-child(3) {animation-delay: 0.30s;} .name span:nth-child(4) {animation-delay: 0.45s;} .name span:nth-child(5) {animation-delay: 0.60s;} .name span:nth-child(6) {animation-delay: 0.75s;} .name span:nth-child(7) {animation-delay: 0.90s;} .name span:nth-child(8) {animation-delay: .05s;} .name span:nth-child(9) {animation-delay: 1.20s;} .name span:nth-child(10) {animation-delay: 1.45s;}
HTML
<!-- ------------------------------------------ 文字のマスク(クリッピングマスク)のように画像しアニメーション ------------------------------------------- --> <div id="letter"> <h2>CODINGSTOCK</h2> </div> <!-- ------------------------------------------ 文字のバウウンド ------------------------------------------- --> <div class="type-textbound"> <span class="textbound1">C</span> <span class="textbound2">O</span> <span class="textbound3">D</span> <span class="textbound4">I</span> <span class="textbound5">N</span> <span class="textbound6">G</span> <span class="textbound7">S</span> <span class="textbound8">T</span> <span class="textbound9">O</span> <span class="textbound10">C</span> <span class="textbound11">K</span> </div> <!-- ------------------------------------------ delayを使って透過をアニメーションでウエーブのように表現する。 ------------------------------------------- --> <h2 class="name"> <span>C</span> <span>O</span> <span>D</span> <span>I</span> <span>N</span> <span>G</span> <span>S</span> <span>T</span> <span>O</span> <span>C</span> <span>K</span> </h2>
立方体を動かす
CSS
/* ----------------------------------- キューブ ----------------------------------- */ #cube-body { width: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; perspective: 200px; -webkit-perspective: 200px; } .cube { width: 1px; height: 1px; margin: 100px auto; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; border: 5px solid red; position: relative; } .surface { width: 100px; height: 100px; background: rgba(0, 255, 0, 0.1); border: 2px solid gray; position: absolute; left: calc(-100px / 2); top: calc(-100px / 2); text-align: center; line-height: 100px; } /* 面個別CSS */ .front { background-image: url("pic1.png"); transform: translateZ(calc(100px / 2)); -webkit-transform: translateZ(calc(100px / 2)); } .back { background-image: url("pic2.png"); transform: translateZ(calc(-100px / 2)) rotateY(180deg); -webkit-transform: translateZ(calc(-100px / 2)) rotateY(180deg); } .right { background-image: url("pic3.png"); transform: translateX(calc(100px / 2)) rotateY(90deg); -webkit-transform: translateX(calc(100px / 2)) rotateY(90deg); } .left { background-image: url("pic4.png"); transform: translateX(calc(-100px / 2)) rotateY(-90deg); -webkit-transform: translateX(calc(-100px / 2)) rotateY(-90deg); } .top{ transform: translateY(calc(-100px / 2)) rotateX(90deg); -webkit-transform: translateY(calc(-100px / 2)) rotateX(90deg); } .bottom{ transform: translateY(calc(100px / 2)) rotateX(-90deg) ; -webkit-transform: translateY(calc(100px / 2)) rotateX(-90deg) ; } /* アニメーション */ .cube { animation: rotation 10s ease 0s infinite normal; -webkit-animation: rotation 10s ease 0s infinite normal; } /* キーフレーム */ @keyframes rotation{ start { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } }
HTML
<!-- ---------------------------------- cube ----------------------------------------> <div id="cube-body"> <div class="cube"> <div class="surface front"></div> <div class="surface right"></div> <div class="surface left"></div> <div class="surface top"></div> <div class="surface bottom"></div> <div class="surface back"></div> </div>
参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/animation
http://sample.atmarkit.jp/fux/1204/18/sample.html
http://kudakurage.hatenadiary.com/entry/20111113/1321170623
http://cartman0.hatenablog.com/entry/2015/05/29/173343