CSS 动画transition keyframes animation总结

1. CSS transitions

在改变CSS属性的时候，transitions提供给了开发者一共方式去控制动画的速度。

通常来讲，属性改变所产生的影响是立刻生效的，举个例子：

.img {
  width: 200px;
}
.img:hover {
  width: 300px;
}

触发hover的时候，你将看到图片在瞬间被放大，这种突兀的变化会带来很差的用户体验。

而使用CSS transitions就可以展现出变化过程中的过渡段。也就是说，transitions会将整个变化的过程展现出来，而不是简单的始态->末态。

CSS transitions可以让开发者自己决定动画行为。包括动画属性、什么时间开始动画、动画持续时间以及动画的类型。

哪些CSS属性能够使用动画？

以下属性都可以使用动画

上图中的可用属性集合可能会随着时间推移发生变化，开发者应该时刻关注最新的可用属性。

这里可以看到最新的标准。

使用多个动画属性

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

用于定义transitions的CSS属性

可以看到上一个例子中，transition属性的值有一大堆，如果动画再复杂一些，这个值就会更长；为了保证程序的可读性，建议使用CSS属性对其进行定义。

transition-property

指定需要应用transition的属性名称，只有被列出的这些属性在动画过程中是连续变化的，未列出的属性保持原来的行为。

上面的例子可以写成如下形式：

transition-duration

transiton-property只指出了需要应用动画的属性，接下来我们要使用transition-duration指定动画的过渡时间。

.box {
  ...
  -webkit-transition-property: width, height, background-color, -webkit-transform;
  transition-property: width, height, background-color, transform;
  
  -webkit-transition-duration: 2s;
  tansition-duration: 2s;
}

上面的程序表示所有属性的变换都经过2s时间，如果我们想要让不同的属性的变换持续时间不同呢？

.box {
  transition-property: width, height, background-color, transform;
  tansition-duration: 2s, 1s, 3s, 5s;
}

这样我们就定义了不同属性的不同持续时间。

如果属性名和持续时间的数量的对应相等的，则属性名和持续时间是一一对应的关系，即上面的程序有如下的变换时间:

• width: 2s
• height: 1s
• background-color: 3s
• transform: 5s
  如果属性名和持续时间定义的个数不同，则按照如下规则
  如果属性名个数 > 持续时间个数

.box {
  transition-property: width, height, background-color, transform;
  tansition-duration: 2s, 1s;
  
  transition-property: width, height, background-color, transform;
  tansition-duration: 2s, 1s, 2s, 1s;
}

如果属性名个数 < 持续时间个数

.box {
  transition-property: width, height, background-color, transform;
  tansition-duration: 2s, 1s, 3s, 5s, 6s;
  
  transition-property: width, height, background-color, transform;
  tansition-duration: 2s, 1s, 3s, 5s;
}

总结一下就是时间个数少的进行重复，多的截取。

transition-timing-function

用贝塞尔曲线作为动画的过渡函数。它决定了变换的过程是怎样的，是快-慢-快或是慢-快-慢又或者是线性变换等等，通过设置不同的贝塞尔曲线，我们可以得到不同的过渡动画。它只改变转换的过程，但不影响变换最终的结果。

.box {
  transition-timing-function: ease;
  transition-timing-function: linear;
  transition-timing-function: step-end;
  transition-timing-function: steps(4, end);
  ...
}

transition-delay

定义了从属性改变到变换开始之间的间隔时间。

.box {
  transition-delay: 0.5s
}

缩略写法

.box {
  transition:    ;
}

监听transitions的启动和完成

el.addEventListener("transitionstart", func1, true);
el.addEventListener("transitionrun", func2, true);
el.addEventListener("transitionend", func3, true);

TransitionEvent对象除了常规Event对象所包含的属性之外，还包括了两个属性：

• propertyName
• elapsedTime

propertyName

表示触发当前事件的属性名

elapsedTime

一个用来表示转换触发了多长时间的浮点数

MDN地址

2.css实现发光效果

• 关键使用
  • @keyframes
  • @mixin
  • animation
• 实现 (scss混入，less可自己查看文档)

// 公用样式
@mixin common-hover {
  &:hover {
    &::before {
      width: 151px;
    }
  }
  &::before {
    content: "";
    width: 0;
    transition: width 1s;
    height: 7px;
    background: #19fcff;
    border-radius: 10px;
    box-shadow: 0 0 8px #ddd;
    position: absolute;
    left: 30.5%;
    box-shadow: 0 0 10px #19fcff;
    bottom: 1px;
    animation-name: shineLuminous;
    animation-duration: 1.5s;
    // 重复执行动画
    animation-iteration-count: infinite;
  }
}

• 定义动画

// 动画发光效果关键帧
@keyframes shineLuminous {
  from {
    box-shadow: 0 0 10px #bbb;
  }
  50% {
    box-shadow: 0 0 20px #9cf8f9;
  }
  to {
    box-shadow: 0 0 15px #bbb;
  }
}

• 使用

 .title-img-right {
    @include common-hover;
    position: absolute;
    top: 32%;
    left: 128%;
    width: 335px;
    height: 88px;
    font-size: 35px;
    padding: 5px 10px;
    line-height: 88px;
    text-align: center;
    color: white;
    background: url("/images/home/new-home/home-title-sub-img.png");
  }

• 实现效果