CSS3で動かす（２） transformプロパティ translate編
｜
目次
scaleに続き今度はCSS3の「transform」プロパティtranslateを使って色々な動きを作ってみます。
scale編 縮尺はこちら
rotate編 回転はこちら
skew編 傾斜はこちら
CSS3の「transform」プロパティ translate編
translateは移動です。画像は噂？のプリンごはんさんです。translateを使う(X方向Y方向 同時指定)
translate(X方向の移動距離, Y方向の移動距離)HTML
<div class="pringohan_tlXY">
<img src="imges/pringohan.png" alt="">
</div>
CSS
.pringohan_tlXY img {
-webkit-animation:anime-pringohanTLXY 2s infinite linear;
animation:anime-pringohanTLXY 2s infinite linear;
}
@keyframes anime-pringohanTLXY {
from{
-ms-transform:translate(0,0);
-webkit-transform:translate(0,0);
transform:translate(0,0);
}
to{
-ms-transform:translate(100px,30px);
-webkit-transform:translate(100px,30px);
transform:translate(100px,30px);
}
}
結果はこれ
スポンサードリンク
translateを使う (X方向)
translateX(X方向の移動距離)HTML
<div class="pringohan_tlX">
<img src="imges/pringohan.png" alt="">
</div>
CSS
.pringohan_tlX img {
-webkit-animation:anime-pringohanTLX 2s infinite linear;
animation:anime-pringohanTLX 2s infinite linear;
}
@keyframes anime-pringohanTLX {
from{
-ms-transform:translateX(0);
-webkit-transform:translateX(0);
transform:translateX(0);
}
to{
-ms-transform:translateX(100px);
-webkit-transform:translateX(100px);
transform:translateX(100px);
}
}
結果はこれ
translateを使う (Y方向)
translateY(Y方向の移動距離)HTML
<div class="pringohan_tlY">
<img src="imges/pringohan.png" alt="">
</div>
CSS
.pringohan_tlY img {
-webkit-animation:anime-pringohanTLY 2s infinite linear;
animation:anime-pringohanTLY 2s infinite linear;
}
@keyframes anime-pringohanTLY {
from{
-ms-transform:translateY(0);
-webkit-transform:translateY(0);
transform:translateY(0);
}
to{
-ms-transform:translateY(100px);
-webkit-transform:translateY(100px);
transform:translateY(100px);
}
}
結果はこれ
目に優しいライトで作業するように心がけています。
スポンサードリンク
コメントを書き込む