css过度与动画

最新推荐文章于 2022-07-21 17:25:34 发布

weixin_33953249

最新推荐文章于 2022-07-21 17:25:34 发布

阅读量109

点赞数

原文链接：https://segmentfault.com/a/1190000009457146

版权

缓动效果

回弹动画效果是比较常见的动画，比如小球的运动、对于尺寸变化和角度变化使用回弹效果可以增强动画的体验。小面介绍一些简单的缓动效果的动画。

弹跳动画的实现

css中所有过渡和动画都是跟一条曲线（缓动曲线）有关的，这条曲线指定了动画过程在整段时间中是如何推进的。

在animationtiming-function/transition-timing-function 展开式属性中，都可以把这个默认的调速函数显式指定为ease 关键字。ease也是默认值，四种指定的缓动曲线值分别是ease、ease-in、ease-out(是ease-in 是反向版本)、ease-in-out、linear，四种的缓动曲线分别如下图所示：

使用ease-in和ease-out这对相反的版本可以实现回弹的效果
如小球的回弹效果可以这样实现：

@keyframes bounce {
  60%, 80%, to {
    transform: translateY(400px);
    animation-timing-function: ease;
  }
  70% {
    transform: translateY(300px);
  }
  90% {
    transform: translateY(360px);
  }
}

.ball {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: yellow;
    animation: bounce 3s ease-in;
}

CSS 的调速函数都是只有一个片断的贝塞尔曲线，因此每个调速函数只有两个控制锚点。同时CSS 提供了一个cubic-bezier(x1, y1, x2, y2)函数，允许我们指定自定义的调速函数。它接受四个参数，分别代表两个控制锚点的坐标值，如果想得到任何调速函数的反向版本，只要把控制锚点的水平坐标和垂直坐标互换就可以。

把上面的ball的animation，设置成 bounce 3s cubic-bezier(.1,.25,1,.25);会使回弹效果更真实。

一个好用的贝塞尓可视化的工具

弹性过渡

弹性过渡的应用场景比如说是一个input框，用户输入的时候给予一个提示框，可以应用上面的cubic-bezier实现

<label>
      Your username: <input id="username" />
      <span class="callout1">
        Only letters, numbers,
        underscores (_) and hyphens (-) allowed!
      </span>
</label>

input:not(:focus) + .callout1 {
    transform: scale(0);
    transition: .25s;
  }
.callout1 {
    /* cubic-bezier(.5s * 50%, .1, .5 * 60%, 1.5) */
    transition: .5s cubic-bezier(.25, .1, .3, 1.5);
    transform-origin: 1.4em -.4em;
    /* CSS transform 属性 , 只对 block 级元素生效*/
    display: block;
    width: 250px;
    height: 40px;
    font-size: 12px;
    border: 1px solid #eee;
    margin-top: 5px;
}

实现效果

在使用transition进行过渡时，在不指定transition-property属性时，它会自动读取它的初始值all，这时所有能做过渡的属性都会参与过渡，比如color。所以在设置过渡时，要把过渡的作用范围限制在某几种特定的属性上。

综上，上面的代码transition的值都应该加上transform，即

input:not(:focus) + .callout {
    transform: scale(0);
    transition: .25s transform;
}
.callout {
    transform-origin: 1.4em -.4em;
    transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
}

逐帧动画

在实现一个卡通影片或者一个复杂的进度指示框，或者loading的标志时这种场景比较适应逐帧动画。

在实现loading动画时也是可以使用gif动画的，但是gif动画是有一些自己的缺点的：

GIF 图片的所能使用的颜色数量被限制在 256 色
GIF 不具备 Alpha 透明的特性。
修改动画的参数不方便，需要重新编辑生成。

在css中可以使用step这个函数实现。
所有基于贝塞尔曲线的调速函数都会在关键帧之间进行插值运算，从而产生平滑的过渡效果。这种平滑特性不适用于逐帧动画的实现。

steps() 会根据你指定的步进数量，把整个动画切分为多帧，而且整个动画会在帧与帧之间硬切，不会做任何插值处理。这种loading的实现正适用于这种

具体实现如下：

