Web・デザイン

CSS3 グラフィックス transform transition animation を学ぶ

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

最近の記事

  1. EC-CUBE 4.0 インストール
  1. サーバー環境

    MAMPのインストール
  2. プログラミング

    画像をポップアップするライトボックス jQuery プラグイン 「lightb…
  3. Web・デザイン

    CSS3 グラフィックス transform transition anima…
  4. サーバー環境

    Git コマンドライン
  5. プログラミング

    python Django Webアプリケーションの構築 基本編
PAGE TOP