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 过渡transitiontransition: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;}}