css3 动画 实例 媒体查询

 

 

1.定义动画效果 @keyframes 

参考资料：http://www.w3school.com.cn/css3/css3_animation.asp

推荐是 10% 到100%状态兼容最好；@keyframes 后面跟动画名称

@keyframes scrollrightToLeft{
10% {}
50%{}
100%{}
}


@keyframes scrollrightToLeft{
from {}
top {}

}

2.绑定执行动画 animation:动画名 动画执行时间

 

参考资料：http://www.w3school.com.cn/cssref/pr_animation.asp

div.a1{

animation:scrollrightToLeft 2s;

}

 

考虑到兼容性

-moz-animation:scrollrightToLeft 2s;

-o-animation:scrollrightToLeft 2s;

-webkit-animation:scrollrightToLeft 2s;

 

3.动画常用效果

opacity 透明度  opacity:0.5

移动

 

4.媒体查询@media screen and(min-width:X){} 

实例：

@media screen and (min-width : 414px) and (max-width : 980px){
html{
width: 1200px;
}
}

 

min-width:大于等于 X

max-widht:小于等于 X

注：X为手机屏幕宽度

rem适配 还是没有完全