css3: 基本知识记录

1、transition过渡；

元素从一种样式到另一种样式添加效果；

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

2、动画（@keyframes, animation)；

@keyframes:用于创建动画；创建由当前样式逐渐为新样式的动画效果；

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
 
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
 
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

上面是定义动画规则；

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

将myfirst动画绑定到div上；

3、导航伸缩；

@media screen and (max-width: 1200px) {       //1200px以上，导航侧边栏出现，占总宽度的30%;
  #fh5co-aside {
    width: 30%;
  }
}
@media screen and (max-width: 768px) {         //768px以下, 导航侧边缩进去；
  #fh5co-aside {
    width: 270px;
    -moz-transform: translateX(-270px);
    -webkit-transform: translateX(-270px);
    -ms-transform: translateX(-270px);
    -o-transform: translateX(-270px);
    transform: translateX(-270px);
  }
}

4、div固定位置

position: fixed;  固定位置，不随页面滚动；

注： 该博文为扩展型；