CSS3小球掉落依次排列动画
CSS3小球掉落依次排列动画
html:
<div id="wrap"> <!-- div.pic*3>img --> <div class="pic1"><img src="img/1.png" alt=""></div> <div class="pic2"><img src="img/2.png" alt=""></div> <div class="pic3" style="margin-right:0;"><img src="img/3.png" alt=""></div> </div>
css:
*{
margin: 0;
padding: 0;
}
body{
background-color: #eee;
}
#wrap{
width: 580px;
height: 143px;
/* outline: 1px dashed red; */
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
#wrap div{
/*左浮动 */
float: left;
margin-right: 50px;
}
#wrap img{
width: 160px;
}
/* 给三个小盒子，添加 定位，让他们 最初 “出现在哪里”----这个地方的定位，和布局没有关系，和你要做的 弹跳的 位置 有关系！！ */
.pic1,.pic2,.pic3{
/* 绝对定位 ----目的：让三个小盒子，在 #wrap这个盒子的水平方向上的 中心位置显示！！*/
position: absolute;
left: 50%;
margin-left: -80px;
/* outline: 1px dashed green; */
}
/* 设置层的叠放顺序----让用户首先 看到的 是第3个盒子.pic3里面的图 */
/* 三个小盒子，身上 各自 加上 自己的 动画 */
.pic1{
z-index: 1;
animation:
jumper1 0.5s ease-in 1 forwards,
jumper2 0.2s ease-out 0.5s 1 forwards,
jumper3 0.2s ease-in 0.7s 1 forwards,
jumper4 0.15s ease-out 0.9s 1 forwards,
jumper5 0.15s ease-in 1.05s 1 forwards,
leftMove 0.4s ease-out 1.2s 1 forwards;
}
.pic2{
z-index: 2;
/* css3动画 */
animation:
jumper1 0.5s ease-in 1 forwards,
jumper2 0.2s ease-out 0.5s 1 forwards,
jumper3 0.2s ease-in 0.7s 1 forwards,
jumper4 0.15s ease-out 0.9s 1 forwards,
jumper5 0.15s ease-in 1.05s 1 forwards,
middle 0.4s ease-out 1.2s 1 forwards;
}
.pic3{
z-index: 3;
/* css3动画 */
animation:
jumper1 0.5s ease-in 1 forwards,
jumper2 0.2s ease-out 0.5s 1 forwards,
jumper3 0.2s ease-in 0.7s 1 forwards,
jumper4 0.15s ease-out 0.9s 1 forwards,
jumper5 0.15s ease-in 1.05s 1 forwards,
rightMove 0.4s ease-out 1.2s 1 forwards;
}
/* 设置关键帧 */
/* 分析--- 因为 3个盒子，都用了jumper1，所有 三个盒子，是一起 掉下来的！ */
@keyframes jumper1{
0%{
/* 3个小盒子，一开始，都跑到 -500px这个位置上 待着！！ */
transform: translateY(-500px);
}
100%{
transform: translateY(0);
}
}
@keyframes jumper2{
0%{
transform: translateY(0);
}
100%{
transform: translateY(-100px);
}
}
@keyframes jumper3{
0%{
transform: translateY(-100px);
}
100%{
transform: translateY(0);
}
}
@keyframes jumper4{
0%{
transform: translateY(0);
}
100%{
transform: translateY(-50px);
}
}
@keyframes jumper5{
0%{
transform: translateY(-50px);
}
100%{
transform: translateY(0);
}
}
/* 执行 左边leftMove动画的 这个盒子，他在水平方向上的0点，向x轴的负方向，移动300像素，并且自身大小，放大1.6倍。 */
@keyframes leftMove{
0%{
transform: translateX(0);
}
100%{
transform: translateX(-300px) scale(1.6) rotate(360deg);
}
}
/* 执行 中间middle动画的 这个盒子，他在水平方向上的0点，不动！！并且自身大小，放大1.6倍。 */
@keyframes middle{
0%{
transform: translateX(0);
}
100%{
transform: translateX(0) scale(1.6) rotate(360deg);
}
}
/* 执行 右边rightMove动画的 这个盒子，他在水平方向上的0点，向x轴的正方向，移动300像素，并且自身大小，放大1.6倍。 */
@keyframes rightMove{
0%{
transform: translateX(0);
}
100%{
transform: translateX(300px) scale(1.6) rotate(360deg);
}
}重点分析：
特别注意
/* 三个小盒子，身上 各自 加上 自己的 动画 */
.pic1{
z-index: 1;
/* css3动画 */
animation:
/*
jumper1 动画名称
0.5s 动画完成时间
ease-in 动画以慢速开始
1 动画完成的次数
forwards 动画完成之后，停在动画的最后一帧上
*/
jumper1 0.5s ease-in 1 forwards,
/*
jumper2 动画名称
0.2s 动画完成时间
ease-out 动画以慢速结束
0.5s 延迟时间（jumper2这个动画，推迟0.5执行）
1 动画完成的次数
forwards 动画完成之后，停在动画的最后一帧上 */
jumper2 0.2s ease-out 0.5s 1 forwards,
/* 前面2个动画--1个是0.5s完成的，1个是0.2s完成的，加在一起，正好完成时间是0.7s。
到0.7s，jumper3这个动画立刻开始执行！ */
jumper3 0.2s ease-in 0.7s 1 forwards,
/* 前面3个动画-- 1个是0.5s完成的，1个是0.2s完成的，1个是0.2s完成的，加在一起，正好完成时间是0.9s。
到0.9s，jumper4这个动画立刻开始执行！ */
jumper4 0.15s ease-out 0.9s 1 forwards,
/* 前面4个动画-- 1个是0.5s完成的，1个是0.2s完成的，1个是0.2s完成的，1个是0.15s完成的，加在一起，正好完成时间是1.05s。
到1.05s，jumper5这个动画立刻开始执行！ */
jumper5 0.15s ease-in 1.05 1 forwards,
/* 1.05+0.15=1.2s */
leftMove 0.4s ease-out 1.2s 1 forwards,
/* 1.2+0.4 = 1.6s */
rotate 1s linear 1.6s infinite;
}涉及到的知识点总结：
最常用的几种属性有以下几种： 1、animation-name(动画名称) animation-name属性是必须存在的，因为animation-name的值默认是none，没有动画。 2、animation-duration(动画执行一次所需时间) animation-duration属性也是必须存在的，因为animation-duration的值默认是0，没有动画。 3、animation-delay(动画在开始前的延迟时间) animation-delay的值可以是秒（s）或者是毫秒（ms）,默认值是0，没有延迟。 4、animation-timing-function(动画以何种运行轨迹完成一个周期) animation-timing-function的值是贝塞尔曲线，默认值是ease,表示动画以低速开始，然后加速，最后在结束前变慢。 最常用的值有以下几个： （1）linear:表示动画从头到尾的速度都是相同的。 （2）ease-in:表示动画以低速开始。 （3）ease-out:表示动画以低速结束。 （4）ease-in-out:表示动画以低速开始和结束。 如果没有想用的值，也可以直接使用三次贝塞尔函数， 使用网站是http://cubic-bezier.com，可直接调试出自己想要的值； 也可以在浏览器中直接调试，现在浏览器调试工具中都支持贝塞尔函数可视化调试。 5、animation-iteration-count(动画播放次数) animation-iteration-count属性值有两种： （1）直接写数字，自定义想要播放动画的次数。 （2）infinite：设置动画无线循环播放。 6、animation-fill-mode(定义元素动画结束以后或者未开始的元素样式) 默认值为none，标示，不会在动画结束或者未开始时给元素 添加样式 常用属性值为： （1）forwards:表示动画结束后，元素直接接使用当前样式。 （2）backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值（当animation-direction为reverse或者alternate-reverse时） 7、animation-direction(是否轮流反向播放动画) 默认值是normal，动画正常播放。如果动画只播放一次，则该属性无效。 常用的属性值为： （1）reverse:表示动画反向播放。 （2）alternate:表示动画在奇数次播放时为正向播放，为偶数次播放时为反向播放。 （3）alternate-reverse: :表示动画在奇数次播放时为反向播放，为偶数次播放时为正向播放。 animation属性在书写通常合并在一起，除非需要单独设置的属性值，animation属性的简写形式为：animation:code 2s 2s linear infinite alternate forwards;
还没有留言，还不快点抢沙发？