css3动画
@keyframes
指定动画名称和动画效果
@keyframes names { from{opacity:1;} to{ opacity:0; } } @keyframes names1 { 0%{color:#f00} 40%{color:#333} 100%{color:#999} }
animation
复合属性。检索或设置对象所应用的动画特效
- animation-name: 动画名称
- animation-duration: 动画的持续时间
- animation-timing-function: 过渡类型
- linear: 线性过渡
- ease: 平滑过渡
- ease-in: 由慢到快
- ease-out: 由快到慢
- ease-in-out: 由慢到快再到慢
- cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
- animation-delay: 动画延迟的时间
- animation-iteration-count: 动画的循环次数
- animation-direction: 动画在循环中是否反向运动
- normal: 正常方向
- alternate:正常与反向交替
- animation-play-state: 动画的状态
- running: 运动
- paused: 暂停
.a1{ -webkit-transform:translate(60px); -webkit-animation:animations 2s ease-out; -moz-transform:translate(55px); -moz-animation:animations 2s ease-out; -o-transform:translate(55px); -o-animation:animations 2s ease-out; -ms-transform:translate(55px); -ms-animation:animations 2s ease-out; transform:translate(55px); animation:animations 2s ease-out; } @-webkit-keyframes .. @-moz-keyframes .. @-o-keyframes .. @-ms-keyframes .. @keyframes animations{ 0%{transform:translate(0);opacity:0;} 50%{transform:translate(30px);opacity:1;} 70%{transform:translate(35px);opacity:1;} 100%{transform:translate(60px);opacity:0;} }
transition
复合属性。检索或设置对象变换时的过渡
- tranisiton-property: 设置参与过渡的属性
- all: 所有可以进行过渡的css属性
- none: 不指定过渡的css属性
- <property>:指定要进行过渡的css属性
- tranisition-duration: 设置过渡的持续时间
- transition-timing-function: 设置过渡的动画类型
- linear: 线性过渡
- ease: 平滑过渡
- ease-in: 由慢到快
- ease-out: 由快到慢
- ease-in-out: 由慢到快再到慢
- cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
- tranisition-delay: 设置延迟过渡的时间
例如
缩写方式:transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
拆分方式:
transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;
transform(2D转换)
none:无转换
matrix(<number>,<number>,<number>,<number>,<number>,<number>):以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>]):指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
translateX(<length>):指定对象X轴(水平方向)的平移
translateY(<length>):指定对象Y轴(垂直方向)的平移
rotate(<angle>):指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义
scale(<number>[, <number>]):指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scaleX(<number>):指定对象X轴的(水平方向)缩放
scaleY(<number>):指定对象Y轴的(垂直方向)缩放
skew(<angle> [, <angle>]):指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
skewX(<angle>):指定对象X轴的(水平方向)扭曲
skewY(<angle>):指定对象Y轴的(垂直方向)扭曲
transform:matrix(0,1,1,1,10,10) //矩阵变换
transform:rotate(-15deg) //旋转
transform:translate(5%,10px) // 平移
transform:scale(.8) //缩放
transform:skew(-5deg) //扭曲