CSS3学习随记-色块移动动画

 记录一下自己学习css和css3时做的小东西

具体效果为色块向右移动拼合成新形状，随后浮现出文字

<div class="div_all">
		<div class="div_100px frames_a1_5s"></div>
		<div class="div_100px frames_a2_5s" style="position: relative;top: -100px;"></div>
		<div class="div_100px frames_a3_5s" style="position: relative;top: -200px;"></div>

		<div class="div_100px frames_text_5s div_font"><p>Keyframes</p></div>
</div>

/*色块基础定义*/
.div_all {
    width: 400px;
    height: 100px;
}
.div_100px {
    width: 100px;
    height: 100px;
    background: #FFB6C1;
}
.div_font {
    position: relative;
    top: -300px;
    left: 300px;
    text-align: center;
    background-color: transparent;