<h2>Media Queryをアニメーションにする</h2>
<p>ウィンドウサイズに応じて横位置を変更する</p>
<style>
.anime_mq_left {
position: relative;
width: 70px;
height: 50px;
background: red;
top: 0;
left: 0;
transition: left 0.5s;
text-align: center;
color: #FFF;
clear: both;
}
.demo_txt{
text-align: center;
width: 65px;
float: left;
font-size: 12px;
background: #EEE;
margin: 5px 5px 5px 0;
}
@media (min-width: 0px) and (max-width: 640px) {
.anime_mq_left {
left: 0px;
}
}
@media (min-width: 641px) and (max-width: 960px) {
.anime_mq_left {
left: 70px;
}
}
@media (min-width: 961px) and (max-width: 1280px) {
.anime_mq_left {
left: 140px;
}
}
@media (min-width: 1281px) {
.anime_mq_left {
left: 210px;
}
}
</style>
<div style="width:100%;float:left;">
<div class="demo_txt">0 〜 640<br>left:0px</div>
<div class="demo_txt">641 〜 960<br>left:70px</div>
<div class="demo_txt">961 〜 1280<br>left:140px</div>
<div class="demo_txt">1281 〜<br>left:210px</div>
</div>
<div style="width:280px;background-color:#CCC;clear:both;">
<div class="anime_mq_left">left
</div>
</div>
<p>ウィンドウサイズに応じて縦位置を変更する</p>
<style>
.anime_mq_top {
position: relative;
width: 280px;
height: 30px;
background: blue;
top: 0;
left: 0;
transition: top 0.5s;
text-align: center;
color: #FFF;
clear: both;
}
.demo_txt{
text-align: center;
width: 65px;
float: left;
font-size: 12px;
background: #EEE;
margin: 5px 5px 5px 0;
}
@media (min-width: 0px) and (max-width: 640px) {
.anime_mq_top {
top: 0px;
}
}
@media (min-width: 641px) and (max-width: 960px) {
.anime_mq_top {
top: 30px;
}
}
@media (min-width: 961px) and (max-width: 1280px) {
.anime_mq_top {
top: 60px;
}
}
@media (min-width: 1281px) {
.anime_mq_top {
top: 90px;
}
}
</style>
<div style="width:100%;float:left;">
<div class="demo_txt">0 〜 640<br>top:0px</div>
<div class="demo_txt">641 〜 960<br>top:30px</div>
<div class="demo_txt">961 〜 1280<br>top:60px</div>
<div class="demo_txt">1281 〜<br>top:90px</div>
</div>
<div style="height:120px;width:280px;background-color:#CCC;clear:both;">
<div class="anime_mq_top">top
</div>
</div>