CSS3 matrix双板划水、拉伸、打板动画实例animation
matrix 在 CSS3 中用于制作对象的矩阵效果，把处于不同的状态的矩阵连接起来就变成了动画。单用 matrix 制作动画尽管变化形式不多，但组合合理一样可以制作出新颖的动画。
以下就用 matrix 制作了四个动画实例，分别为双板划水、快速拉伸、摇板和打板动画效果；尽管它们都是在几个状态之间转化，却是完全不一样的动画效果，下面分别看这几个实例是如何制作的。
一、matrix双板划水动画
html代码：
<div class="matrixdiv matrixsa">matrix-animation</div>
<div class="matrixdiv matrixsb">matrix-animation 双板划水动画效果</div>
CSS样式：
.matrixdiv{width:300px;height:20px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}
.matrixsa{animation:matrix-animation 2s ease-out infinite forwards;}
.matrixsb{animation:matrix-animation 2s ease-out infinite forwards;}
@keyframes matrix-animation{
0%{transform:matrix(0,1,1,1,10,10);}
10%{transform:matrix(2,1,1,1,10,10);}
20%{transform:matrix(0,3,1,1,10,10);}
30%{transform:matrix(0,1,1,2,10,10);}
40%{transform:matrix(0,1,1,3,10,10);}
50%{transform:matrix(0,1,1,5,10,10);}
60%{transform:matrix(0,1,1,3,10,10);}
100%{transform:matrix(2,1,3,1,10,10);}
}
效果图：
效果图是两块板齐步运动，从斜变直，来回往复，就像两板块同步划水一般。
二、matrix快速拉伸动画
html代码：
<div class="matrixdiv matrixls">matrix-animation 快速拉伸动画效果</div>
CSS样式：
.matrixls{animation:matrixls-animation 2s ease-out infinite forwards;width:160px;height:100px; margin:1000px 0 0 100px;}
@keyframes matrixls-animation{
0%{transform:matrix(0,1,1,1,10,10);}
5%{transform:matrix(0,1,2,1,10,10);}
10%{transform:matrix(0,1,3,1,10,10);}
15%{transform:matrix(0,1,4,1,10,10);}
20%{transform:matrix(0,1,5,1,10,10);}
25%{transform:matrix(0,2,1,1,10,10);}
30%{transform:matrix(0,3,1,1,10,10);}
35%{transform:matrix(0,4,1,1,10,10);}
40%{transform:matrix(0,5,1,1,10,10);}
45%{transform:matrix(2,1,1,1,10,10);}
50%{transform:matrix(3,1,1,1,10,10);}
55%{transform:matrix(4,1,1,1,10,10);}
60%{transform:matrix(5,1,1,1,10,10);}
65%{transform:matrix(0,1,1,2,10,10);}
70%{transform:matrix(0,1,1,3,10,10);}
75%{transform:matrix(0,1,1,4,10,10);}
80%{transform:matrix(0,1,1,5,10,10);}
85%{transform:matrix(3,1,1,2,10,10);}
90%{transform:matrix(0,2,1,3,10,10);}
95%{transform:matrix(0,3,1,4,10,10);}
100%{transform:matrix(0,4,5,5,10,10);}
}
效果图：
动画在 matrix 平面的几种状态之间来回往复变化，不断的拉长又缩短，拉宽又变窄。
三、matrix 摇板动画实例
html代码：
<div class="matrixdiv matrixst">matrix-animation 平素摇板动画效果</div>
CSS样式：
.matrixst{animation:matrixst-animation 2s ease-out infinite forwards;width:240px;height:60px; margin:1000px 0 0 100px;}
@keyframes matrixst-animation{
0%{transform:matrix(0,4,5,5,10,10);}
40%{transform:matrix(3,4,5,5,50,10);}
80%{transform:matrix(0,4,5,1,10,10);}
100%{}
}
效果图：
四、matrix 打板动画实例
html代码：
<div class="matrixdiv matrixqk">matrix-animation 快节奏打板动画效果</div>
CSS样式：
.matrixqk{animation:matrixqk-animation 2s ease-out infinite forwards;width:270px;height:100px; margin:1000px 0 0 100px;}
@keyframes matrixqk-animation{
0%{transform:matrix(0,1,1,1,10,10);}
5%{transform:matrix(4,1,1,1,10,10);}
10%{transform:matrix(0,4,1,1,10,10);}
15%{transform:matrix(0,1,5,1,10,10);}
20%{transform:matrix(0,1,1,5,10,10);}
55%{transform:scale(1.8);}
100%{transform:scale(1);}
}
效果图：