無料サービス

Pocket

サービスページ

あなたのHTML文書に記述されている要素(ボックス、画像、テキスト(文字)などにクラス名を追加するだけで、簡単にアニメーションやトランジションの変化を付けることができます。

●サンプル(アニメーション・トランジションの一覧)

アニメーション、トランジションの変化のサンプルです。どんな動きをするのか見てください。
(画像をクリックするとサンプルページが開きます。)
Shake Rotate Class

【 使い方 1 】~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~

1.アニメーション・トランジションのクラスライブラリCSSをダウンロードします。
2.あなたのHTML文書にボタンを作ります。
Use Button before

●サンプルコード
   UseButton_before.html


<!DOCTYPE html>
<html>
  <head>
    <title>UseButton</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="UseButton.css">
  </head>
  <body>
    <p>■使用方法の説明1</p>
    <div id="stage">
      <div id="div1">ボタン1</div>
      <div id="div2">ボタン2</div>
      <div id="div3">ボタン3</div>
      <div id="div4">ボタン4</div>
  </body>
</html>
			

   UseButton.css


#stage {
  margin: 0px 0px 0px 0px;
  width: 700px; height: 400px;
  border: solid 1px black;
  text-align: center;
  font: bold 28px "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;
  color: black;
  line-height: 80px;
  cursor: default;
  position: relative;
}
#div1 {
  top: 30px; left: 20px;
  width: 280px; height: 80px;
  border: solid 10px darkviolet;
  background-color: #CCCCCC;
  position: absolute;
}
#div2 {
  top: 30px; left: 370px;
  width: 280px; height: 80px;
  border: solid 10px deepskyblue;
  background-color: #CCCCCC;
  position: absolute;
}
#div3 {
  top: 170px; left: 20px;
  width: 280px; height: 80px;
  border: solid 10px salmon;
  background-color: #CCCCCC;
  position: absolute;
}
#div4 {
  top: 170px; left: 370px;
  width: 280px; height: 80px;
  border: solid 10px limegreen;
  border-color: limegreen;
  background-color: #CCCCCC;
  position: absolute;
}
			

3.HTML文書にクラスライブラリCSSとボタンにクラスを追記します。

UseButton_before.htmlに次のように追記(下記サンプルコードの赤字の部分)するだけで、次の画像のようにボタンにトランジションやアニメーションの変化を付けることができます。
①<head>部の中にHover_moving.cssを追記します。
   (注意:必ずcssの記述の一番最後に追加してください。)
②ボタンのdiv要素にclass属性を追記します。
   (class属性は「サンプル(アニメーション・トランジションの一覧)」のボタンに記述されている英語名を記述します。)


●サンプルコード
   UseButton_after.html


<!DOCTYPE html>
<html>
  <head>
    <title>UseButton</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="UseButton.css">
    <link rel="stylesheet" type="text/css" href="Hover_shake_rotate.css">
  </head>
  <body>
    <p>■使用方法の説明1</p>
    <div id="stage">
      <div id="div1" class="side_to_side">ボタン1</div>
      <div id="div2" class="large_and_small">ボタン2</div>
      <div id="div3" class="roll_clockwise">ボタン3</div>
      <div id="div4" class="roll_right">ボタン4</div>
  </body>
</html>
			

(画像をクリックするとサンプルページが開きます。)
Use Button after

【 使い方 2 】~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~

Hover_moving.cssは画像にもアニメーションやトランジションの変化を付けることができます。
1.あなたのHTML文書に画像を作ります。
Use Image before

●サンプルコード
   UseImage_before.html


<!DOCTYPE html>
<html>
  <head>
    <title>UseImage</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="UseImage.css">
  </head>
  <body>
    <p>■使用方法の説明2</p>
    <div id="stage">
      <img id="pict1" src="images/LeftHandS.png" alt="Normal Color Hand">
      <img id="pict2" src="images/LeftHand2S.png" alt="Green Color Hand">
      <img id="pict3" src="images/LeftHand3S.png" alt="Yellowl Color Hand">
      <img id="pict4" src="images/LeftHandS.png" alt="Normal Color Hand">
  </body>
</html>
			

   UseButton.css


