ピックアップ記事

はじめてのhtml5 css3 アニメーション

ドットマリオ

はじめてのhtml5 css3

皆さんこんばんわ!!! 最近、蒸し暑かったですね!!

昨日の晩、鍼灸整骨院部門の副院長が足を捻ってケガをしました!!

珍しい、外反捻挫でなんと!! 三角靭帯だそうです!!゚(゚´Д`゚)゚

骨折したみたいで、なんかネタばりな感じですが、マジなので皆さん、ありす鍼灸整骨院へご来院の際は必ず、 多川先生へお慈悲な言葉と応援のねぎらいの言葉をお願い致します!!

さてアニメーションしていきますね

トランジションの基本プロパティ

セレクタの:hoverを使用するなどしてあるプロパティの値が変化するときに瞬時に入れ替わるのではなく 指定した時間をかけてアニメーションのように徐々に変化させるのがCSS3のトランディションです。 どのプロパティの値が変化したときにトランディションを適応するのかを指定するのが、

transition-propertyプロパティで、変化にかける時間はtorannsition-durationプロパティで指定します。

 

  • プロパティ名

transisonを適応するプロパティの名前をそのまま指定します カンマで区切って複数指定できます

  • all

transisonの適応が可能なすべてのプロパティに適応します。

  • none

transisonを適応しない

  • trannsison-durationに指定できる値

時間 tronsisonの変化にかける時間を単位付きの数値で指定します 単位には、s(秒)とms(ミリ秒)が指定できます。

transition-propertyとtransition-durationの使用例

さて具体的にどうなるのかサンプルでみてみましょう!!   htmlではpngデータ(透過png) を表示しています CSSとして、divの背景は道路を表示させておきます。 まあgifでもOKですね!!

 

background-size: cover;

 

<div style=”background: url(http://aliceplanblog.com/wp-content/uploads/2014/08/landscape_a02.png); background-size: cover; width: 600px; height: 300px;”><a style=”onmouseover=”:hover:transformlateX(300px);”><img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/mario.gif” alt=”ドットマリオ” transition-property: transform; transition-duration: 2s;></a></div>

 

 

それではデモってみます!!(´・ω・`)

 

 

ドットマリオ

 

 

できてますかね?
うごいていません笑

本来CSSは画像にスタイルを直接書くべきではないのだろうが、ちょっとはしょるためにやっているが、CSSを専用にしてアップしましょうか。笑

うーむどうしてもここでデモってみたい!!笑

CSSを本来なら分けて記述するので、専用にCSSを記述しときますね。笑

<img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/mario.gif” alt=”ドットマリオ” id=”dodmario”>

で、id=”dodmario”にCSSスタイルを当てはめていきます。

#dodmario {

transition-property: transform;

transition-duration: 2s

#dodmario:hover{

transform: translateX(300px);

}

それではデモってみましょう

ドットマリオ

 

さて?どうでしょうか?

やっと動きました!!面白いですね!!

これは

スマートフォンではJQで実装しないと無理なのでPCで見てみて下さいねヽ(´▽`)/

こんな感じでどんどん!!やってみますね☆

CSS3とhtml5でできたらPHPか、デザインか、scriptしていきますヽ(´▽`)/

 

この記事を書いた人

中村 真徳
中村 真徳
(株)アリスプラン 代表取締社長
サービスITソリューションで関わる人を幸せに
平成5年4月1日 髙松市より香川町剛柔流空手道スポーツ少年団 発足
平成22年11月 個人事業主開業
平成24年8月  株式会社アリスプラン 代表取締役
会社理念「サービスITソリューションで関わる人を幸せに」
道徳と利潤の調和を目指し日々奮闘中
趣味…自分がしたいことをするのが趣味です

この投稿者の最近の記事

関連記事

  1. ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    美肌

  2. 整骨院のはがき作成

    整骨院GWの販促はがきの作成

  3. 整骨院.求人.治療.高松.事故通院. 高松.整骨院.高松市.ムチウチ. 高松市.整骨院

    鍼灸学生 見学

  4. ぎっくり腰 高松市

    ぎっくり腰

  5. 整骨院.求人. 治療. 高松.事故通院. 高松.整骨院.高松市 ムチウチ, 高松市 整骨院

    事故に遭った際の悩み

  6. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    寒い日はシバリング

  7. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    雨の日に・・・

  8. ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    断食の結果

  9. はじめてのhtml5 css3

人気記事

  1. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  2. 予防体操 チラシ
  3. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  4. 高松市 猫背

PV解析

  • 391現在の記事:
  • 103820総閲覧数:
  • 104今日の閲覧数:
  • 121昨日の閲覧数:
  • 1036先週の閲覧数:
  • 1837月別閲覧数:
  • 72011総訪問者数:
  • 71今日の訪問者数:
  • 92昨日の訪問者数:
  • 655先週の訪問者数:
  • 1411月別訪問者数:
  • 83一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP