CSS 动画transition keyframes animation总结

1. CSS transitions

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

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

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

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

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

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

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

以下属性都可以使用动画
CSS 动画transition keyframes animation总结_第1张图片
上图中的可用属性集合可能会随着时间推移发生变化,开发者应该时刻关注最新的可用属性。

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

使用多个动画属性

.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");
  }
  • 实现效果
    在这里插入图片描述

你可能感兴趣的:(css3,css,html5,css3,html,vue.js)