<div class="loader">Loading...</div>

@keyframes loader {
    to { background-position: -800px 0; }
}

.loader {
    width: 100px; 
    height: 100px;
    background: url(img/loader.png) 0 0;
    animation: loader 1s infinite steps(8);
    
    /* 把文本隐藏起来 */
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}

loader.png 是一个将所有 loading 状态拼接好的 png 图片

闪烁效果的实现

以前的blink标签可以用来实现文字的闪烁效果，现在没有了，现在可以通过animation创建的动画实现

@keyframes blink {
  50% {
    color: transparent
  }
}

.highlight {
  animation: 1s blink 3 steps(1);
}

打字动画的实现

实现思路就是让容器的宽度成为动画的主体，把所有文本包裹在这个容器中，然后让它的宽度从0 开始以步进动画的方式、一个字一个字地扩张到它应有的宽度。只适用于单行的文本

实现中将使用ch这个单位，它表示0字符的宽度，很少用到，但对于等宽字体来说，“0”字符的宽度和其他所有字形的宽度是一样的。假设我们要实现的文本是等宽字体。

<h1 class="code">CSS is awesome!</h1>

@keyframes typing {
  from {
    width: 0
  }
}

/* 闪烁的光标的实现 */
@keyframes caret {
  50% {
    /* currentColor使边框颜色自动与文字颜色保持一致 */
    border-color: currentColor;
  }
}

.code {
  width: 15ch; /* 文本的宽度 */
  animation: typing 6s steps(15),
  caret 1s steps(1) infinite;
  white-space: nowrap;
  border-right: .05em solid transparent;
  overflow: hidden;
}

效果：

状态平滑的动画

应用场景是在一张图片很长，展示的位置又很有限，这时候做成动画是再好不过的，在鼠标hover或者focus的触发动画的发生。但是当动画开始播放还没结束的时候，鼠标离开时，动画就会特别生硬的回到图片的最开始的位置上，解决的办法就是使用animation-play-state这个属性

@keyframes panoramic {
  to {
    background-position: 100% 0;
  }
}

.panoramic {
  width: 150px;
  height: 150px;
  background: url("timg.jpeg");
  background-size: auto 100%;
  animation: panoramic 10s linear infinite alternate;
  animation-play-state: paused;
}

.panoramic:hover, .panoramic:focus {
  animation-play-state: running;
}

效果：

沿环形路径平移的动画

通过设置旋转的动画达到效果，但是会存在一个问题旋转的时候图片自身也会一起旋转，解决这个问题有两种方法：

（1）需要两个元素的解决方案
思路就是给元素设置另一个旋转动画，让它以相反的方向自转一周，这样旋转的时候图片自身就不会跟着旋转

<div class="path">
    <div class="avatar">
        <img src="lea.jpg" />
    </div>
</div>

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

.path .avatar {
  animation: spin 10s infinite linear;
  transform-origin: 50% 150px; /* 150px = 路径的半径 */
}

.path .avatar > img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  position: absolute;
  left: 120px;
  top: 10px;
  animation: inherit;
  /* reverse 得到原始动画的反向版本 */
  animation-direction: reverse;
}

效果如下：

(2) 单个元素的解决方案
每个transform-origin 都是可以被两个translate() 模拟出来的。
例如

transform: rotate(30deg);
transform-origin: 200px 300px;


transform: translate(200px, 300px)
rotate(30deg)
translate(-200px, -300px);
transform-origin: 0 0;

/* 以上两段代码等价 */

应用translate变形函数并不是彼此独立的，每个变形函数并不是只对这个元素进行变形，而且会把整个元素的坐标系统进行变形，从而影响所有后续的变形操作。这也说明了为什么变形函数的顺序是很重要的，变形属性中不同函数的顺序如果被打乱，可能会产生完全不同的结果。

通过translate的方式就可以只用一层dom


@keyframes spin {
  from {
    transform: rotate(0turn) translateY(-150px) translateY(50%) rotate(1turn);
  }
  to {
    transform: rotate(1turn) translateY(-150px) translateY(50%) rotate(0turn);
  }
}

.avatar {
  animation: spin 3s infinite linear;
}