CSS3动画

先贴几段代码,有时间慢慢研究一下

我又回来了.总结一下

CSS3 2D 转换
CSS3 3D 转换
CSS3 过渡
CSS3 动画

CSS3 2D 转换
2D Transform 方法
transform: translate(50px,100px);
translate(x,y)沿着 X 和 Y 轴移动元素。
translateX(n)沿着 X 轴移动元素。
translateY(n)沿着 Y 轴移动元素。

transform: scale(2,4);缩放转换，改变元素的宽度和高度。
scaleX(n) 缩放转换，改变元素的宽度。
scaleY(n)缩放转换，改变元素的高度。

transform: rotate(30deg);旋转角度。

skew(x-angle,y-angle)倾斜转换，沿着 X 和 Y 轴。
skewX(angle)倾斜转换，沿着 X 轴。
skewY(angle)倾斜转换，沿着 Y 轴。

matrix(n,n,n,n,n,n)方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。


CSS3 3D转换
transform: rotateX(120deg);
transform: rotateY(130deg);
CSS3 过渡
transition
transition:all ease 1s;一秒过渡上面所有的元素
transition:transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; 一秒过渡所写元素
CSS3 动画
改变背景色和位置：
animation:myfirst 5s;
animation-iteration-count:3; 播放动画三次
animation-iteration-count:infinite 规定动画应该无限次播放。
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}