转换（transform）
如大家了解的一样，转换分为2D转换和3D转换。利用CSS3的转换功我们能够对元素进行移动、缩放、转动、拉长或拉伸，并且能结合动画可以实现许多酷炫的效果。
使用转换功能需要使用：
{
-webkit-transform：；//Chrome Safari
-moz-transform：；//Firefox
-ms-transform：；//for IE9
-o-transform：；//Opera
transform：；
}
值得注意的是，这里设置之后，其尺寸改变不会影响到别的元素，像是脱离了文档流一样设置了relative，然而在元素上设置margin等属性仍然会在其本来的盒子上影响到文档流别的元素。一言以蔽之，设置transform后未脱离文档流。
2D转换
- translate（）——移动
- rotate（）——旋转
- scale（）——缩放
- skew（）——翻转，根据给定的水平线和垂直线参数翻转角度
- matrix（）
- transform-origin（）
translate（）
元素根据给定的坐标（x，y）位置参数从其位置移动。
注意，其实使用本方法就像设置relative一样，相对于原来位置偏移，且原位置仍然占据空间。
rotate（）
元素顺时针旋转给定角度（正值），逆时针则设置负值。eg：rotate（40deg）
旋转的元素，占据的空间仍然未变，像设置了定位relatvie一样，在此基础上旋转，未脱离文档流。
scale（）
元素的尺寸会根据设置得scale（）方法增加或减少。改变后他可能会覆盖在其他元素上。
如果只宽度或者高度尺寸变化，则可使用scaleX（）或者scaleY（）。
div
{
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-moz-transform: scale(2,4); /* Firefox */
-ms-transform: scale(2,4); /* IE 9 */
-o-transform: scale(2,4); /* Opera */
transform: scale(2,4);
}
skew（）
skew（x-angle，y-angle），沿X，Y偏转角度；
如果只给定一个值，即skew（angle），则会只向X轴偏转，但是我试了这样的写法skew（，angle），结果整个元素都不见了。求大家指教。
如果想只沿一个轴偏转，可以使用skewX（）或者skewY（）。
matrix（）
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
transform-origin（）
transform-origin属性允许您改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y轴。3D 转换元素还能改变其 Z 轴。
语法
transform-origin: x-axis y-axis z-axis;
3D转换
- rotateX（）
- rotateY（)
需要注意的是：opera不支持3D转换
transition（过渡）
兼容性（不支持IE9及之前版本）
{
-webkit-transition: width 2s; /* Safari 和 Chrome */
-moz-transition: width 2s; /* Firefox 4 */
-o-transition: width 2s; /* Opera */
transition: width 2s;
}
过渡属性
- transtion
- transtion-property
- transtion-durtion
- transtion-timing-function
- transtion-delay
如何工作？
SS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 希望添加效果的CSS属性
- 效果时长
通常，该属性会结束JS和伪类使用
eg：
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
动画（animation）
CSS3动画属性
- @keyframes——规定动画
- animation——所有动画简写属性，除animation-play-state
- animation-name——规定@keyframes动画名称
- animation-durtion——规定一个动画花费的时间（ms或s），默认0
- animation-timing-function——规定动画的速度曲线，默认“ease”
- animation-delay——规定动画何时开始，默认0
- animation-iteration-count——规定动画播放次数，默认1
- animation-direction——规定动画是否在下一周期逆向播放，默认normal
- animation-play-state——规定动画是否正在运行或暂定默认“running”
- animation-fill-mode——规定对象时间之外的状态
兼容（IE9及之前版本不支持）
-webkit-animation:动画名;
-moz-animation:动画名;
-o-animation:动画名;
animation:动画名;
相应的动画帧：
@keyframes 动画名
{
}
@-moz-keyframes 动画名 /* Firefox */
{
}
@-webkit-keyframes 动画名 /* Safari 和 Chrome */
{
}
@-o-keyframes 动画名 /* Opera */
{
}
众所周知，需在 CSS3 中创建动画，就得学习@keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
那么什么是动画呢？
动画是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数。最好用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。始终定义 0% 和 100% 选择器。能得到最佳的浏览器支持。
animation-timing-function
- linear：匀速
- ease：低速开始，加快，结束前变慢
- ease-in：低速开始
- ease-out：低速结束
- ease-in-out：低速开始和结束
- cubic-bezier（n，n，n）：未知
animation-direction
- normal：默认（正向）
- alternate：反向
animation-iteration-count
- n：播放次数
- infinite：无限播放
animation-play-state（）
- paused
- running
animation-fill-mode
- none:不改变默认行为
- forwards：动画完成后，保持最后一个属性值（最后一个关键帧定义）
- backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
- both：向前和向后填充模式都被应用。
动画实例
一个简单的天气预报模型，也是我在微博上看到的，就下载源码研究了一下。供大家学习参考。
HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>aimation</title>
<link rel="stylesheet" href="weather.css" />
</head>
<body>
<div class="container">
<div class="sunny"></div>
<div class="cloudy"></div>
<div class="rainy"></div>
<div class="rainbow"></div>
<div class="starry"></div>
<div class="stormy"></div>
<div class="snowy"></div>
</div>
</body>
</html>
具体可以前去纯CSS天气预报看看效果和源码。
网友评论