CSS动画

2D转换：

　　translate()

　　rotate()

　　scale()

　　skew()

　　matrix()

.div{

　　transform:translate(100px(X坐标),100px(Y坐标));

　　-webkit-transform:translate(100px(X坐标),100px(Y坐标)). //safari.  chrome

　　-ms-transform:translate(100px(X坐标),100px(Y坐标))//IE

　　-o-transform:translate(100px(X坐标),100px(Y坐标))//opera

　　-moz-transform:translate(100px(X坐标),100px(Y坐标))//firefox

　　transform:rotate(180deg);

　　transform:scale(1(宽度)，2（高度）)

　　transform:skew(50deg(围绕x轴旋转的度数)，50deg(围绕y轴旋转的度数))

}

3D转换：

　　rotateX()

　　rotateY()

　　transform:rotaeX(100deg)

 

 

///过渡

transition。    设置四个过渡属性

transition-property.    过渡的名称

transition-duration。  过渡效果花费的时间

transition-timing-function。   过渡效果的时间曲线

transition-delay.     过渡效果开始时间

 

trandition:width 2s,height 2s,transform 2s;

transform:rotate(360deg);

///动画

CSS3动画需要遵循@keyframes规则

　　规定动画的时长

　　规定动画的名称

　　animation:anim 5s;

@keyframes anim{

　　0%{

　　background:red;top:0px;

}

　　25%{

　　backgroound:blue;left:200px;top:0px;

}

　　50%{

　　background:#ccffcc;left:200px;top:200px

}

　　75%{

　　background:#00ffff;left:0;top:200px;

}

　　100%{

　　background:red;left:0px;top:0px;

}

 

}

@-webkit-keyframes anim{

　　

0%{

　　background:red;top:0px;

}

　　25%{

　　backgroound:blue;left:200px;top:0px;

}

　　50%{

　　background:#ccffcc;left:200px;top:200px

}

　　75%{

　　background:#00ffff;left:0;top:200px;

}

　　100%{

　　background:red;left:0px;top:0px;

}

 

}

}

///多列

column-count:4分成四列

column-gap:30px;每一列中间间隔

column-rule:5px outset #ff0000;每列中间分隔的线的宽度及颜色

 

瀑布流效果

.container{

　　column-width:250px;

　　-webkit-column-width:250px;

　　column-gap:5px;

　　-webkit-column-gap:5px;

}

.contain div{

　　width:250px;

　　margin:5px 0;

}

 

转载于:https://www.cnblogs.com/xiaoqianliu/p/9118326.html