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. プログラミング

    WordPress にて jQueryUI テーマを動的選択してデザインを反映
  2. プログラミング

    python Anacondaを利用した開発環境の整備 jupter Noteb…
  3. EC-CUBE 4.0 インストール

    サーバー環境

    EC-CUBE4 を CentOS7、LAMP環境整備及インストール
  4. プログラミング

    Django Webアプリケーションの構築 データベースの内容一覧表示 およびア…
  5. プログラミング

    Wordressの投稿を「FullCalendar」でカレンダー表示してみる
PAGE TOP