Coco
今天，分享一个实际业务中能够用得上的动画技巧。 **巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果**，像是这样：  看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？ 我们来简单分析分析，从表面上看，确实好像只有元素的 `transform: translate()` 在位移，**但是注意**，这里有两个难点： 1. 这是个无限轮播的效果，我们的动画需要支持任意多个元素的无限轮播切换 2. 因为是轮播，所以，运行到最后一个的时候，需要动画切到第一个元素 到这里，你可以暂停思考一下，如果有 20 个元素，需要进行类似的无限轮播播报，使用 CSS 实现，你会怎么去做呢？ ## 逐帧动画控制整体切换 首先，我需要利用到逐帧动画效果，也被称为**步骤缓动函数**，利用的是 `animation-timing-function` 中，的 steps，语法如下： ```CSS { /* Keyword values */ animation-timing-function:...
本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。 ## CSS 动画介绍及语法 首先，我们来简单介绍一下 CSS 动画。 最新版本的 CSS 动画由规范 -- [CSS Animations Level 1](https://www.w3.org/TR/2018/WD-css-animations-1-20181011/) 定义。 CSS 动画用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置。 动画包括两个部分: 描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。 简单来说，看下面的例子： ```CSS div {...
最近，有同学询问，如何使用 CSS 实现如下效果：  看起来是个很有意思的动效。 仔细思考一下，要想实现这类效果，其实用到的核心属性只有一个 -- `background-clip: text`。 ## 有意思的 background-clip: text `background-clip: text` 之前也提到多很多次。其核心就在于以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。 简单而言，就是运用了 `background-clip: text` 的元素，其背景内容只保留文字所在区域部分，配合透明文字 `color: transparent`，就能够利用文字透出背景。 利用 `background-clip: text`，能够得到很多非常有意思的文字效果。 假设，我们有这样一个 Gif 图：  我们可以利用这张动图和文字，实现一版，文字版的动图：...
今天，要介绍一种基于 CSS `mask-composite` 的高级技巧。 通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。 ## 通过单张 PNG/SVG 得到它的反向切图 事情的经过是这样的，某天，我们拿到了这样一张 PNG/SVG 图片：  就这张图片而言，它是一张 PNG 图，灰色部分透明。 随着需求的进行，在某一处，我们需要一张基于上述图形的反向镂空图形：  emmm，要注意，这里白色处是需要透明的，要能透出不同的背景色，像是这样：  怎么办呢，通常而言，只能是找 UI 再出一张镂空图。 当然，在今天，只需要一张 PNG/SVG，我们就可以使用 CSS 轻松完成上述的转换。这里我们需要用到 `mask-composite`。 ##...
最近在业务中实际使用 `content-visibility` 进了一些渲染性能的优化。 这是一个比较新且有强大功能的属性。本文将带领大家深入理解一番。 ## 何为 `content-visibility`？ `content-visibility`：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。 > MDN 原文：The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong...
在 CSS 规范 [Scroll-linked Animations](https://drafts.csswg.org/scroll-animations-1/) 中，推出了一个划时代的 CSS 功能。也就是 -- The [@scroll-timeline](https://drafts.csswg.org/scroll-animations/#at-ruledef-scroll-timeline) at-rule，直译过来就是**滚动时间线**。 本文，就将带大家一探究竟，从入门到学会使用 CSS `@scroll-timeline`。 ## 何为 @scroll-timeline 滚动时间线？ 什么是 `@scroll-timeline` 滚动时间线呢？ `@scroll-timeline` 能够设定一个动画的开始和结束由滚动容器内的滚动进度决定，而不是由时间决定。 意思是，**我们可以定义一个动画效果，该动画的开始和结束可以通过容器的滚动来进行控制**。 ### 示意 DEMO 再系统性学习语法之前，我们通过一个 DEMO，简单了解一下它的用法：...
根据 [CSS Scroll Snap Module Level 1](https://www.w3.org/TR/css-scroll-snap-1/) 规范，CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。 > Tips：本文截的一些 Gif 图涉及容器滚动，效果不是很好，可以点进 Demo 里实际感受下。 ## sroll-snap-type 首先看看 `sroll-snap-type` 可能算得上是新的滚动规范里面最核心的一个属性样式。 **[scroll-snap-type](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type)**：属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。 光看定义有点难理解，简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。 ### 语法 ```CSS...
最近几天，有好几个同学都问了同样一个问题。 页面上有一段文本，能否实现这段文本在不同背景色下展示不同的颜色？也就是俗称的智能变色。像是下面这样：  文本在黑色底色上表现为白色，在白色底色上表现为黑色。看似很复杂的一个效果，但是其实在 CSS 中非常好实现，今天就介绍这样一个小技巧，在 CSS 中，利用混合模式 `mix-blend-mode: difference`，让文字智能适配背景颜色。 ## 混合模式 mix-blend-mode: difference CSS3 新增了一个很有意思的属性 -- mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。一共有下图所示的一些混合模式：  其中，本文的主角是 `mix-blend-mode: difference`，意为差值模式。该混合模式会查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。 与白色混合将使底色反相；与黑色混合则不产生变化。 通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，**效果与原图像是完全相反的颜色**。 该混合模式最常见的应用场景就是文章开头描述的场景，实现文本在不同背景色下展示不同的颜色。...
本文未完成 ----- [Smooth and simple page transitions with the shared element transition API](https://developer.chrome.com/blog/shared-element-transitions-for-spas/) [Bringing page transitions to the web](https://www.youtube.com/watch?v=JCJUPJ_zDQ4)
今天，有在群里看到这样一个问题：**有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧**，使用 CSS 可以完成么？ 像是这样：  一个非常有意思的问题，答案是可以的。我们抽取一下其中的关键点： 1. 动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧 2. 动画通过 hover 驱动，只有用户 hover 元素的时候，动画才进行 ## animation-fill-mode 控制元素在各个阶段的状态 首先，动画只运行一次，未运行前处于第一帧，运行完后处于最后一帧。 这个刚好利用 CSS 动画的 `animation-fill-mode: both` 即可。 1. `animation-fill-mode: backwards`：可以让元素在动画开始之前的样式为动画运行时的第一帧，动画结束后的样式则恢复为 CSS...