css拉伸动画,CSS3 matrix双板划水、拉伸、打板动画实例animation

matrix 在 CSS3 中用于制作对象的矩阵效果，把处于不同的状态的矩阵连接起来就变成了动画。单用 matrix 制作动画尽管变化形式不多，但组合合理一样可以制作出新颖的动画。

以下就用 matrix 制作了四个动画实例，分别为双板划水、快速拉伸、摇板和打板动画效果；尽管它们都是在几个状态之间转化，却是完全不一样的动画效果，下面分别看这几个实例是如何制作的。

一、matrix双板划水动画

html代码：

matrix-animation

matrix-animation 双板划水动画效果

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-animation

matrix-animation 双板划水动画效果

效果图是两块板齐步运动，从斜变直，来回往复，就像两板块同步划水一般。

二、matrix快速拉伸动画

html代码：

matrix-animation 快速拉伸动画效果

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-animation 快速拉伸动画效果

动画在 matrix 平面的几种状态之间来回往复变化，不断的拉长又缩短，拉宽又变窄。

三、matrix 摇板动画实例

html代码：

matrix-animation 平素摇板动画效果

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-animation 平素摇板动画效果

四、matrix 打板动画实例

html代码：

matrix-animation 快节奏打板动画效果

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

}

效果图：

matrix-animation 快节奏打板动画效果