#stage {
  margin: 0px 0px 0px 0px;
  width: 700px; height: 400px;
  border: solid 1px black;
  cursor: default;
  position: relative;
}
#pict1 {
  top: 30px; left: 100px;
  width: 192px; height: 147px;
  position: absolute;
}
#pict2 {
  top: 30px; left: 400px;
  width: 192px; height: 147px;
  position: absolute;
}
#pict3 {
  top: 220px; left: 100px;
  width: 192px; height: 147px;
  position: absolute;
}
#pict4 {
  top: 220px; left: 400px;
  width: 192px; height: 147px;
  position: absolute;
}
			

2.HTML文書にクラスライブラリCSSとボタンにクラスを追記します。

UseImage_before.htmlに次のように追記(下記サンプルコードの赤字の部分)するだけで、次の画像のようにハンドサインの画像ににトランジションやアニメーションの変化を付けることができます。
①<head>部の中にHover_moving.cssを追記します。
   (注意:必ずcssの記述の一番最後に追加してください。)
②ハンドサイン画像のimg要素にclass属性を追記します。
   (class属性は「サンプル(アニメーション・トランジションの一覧)」のボタンに記述されている英語名を記述します。)


●サンプルコード
   UseButton_after.html


<!DOCTYPE html>
<html>
  <head>
    <title>UseImage</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="UseImage.css">
    <link rel="stylesheet" type="text/css" href="Hover_shake_rotate.css">
  </head>
  <body>
    <p>■使用方法の説明2</p>
    <div id="stage">
      <img id="pict1" class="side_to_side" src="images/LeftHandS.png" alt="Normal Color Hand">
      <img id="pict2" class="large_and_small" src="images/LeftHand2S.png" alt="Green Color Hand">
      <img id="pict3" class="roll_clockwise" src="images/LeftHand3S.png" alt="Yellowl Color Hand">
      <img id="pict4" class="roll_right" src="images/LeftHandS.png" alt="Normal Color Hand">
  </body>
</html>
			

(画像をクリックするとサンプルページが開きます。)
Use Image after

【 使い方 3 】~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~

Hover_moving.cssはテキスト(文字)にもアニメーションやトランジションの変化を付けることができます。
1.あなたのHTML文書にテキストを作ります。
Use Text before

   サンプルコード
   UseText_before.html


<!DOCTYPE html>
<html>
  <head>
    <title>UseText</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="UseText.css">
  </head>
  <body>
    <p>■使用方法の説明3</p>
    <div id="stage">
      <div id="div1">テキスト1</div>
      <div id="div2">テキスト2</div>
      <div id="div3">テキスト3</div>
      <div id="div4">テキスト4</div>
  </body>
</html>
			

   UseButton.css


#stage {
  margin: 0px 0px 0px 0px;
  width: 700px; height: 400px;
  border: solid 1px black;
  text-align: center;
  font: bold 40px "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana;
  line-height: 100px;
  cursor: default;
  position: relative;
}
#div1 {
  top: 50px; left: 100px;
  width: 200px; height: 100px;
  color: blue;
  position: absolute;
}
#div2 {
  top: 50px; left: 400px;
  width: 200px; height: 100px;
  color: red;
  position: absolute;
}
#div3 {
  top: 220px; left: 100px;
  width: 200px; height: 100px;
  color: orange;
  position: absolute;
}
#div4 {
  top: 220px; left: 400px;
  width: 200px; height: 100px;
  color: green;
  position: absolute;
}
			

2.HTML文書にクラスライブラリCSSとボタンにクラスを追記します。

UseText_before.htmlに次のように追記(下記サンプルコードの赤字の部分)するだけで、次の画像のようにテキストにトランジションやアニメーションの変化を付けることができます。
①<head>部の中にHover_moving.cssを追記します。
   (注意:必ずcssの記述の一番最後に追加してください。)
②テキストのdiv要素にclass属性を追記します。
   (class属性は「サンプル(アニメーション・トランジションの一覧)」のボタンに記述されている英語名を記述します。)


●サンプルコード
   UseText_after.html


<!DOCTYPE html>
<html>
  <head>
    <title>UseText</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="UseText.css">
    <link rel="stylesheet" type="text/css" href="Hover_shake_rotate.css">
  </head>
  <body>
    <p>■使用方法の説明3</p>
    <div id="stage">
      <div id="div1" class="side_to_side">テキスト1</div>
      <div id="div2" class="large_and_small">テキスト2</div>
      <div id="div3" class="roll_clockwise">テキスト3</div>
      <div id="div4" class="roll_right">テキスト4</div>
  </body>
</html>
			

(画像をクリックするとサンプルページが開きます。)
Use Text after