皆様おはようございます、
中村です。
最近、店舗の模様替えとアンケートからの組織の変化のスピードが早くて、かなり嬉しいことです。
来年のもう一店舗と、将来的な増えるであろう店舗、
楽しみですね。
まずは、介護と、来年に向けてもう一店舗鍼灸整骨院を国分寺あたりでだします。
これは確定ですね。
でかい会社にするため、OtoOの意識を高めていきたいと思います。
それでは今回はトランディション一括指定です。
transition: プロパティ デュレーション;
といった感じで値がでます。
<div style=”background:url(http://aliceplanblog.com/wp-content/uploads/2014/08/landscape_a02.png); background-size: cover; width: 600px; height:300px;”><img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/mario.gif” alt=”ドットマリオ” id=”dodmario3″></div>
#dodmario3
{
transition: transform 3s liner;
}
#transition3:hover
{
transform: translateX(400) scale(0.1)
}
こんな感じでデモってみます！！ヽ(´▽｀)/
どうですか？？
マリオが右にはしっていってますね！！笑
アニメーション関連プロパティ
CSSのアニメーションは簡単に言えばトランディションを連続で実行させているようなものなのです。
アニメーション全体の時間中のどの地点でどのプロパティがどの状態になるのかを
@keyframes ほにゃらら {
0% {
プロパティ: 値;
}
実数% {
プロパティ: 値;
}
100% {
プロパティ: 値;
}
}
では解説していきますヽ(´▽｀)/
初めに
@keyframes と書き、半角スペースをつけて、名前をつけます。
14年3月の時点では、ベンダープレフィックスをかいておくべきです。
対応していないブラウザがあるみたいですので、確認してみてくださいね！！ヽ(；▽；)ノ
それではデモしてみますね！！
<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=”ドットマリオ” -webkit-animation: dod1 0.5s infinite ease-out alternate,dod2 infinite liner alternate;>
これわ画像に対して、animation: 名前 時間 どのような速さで 再生,名前 時間 どのような感じで 交互;
と書かれてますね。
しかも、コンマで複合アニメーションができます。
@keyframes dod1 {
0% { top:50px; }
100% { top:0px; }}
@keyframes dod2{
0% { left:0px; }
100% { left:500px; }
}
ではデモってます。
できていると、動きがでます！！
どうですか？？
アニメーションっておもしろいですね！！
というか、単語覚えるのが、、今更ですが、大変です！！
それでは、今日も肌寒いですが、頑張っていきましょう！！
have a nice day!!
