CSS3帧动画

Posted 2023-04-05

参考技术A animation动画除了可以实现补间动画外，还可以完成逐帧动画。

在animation的属性中，有个属性 animation-timing-function 一共具有如下这些值

CSS

贝塞尔缓动就是完成补间动画的，比如流畅的缩放、位置移动等动画。

但是逐帧动画没有补间效果的，它不是电脑根据初始和结束状态的差异自动生成中间的过渡帧，而是每一帧都是关键帧，需要自己定义每一帧的状态。

比如像下面这样的图，就只能通过逐帧动画来实现运动效果↓

这几个属性值就是用来处理逐帧动画的：

CSS

steps(number,position) ，有两个参数。

number表示动画的段数。关键帧的数量=段数+1。

position这个比较难理解，有两个值：end和start。end是默认值。

先看一个效果。

两个小球，从0px运动到400px，分为了4个动画步骤，有5个关键帧。第一个是start模式，第二个是end模式。

发现start模式是时间一开始，直接进入第二个关键帧状态，然后顺利顺利走完全程。

end模式有点傻，时间一开始，从第一个关键帧开始跑，结果时间结束了，才走完第四个关键帧，没有完成全部路程就over了。

所以start和end的名字和它所表示的含义刚好相反。

比如执行次数或者填充模式。

为上面的小球加上infinite，可以看出start模式第二次开始的运动都是从第二个关键帧开始的。

加上forwards模式则变得不一样了，forwards是向前的单词意思，但是表示的则是保留动画最后的运动状态，意思和功能也是相反的。

第二个end模式的小球终于有机会走完全程了。
所以，当为end模式设置了forwards的时候要小心，因为它其实多走了一步。

1、这头熊的原始素材一共有8个步骤。

所以使用 steps(8,end) 是最好的方式，因为如果使用 steps(8,start) ，则第一帧不能执行，最后一帧会闪白，图片消失。

因为要一直运动，所以需要加上infinite，当执行完最后一张图的时候，再返回到第一张图，形成一个连贯的完步。

通过背景图片的 background-position 的改变，形成熊的运动。

CSS

可以打开codepen编辑器，把运动时间设置更大一点，可以看到慢动作，一帧一帧是如何显示的。
2、这个logo一共有24张图片

但是logo只运动一次，并且停在结束状态，根据end模式的特征，如果加上forwards的话，会多运动一步。

所以，这里是 steps(23,end) ，为什么是23步，而不是24步，因为forwards模式对它的影响。要想最后一步还要看到图片，那么背景图片的挪动就要少挪动一个图片的宽度。图片整个宽度4800px，每一张图200px的宽高。所以背景图片只需要往左边挪动-4600px即可。

CSS

通过上面的案例可以看出，对象的运动效果由逐帧绘制的图片的间距所影响。间距一样，则速度一样。利用steps不能去改变现成的图片帧与帧之间的速度。

但是利用 step-end 或者 step-start 却是可以的。

3、 step-end 的特别用处

其实 step-end 等价于 steps(1,end) ， step-start 等价于 steps(1,start) 。

只有一个步骤的逐帧动画，却可以利用好时间的改变和距离的改变做出速度不同的效果来。

熊从左边快速奔跑出来，一共跑了六步，一步比一步速度放慢。然后在原地踏步。

首先这是一个逐帧动画，但是要实现不同的速度，又没有办法改变原来素材图片与图片之间的距离，所以要使用另外的办法。

第一个完步时间间隔小，left的值间隔大，相当于速度快。背景图片往左移动一张，left的值往右改变一次，熊实现往前奔跑。

CSS

第二个完步的时间间隔稍微大点，left的间隔小了一点，速度变慢了一些。依次类推，速度逐渐放缓。第二个完步又从第一帧开始。

CSS

所以说利用step-end还是可以做出速度不一样的逐帧动画的。
在线制作雪碧图： https://www.toptal.com/developers/css/sprite-generator

CSS 模块和 CSS 关键帧动画

【中文标题】CSS 模块和 CSS 关键帧动画

【英文标题】：CSS Modules and CSS keyframe animations

【发布时间】：2019-12-29 06:08:15

【问题描述】：

我正在尝试使用 React、关键帧、CSS 模块（和 SASS）制作一个简单的动画。问题是 CSS 模块散列关键帧名称的方式与散列本地类的方式相同。

JS代码

//...

export default () => 
  const [active, setActive] = useState(false);
  return(
    <div className=active ? 'active' : 'inactive'
      onClick=() => setActive(!active)
    >content</div>
  )

尝试使所有内容全球化，使用this 源作为教程（不编译）：

//default scope is local

@keyframes :global(animateIn) 
  0%  background: black; 
  100%  background: orange; 


@keyframes :global(animatOut) 
  0%  background: orange; 
  100%  background: black; 


:global 
  .active 
    background: orange;

    animation-name: animateIn;
    animation-duration: 1s;
  

  .inactive 
    background: black;

    animation-name: animateOut;
    animation-duration: 1s;
  

改变这个也不起作用：

:global 
  @keyframes animateIn 
    0%  background: black; 
    100%  background: orange; 
  

  @keyframes animateOut 
    0%  background: orange; 
    100%  background: black; 
  

另一次尝试（无效）：

@keyframes animateIn 
  0%  background: black; 
  100%  background: orange; 


@keyframes animateOut 
  0%  background: orange; 
  100%  background: black; 


:global 
  .active 
    background: orange;

    :local 
      animation-name: animateIn;
    
    animation-duration: 1s;
  

  .inactive 
    background: black;

    :local 
      animation-name: animateOut;
    
    animation-duration: 1s;
  

如何在 CSS 模块全局范围内使用关键帧？是否可以在全局范围类中使用局部范围关键帧？

【参考方案1】：

您的第三次尝试几乎没问题，您只需在 :local 之前添加 & 并确保它们之间有空格。通过这样做，您可以切换到选择器内的本地范围。

:global 
    .selector 
        & :local 
            animation: yourAnimation 1s ease;
        
    


@keyframes yourAnimation 
    0% 
        opacity: 0;
    
    to 
        opacity: 1;
    

编译成

.selector 
    animation: [hashOfYourAnimation] 1s ease;

【讨论】：

它也没有空格，谢谢你的回答。

【参考方案2】：

原来的答案很好用。这在没有 SASS 的情况下有效：

:global 
    .selector 
        // global selector stuff ...
    

    .selector :local 
        animation: yourAnimation 1s ease;
    


@keyframes yourAnimation 
    0% 
        opacity: 0;
    
    to 
        opacity: 1;
    

【参考方案3】：

在我的情况下，上述解决方案均无效，但我发现 css-loader 解析所有 camelCased 单词并解析它们，所以我将我的 @keyframes 动画名称更改为 snake_case 并且有效！...