CSS3弹跳的小球动画

CSS3弹跳的小球动画

<style>

*{

margin: 0;

padding: 0;

list-style: none;

}

html,body{

width: 100%;

height: 100%;

}

body{

min-height: 100vh;

background-color: #eee;

color: #fff;

}

.container{

width: 580px;

height: 143px;

/* outline: 1px dashed red; */

/* 绝对定位 */

/* 使用这种写法，也可以让 一个容器 水平，垂直 居中显示 */

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

margin: auto;

}

.container .ball{

/* 浮动 */

float: left;

margin-right: 50px;

}

/* :last-of-type 序选择器  ---表示容器中的最后一个元素 */

.container .ball:last-of-type{

margin-right: 0;

}

.container .ball img{

width: 160px;

}

/* 给三个小盒子，添加 定位，让他们 最初  “出现在哪里”----这个地方的定位，

       和布局没有关系，和你要做的 弹跳的 位置 有关系！！ */

.ball{

position: absolute;

top: 0;

left: 50%;

margin-left: -80px;

}

 

/* css3中的动画序列（排列动画）---给一个元素身上，添加多个动画效果 */

.ball1{

/* 动画

           tiao1 动画名称

           0.5s  动画完成时间

           ease-in 速度

           1 动画执行的次数

           forwards 动画执行到最后一帧停止

           */

/* tiao2 0.2s ease-out 0.5s 1 forwards  其中， 0.5s动画延迟时间，表示 时间到0.5秒的时候，再执行tiao2这个动画 */

/*

               

           */

animation: tiao1 0.5s ease-in 1 forwards,

tiao2 0.2s ease-out 0.5s 1 forwards,

tiao3 0.2s ease-out 0.7s 1 forwards,

tiao4 0.15s ease-out 0.9s 1 forwards,

tiao5 0.15s ease-in 1.05s 1 forwards,

leftMove 0.4s ease-out 1.2s 1 forwards;

}

.ball2{

animation: tiao1 0.5s ease-in 1 forwards,

tiao2 0.2s ease-out 0.5s 1 forwards,

tiao3 0.2s ease-out 0.7s 1 forwa