标签：
此文章仅为转发，非原创，原文http://www.cnblogs.com/zhuanggege/p/5754543.html
请支持原创
@keyframes
规定动画，必须定义动画的名称，动画时长的百分比，一个或多个css样式属性
以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%
语法：@keyframes animationname {keyframes-selector {css-styles;}}
animation
是一个简写属性，用于设置六个动画属性：
animation-name
规定@keyframes动画的名称
animation-duration
规定动画完成一个周期所花费的秒或毫秒。默认是0
animation-timing-function
规定动画的速度曲线，速度曲线用于使变化更为平滑
linear 动画从头到尾的速度是相同的
ease 默认。动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
cubic-bezier(n,n,n,n) 在cubic-bezier函数中自己的值。可能的值是从0到1的数值
animation-delay
规定动画何时开始。默认是0
animation-iteration-count
规定动画被播放的次数。默认是1
infinite 规定动画应该无限次播放
animation-direction
规定动画是否在下一周期逆向地播放
normal 默认值。动画应该正常播放
alternate 交替更改动画的执行方向
reverse 反方向执行动画
alternate-reverse 从反方向开始交替更改动画的执行方向
animation-play-state
规定动画是否正在运行或暂停。默认是"running"
paused 规定动画已暂停
running 规定动画正在播放
animation-fill-mode
规定动画在播放之前或之后，其动画效果是否可见
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)
backwards 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值(在第一个关键帧中定义)
both 向前和向后填充模式都被应用
<div> </div>
<style>
div{
width: 100px;
height: 100px;
background: red;
animation: demo 5s ease infinite;
position: relative;
}
@keyframes demo{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px; border-radius: 50%;}
50% {background:blue; left:200px; top:200px; border-radius: 0%;}
75% {background:green; left:0px; top:200px; border-radius: 50%;}
100% {background:red; left:0px; top:0px;}
}
</style>
<div>
<p>目前主流浏览器chrome、safari、firefox、opera已经支持CSS3大部分功能了，IE10以后也开始全面支持CSS3了</p>
</div>
<style>
div{
margin: 0 auto;
width: 500px;
height: 35px;
overflow: hidden;
position: relative;
}
p{
width: 100000px;
position: absolute;
animation: divv 10s linear infinite;
}
@keyframes divv{
from{ left: 500px; }
to{ left: -800px; }
}
</style>
实现网页淡入效果：
<style>
body{
animation: demo 3s linear;
}
@keyframes demo{
0%{
opacity: 0;
background: #fff;
}
100%{
opacity: 1;
background: #fff;
}
}
</style>
transition
是一个简写属性，用于设置四个过渡属性：
transition-property
规定应用过渡的css属性的名称。(当指定的css属性改变时，过渡效果将开始)
过渡效果通常在用户将鼠标指针浮动到元素上时发生
none 没有属性会获得过渡效果
all 所有属性都将获得过渡效果
property 定义应用过渡效果的css属性名称列表，列表以逗号分隔
transition-duration
定义过渡效果花费的时间。默认是0
transition-timing-function
规定过渡效果的时间曲线。默认是"ease"
linear 规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（等于cubic-bezier(0.25,0.1,0.25,1)）
ease-in 规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）
ease-out 规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）
ease-in-out 规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值
transition-delay
规定过渡效果何时开始。默认是0
<div>示例</div>
<style>
div{
display: inline-block;
background: red;
color: green;
font-size: 40px;
transition: background 1s linear, color 1s linear, font-size 1s linear;
}
div:hover{
background: green;
color: red;
font-size: 60px;
}
</style>
2D Transform Functions：
matrix()：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()：指定对象X轴（水平方向）的平移
translatey()：指定对象Y轴（垂直方向）的平移
rotate()：指定对象的2D rotation（2D旋转），需先有 <‘ transform-origin ‘> 属性的定义
scale()：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：指定对象X轴的（水平方向）缩放
scaley()：指定对象Y轴的（垂直方向）缩放
skew()：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx()：指定对象X轴的（水平方向）扭曲
skewy()：指定对象Y轴的（垂直方向）扭曲
transform: translate(100px,200px) rotate(45deg) scale(2);
transform: rotate(45deg) scale(2) translate(100px,200px);
第一个先移动，然后旋转，最后缩放。第二个先旋转，然后缩放，最后移动
两条代码的参数都一样，但变形的方法先后顺序不一样，结果也会不一样
transform-origin 指定变形的基准点
基准点在元素水平方向上的位置可以指定的值为：left，center，right
基准点在元素垂直方向上的位置可以指定的值为：top，center，bottom
<div class="demo"> </div>
<style>
.demo{
width: 100px;
height: 100px;
margin: 100px auto;
border-radius: 50px;
background: red;
transform-origin: center;
transform: rotate(45deg) translate(0%,0%);
transition: all 1s;
}
.demo:hover{
background: blue;
transform: rotate(450000deg) translate(5%,5%);
}
</style>
3D Transform Functions：
matrix3d()：以一个4x4矩阵的形式指定一个3D变换
translate3d()：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatez()：指定对象Z轴的平移
rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()：指定对象在x轴上的旋转角度
rotatey()：指定对象在y轴上的旋转角度
rotatez()：指定对象在z轴上的旋转角度
scale3d()：指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()：指定对象的z轴缩放
perspective()：指定透视距离
标签：
原文地址：http://www.cnblogs.com/q905120456/p/5793299.html
