css3 动画篇

小实例

1.涟漪效果
要点

• 涟漪效果需要两个span，大小与闪烁的容器外围一般大
• 两个span的位置与外围容器重合
• 层级外围层级要高于两个span的层级，但是span层级要高于当前总体容器
• 涟漪效果是一个透明度变换的过程从 1到0再到1的过程

html

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]时yx。那么大致的曲线是这个样子的

image.png

情况2：x∈[0,0.5]时y>x; x∈[0.5,1]时 y

image.png

情况3：x∈[0,1]时 y>x; 那么大致的曲线是这个样子的

image.png

情况4：x∈[0,1]时 y

image.png

情况5：x1 = y1,x2=y2；那么曲线一定是这个样子的

image.png

动画运用中可能要比这复杂一点，但是动画运动的速率都是由贝塞尔曲线演化过来的，掌握好这五种情况就够用了

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时方便太多。