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