1. 首页
  2. css

CSS动画技巧:状态跳转、负延迟、动画原点等等

我已经养成了在空闲时间创作CSS动画的习惯,灵感来自于我白天遇到的事情。为了使用尽可能少的元素来创建动画,我发现了一些让CSS做一些你可能不知道它能做的事情的技巧。我想和你分享。
<1)跳转到另一个状态的中间动画 CSS动画使得随着时间的推移很容易将属性转换为新值。它们还可以将属性几乎立即跳转到新值。诀窍是使用两个差别非常小的关键帧,大约.001%工作得很好。 @keyframes toggleOpacity {50% { opacity: 1; } /* Turn off */50.001% { opacity: 0.4; }/* Keep off state for a short period */52.999% { opacity: 0.4; } /* Turn back on */53% { opacity: 1; }} 下面是一个极端的例子,切换不透明度和文本阴影来模拟闪烁的广告牌灯光。#2)负动画延迟 正动画延迟是指动画等待一定时间才能开始。负的动画延迟会立即启动动画,就像时间已经过去一样。换言之,在动画循环的另一个状态开始动画。这样可以跨多个元素重用动画,考虑到所有需要改变的是时间安排。 这里有一个例子,在动画循环中,每个循环都以不同的状态立即开始:#3)比例动画 我尝试使我投入生产的所有东西都尽可能地响应,包括我的动画。对于我创建的所有动画来说,CSS动画的响应性是不可能的,但有时,使用百分比和其他相对单位。 在我的许多动画中,我使用了像圆形和正方形这样的元素,它们需要成比例的宽度和高度。您可能会认为我需要使用固定的宽度和高度值来保持这种状态,但事实并非如此!我可以使用百分比宽度、零高度和百分比填充来创建它们。填充底部是使其与宽度成比例的技巧,如下所示: .container {position: relative;display: block;width: 100%;height: 0;padding-bottom: 100%;} 通过更改窗口大小,您可以在下面的演示中看到这一点。演示还利用了负动画延迟。#4)更改transform origin mid animation 在处理我的一个动画时,我惊讶地发现transformation-origin不仅可以在动画中更改,而且还可以设置动画!在下面的示例中,这允许我们使用不同轴上的旋转来创建一个动画,而不是使用四个单独的动画。 此技巧的缺点是不能仅对动画的一部分使用animation-mode: forwards;。这意味着在应用transformation-origin中的更改之前,我们必须将元素重新定位到与其状态等效的位置。在上面的例子中,这是通过使用translates来模拟旋转的效果来实现的。但是,在更复杂的例子中,这种技术可能会变得乏味,如这里所示。#5)负变换原点 您可以设置负transform-origin,这对于创建循环运动路径等非常有用。不像leaverou描述的那样,使用一个元素来创建圆形动画,而不是指定特定的平移和旋转值,我们可以更简单地使用负的transform-origin值以及第二个元素或伪元素(如果我们希望元素在圆形路径中旋转和移动,则使用一个元素)。通过使用负变换原点的不同值,我们可以对多个元素重复使用相同的动画,同时仍然为每个元素保留圆周运动。#6)Box shadow magic 对于简单的无内容形状的动画,box-shadow非常有用。\"长方体阴影\"属性可以在元素周围创建多个边框。这个想法,再加上一些置换,可以在没有额外的HTML元素的情况下创建新的可动画化的\"元素\"。这使我们能够创建以下动画,它看起来是六个循环旋转的圆形元素,但实际上是一个具有某些偏移框阴影形状的元素。 遗憾的是,任何框阴影属性都不支持百分比,因此它们不像本机HTML元素那样容易响应。但是,它们仍然可以在动画中手动更改,或者在它们所属的实际HTML元素上使用transform:scale(n)。#7)使用伪元素 与框阴影类似,可以使用伪元素为单个元素的外观添加更多内容。它们可以有独立于其父级的动画,它们自己的框阴影,并且非常类似于没有HTML标记的子元素。这让我们创造出令人惊叹的单元素作品,如下图所示。 在这个例子中,所有围绕中间闪光圈的大圆圈,以及边缘上的两个小圆圈(彼此相对)都是长方体阴影

CSS动画技巧:状态跳转、负延迟、动画原点等等 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%8a%a8%e7%94%bb%e6%8a%80%e5%b7%a7%ef%bc%9a%e7%8a%b6%e6%80%81%e8%b7%b3%e8%bd%ac%e3%80%81%e8%b4%9f%e5%bb%b6%e8%bf%9f%e3%80%81%e5%8a%a8%e7%94%bb%e5%8e%9f%e7%82%b9%e7%ad%89%e7%ad%89/