小实例
1.涟漪效果
要点
- 涟漪效果需要两个span，大小与闪烁的容器外围一般大
- 两个span的位置与外围容器重合
- 层级外围层级要高于两个span的层级，但是span层级要高于当前总体容器
- 涟漪效果是一个透明度变换的过程从 1到0再到1的过程
html
<div class="live">
<img src="../../assets/png/11.jpeg" alt="">
<span class="outSpan"></span>
<span class="innerSpan"></span>
</div>
css部分
.live{
position: relative;
width: 100px;
height: 100px;
}
.live img{
width: 100px;
height: 100px;
z-index: 0;
}
.live span{
position: absolute;
/*display: inline-block;*/
width: 100px;
height: 100px;
left: 0;
bottom: 0;
background: #fff;
border-radius: 50%;
-webkit-animation: living 3s linear infinite;
z-index: 1;
}
.innerSpan{
-webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/
}
css动画部分
@keyframes living {
0%{
transform: scale(1);
opacity: 0.5;
}
50%{
transform: scale(1.5);
opacity: 0; /*圆形放大的同时，透明度逐渐减小为0*/
}
100%{
transform: scale(1);
opacity: 0.5;
}
}
动画0% - 100% 表示关键帧即form - to
2.缓缓下拉效果
.big{
width: 100px;
height: 50px;
background: #6492ff;
transition: height 2s;
&:hover{
height: 300px;
}
}
anmation参数详解
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
name 定义的动画名字
duration 动画完成需要的时间
timing-function动画以什么速度完成
- linear 动画从头到尾的速度是相同的。
- ease 慢 -> 快 -> 慢
- ease-in 动画以低速开始。
- ease-out 动画以低速结束。
- ease-in-out 动画以低速开始和结束。
- cubic-bezier(n,n,n,n) 贝塞尔曲线，上述五个属性其实都是固定值的贝塞尔曲线delay 设置动画在启动前的延迟间隔。可以理解为动画开始之前的广告，需要几秒广告后动画才会开始（每次只会在第一次加载的时候才有有延迟）
iteration-count 定义动画的播放次数
direction是否会轮流反方向播放动画， 即1，2，3，4然后就是4，3，2，1接着在1,2,3,4 => 4,3,2,1。。
属性值可以控制方向，也可以控制基数时正向播放，偶数时反向播放，或者反过来fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
动画可以分为三张状态第一种是开始之前的等待，第二个是正在运动，第三种状态时结束
-none：这是默认值，正是这个值，使得动画不会对动画等待和动画完成的元素样式产生改变；
-backwards：如果设置为这个值，那么在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式；
-forwards：如果设置为这个值，那么在动画结束后，元素的样式将设置为动画的最后一帧的样式；
both：相当于同时配置了backwards和forwards，意味着在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式。
- play-state 动画的状态
-paused 挂起
-running 正在运行
关于贝塞尔曲线
- 动画的速度几个值全部是有别塞尔曲线来的(timeing-function)
1 ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
2 linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
3 ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
4 ease-out: cubic-bezier(0, 0, 0.58, 1.0)
5 ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
- 什么是贝塞尔曲线
这里讲的贝塞尔曲线通过四个点来定义一条平滑的曲线。这四个值描述了控制点的位置p1,p2，（x1,y1,x2,y2）,值得范围在0-1之间，其他两个点永远是p0（0,0）p3（1,1）
image.png
贝塞尔曲线的展示效果是由4个点控制的，如上图我们把p0,p1,p2,p3四个点用虚线分别连接在一起，然后我们拉动p1或者p2这个时候，贝塞尔曲线就会像皮筋一样，改变展现的方式
(0,0)、(x1,y1)、(x2,y2)、(1,1)四个点形成了运动速度曲线图即贝塞尔曲线：可以分为以下这个五种情况
情况1：x∈[0,0.5]时y<x; x∈[0.5,1]时 y>x。那么大致的曲线是这个样子的
情况2：x∈[0,0.5]时y>x; x∈[0.5,1]时 y<x。那么大致的曲线是这个样子的
情况3：x∈[0,1]时 y>x; 那么大致的曲线是这个样子的
情况4：x∈[0,1]时 y<x; 那么大致的曲线是这个样子的
情况5：x1 = y1,x2=y2；那么曲线一定是这个样子的
动画运用中可能要比这复杂一点，但是动画运动的速率都是由贝塞尔曲线演化过来的，掌握好这五种情况就够用了
anmation与 transition的区别
- 某个元素定义了transition，当这个元素的某个属性发生改变时，会按照transition实现过渡效果，动画就产生了，但是不能自行触发，需要通过事件触发，”只能平滑改变css值“（不能在动画开始后改变动画速度）
- animation也是指定某一个属性在两个值实现过渡效果时产生动画，animation可以通过keyframe显式控制当前帧的属性值，而transition只能隐式的进行，相对而言比较灵活，因为比transition多了几个参数定义动画的播放次数 ，规定动画的播放方向，动画的状态，动画应用的元素样式
总结一下
区别：
1.触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则立即播放
2.循环。 animation可以设定循环次数。
3.精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
4.与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果，天作之合，比之前只能用js时方便太多。
