おはようございます、中村です
久々に、クライアントさんのワードプレスをテーマから作ってたものを、
編集してキレイになってきているところです！(´・ω・｀)
実は今日も朝、五時半から目が覚めて、、無駄にネットサーフィンしたりと、
ちょっと時間を無駄遣いしてしまいました。ガーン
で、やはり最近思うのは、「疑うな、信じるな、確かめろ」
コレ大事だと思います。新聞やニュースはあまりみないようにしています、
なぜかというと必要最低限の会話が成り立つぐらいの幅ひろい知識は必要ですが、
そのあたりは情報過多な時代、自分で必要な栄養を選ぶのと同じように、必要な情報を選ぶようにしていかなければダメな気がします。
なんか結局、生き物としての普遍的な大原則の中で生きているのは間違いないものなので、
いつかは死ぬであろうし、自然界でも、市場と同じで変化できなければ淘汰されるわけですし、
どう考えても自然には勝てないわけで、、、あとは自分の宇宙の解釈が存在するだけ。
という感じですかね。つまり、のるかそるかは結局のところ、どんなにうまいこといっても、
運なんですよ、そこに生まれた境遇、人と出会うタイミング、何かを行動し起こること。
これって、現在進行形で未来ができているので結局、運と行動意思なんですよ。
※効率的だったり、加速がどうのは別として。
未来を自分の思い描いていることすら、自分の限界であって、
自分の思い込みにしか、すぎないわけなわけです。笑
だって、なにも知らない先住民という人たちが、高層ビルなんてもの想像できないでしょ。
せいぜい、村の村長になって、レンガの家を建てたい。ぐらいのものだと思います。
まず、知らないわけなんで、ということは、行動意思すら、自分自身の思い込みになってくるわけなのです。
つまり今自分が選択したことは自分が選んだようで、限られた中で選んでいるという事実ですね。笑
なので、自分の体験以上のこと、見て感じたこと以上のことは想像も選択もできないということですね。
ちょっとでも、社員や家族に視野が広がり、選択の幅が広がるような体験をさせてあげたいですね(´・ω・｀)
ということで。
まずはシンガポール目指します！！笑
それではWEBやっていきます。
トランディションのその他のプロパティです。
transition-propertyとtransition-duration 勉強をしました。
property でどうするか書いて transfrom で
duration で変化の秒数を書き加えます。
で、:hover でtransfrom 変化内容
translate(正右負逆px or %、正下負逆px or %) skew(ほにゃららdeg)
で記述していきます。
とまあ、いわいる復習ですね、
で、
transition-delay で、開始を遅らせるようにできるプロパティです！！
例えば、マウスを上にもってきてら次、二秒後なら、
2s ミリ秒後なら 2ms
こんな感じになりますね。
で次は流れる速さです。
ここまでついてこれてますか？
transition-duration で期間
発動タイミングを遅らせるのが transition-delay
です。どちらとも上記の s or ms
始めから終わりまでの時間は transition-duration で区切ります。
その時間内での加速や減速を
transition-timing-function プロパティでします。
functionはphpでもおなじみですね！！笑 和訳だと機能と読みたいですが、、、笑
初期値は ease です。
transition-timing-function で指定できる要素
- ease 加速してゆっくりして終わる
- ease-in ゆっくりと始まり 一定速度で終わります
- ease-out 一定速度で始まり ゆっくりと終わる
- ease-in-out ゆっくりと終わり ゆっくりと終わります
- liner 最初から最後まで一定の速度で変化します
こんな感じですね、それではデモっていきます。
<div style=”width: 600px; height: 300px; background:url(http://aliceplanblog.com/wp-content/uploads/2014/08/landscape_a02.png); background-size:cover;”><img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/mario.gif” alt=”ドットマリオ” id=”dodmario2″> </div>
CSSは、
#dodmario2 ｛ transition-property: transform; transition-duration: 2s; transition-timing-function: ease-in-out;｝
#dodmario2:hover{ transform: translateX(300px); }
どうですか？できていますか？笑
この記事を書くにあたって色々なCSS3の記事みましたが、
私なんかひよっこでした！！笑
もっと勉強して頑張りたいと思います！！
次回は今度こそ、アニメーションをしたいと思います。笑
それではサランヘヨ！！
