css3动画

@keyframes

指定动画名称和动画效果

@keyframes names {
  from{opacity:1;}
  to{ opacity:0; }
}

@keyframes names1 {
  0%{color:#f00}
  40%{color:#333}
  100%{color:#999}
}

View Code

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;}
}

View Code

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;

View Code

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) //扭曲

View Code

 

转载于:https://www.cnblogs.com/ywang/p/7824944.html