怎样写css3动画

1.动画是由变换和过渡效果组成，因此需要先熟悉过渡。

变换：transform属性如下

none：

无转换

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轴的（垂直方向）扭曲

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()：

指定透视距离

过渡：transition四个属性如下：

<' transition-property '>：

规定设置过渡效果的 CSS 属性的名称。

<' transition-duration '>：

规定完成过渡效果需要多少秒或毫秒。

<' transition-timing-function '>：

规定速度效果的速度曲线。

<' transition-delay '>：

定义过渡效果何时开始。

其中transition-timing-function的参数有：

缩写方式：

transition: all .5s ease-in .1s;

如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开如：<br />

div{transition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;}

浏览器支持：

2.有了以上条件，就可以写动画了（animation）

必须条件：@keyframes 规则用于创建动画

.a1{

    -webkit-transform:translate(60px);

    -moz-transform:translate(60px);

    transform:translate(60px);

    -webkit-animation:animations 2s ease-out forwards;

    -moz-animation:animations 2s ease-out forwards;

    animation:animations 2s ease-out forwards;

}

@-webkit-keyframes animations{

    0%{-webkit-transform:translate(0);opacity:0;}

    50%{-webkit-transform:translate(30px);opacity:1;}

    70%{-webkit-transform:translate(35px);opacity:1;}

    100%{-webkit-transform:translate(60px);opacity:0;}

}

@-moz-keyframes animations{

    0%{-moz-transform:translate(0);opacity:0;}

    50%{-moz-transform:translate(30px);opacity:1;}

    70%{-moz-transform:translate(35px);opacity:1;}

    100%{-moz-transform:translate(60px);opacity:0;}

}

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

}

.a3{

    opacity: 0;

    -webkit-transform:translate(100px);

    -moz-transform:translate(100px);

    transform:translate(100px);

    -webkit-animation:animations3 2s ease-out 2s forwards;

    -moz-animation:animations3 2s ease-out 2s forwards;

    animation:animations3 2s ease-out 2s forwards;

}

@-webkit-keyframes animations3{

    0%{-webkit-transform:translate(160px);opacity:0;}

    50%{-webkit-transform:translate(130px);opacity:1;}

    70%{-webkit-transform:translate(125px);opacity:1;}

    100%{-webkit-transform:translate(100px);opacity:0;}

}

@-moz-keyframes animations3{

    0%{-moz-transform:translate(160px);opacity:0;}

    50%{-moz-transform:translate(130px);opacity:1;}

    70%{-moz-transform:translate(125px);opacity:1;}

    100%{-moz-transform:translate(100px);opacity:0;}

}

@keyframes animations3{

    0%{transform:translate(160px);opacity:0;}

    50%{transform:translate(130px);opacity:1;}

    70%{transform:translate(125px);opacity:1;}

    100%{transform:translate(100px);opacity:0;}

}

.a2{

    opacity: 0;

    text-align:center;font-size:26px;

    -webkit-animation:animations2 5s ease-in-out 4s forwards;

    -moz-animation:animations2 5s ease-in-out 4s forwards;

    animation:animations2 5s ease-in-out 4s forwards;

}

@-webkit-keyframes animations2{

    0%{opacity:0;}

    40%{opacity:.8;}

    45%{opacity:.3;}

    50%{opacity:.8;}

    55%{opacity:.3;}

    60%{opacity:.8;}

    100%{opacity:0;}

}

@-moz-keyframes animations2{

    0%{opacity:0;}

    40%{opacity:.8;}

    45%{opacity:.3;}

    50%{opacity:.8;}

    55%{opacity:.3;}

    60%{opacity:.8;}

    100%{opacity:0;}

}

@keyframes animations2{

    0%{opacity:0;}

    40%{opacity:.8;}

    45%{opacity:.3;}

    50%{opacity:.8;}

    55%{opacity:.3;}

    60%{opacity:.8;}

    100%{opacity:0;}

}

浏览器兼容：