问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css关键帧@keyframes样式是相对于什么?

头像
Clarence
    118627

    在实现typewriter时，对于steps和@keyframes rule使用出现了混淆.

    --characters是个自定义变量，需要动画的字符数，比如取10.

    /* ... */
.typewriter-effect > .text {
    max-width: 0;
    animation: typing 3s steps(var(--characters)) infinite;
    white-space: nowrap;
    overflow: hidden;
}


@keyframes typing {
    75% {
        max-width: calc(var(--characters) * 1ch);
    }
    100% {
        /* max-width: calc(var(--characters) * 1ch); */
        max-width: calc(var(--characters) * 1ch);
    }
}
/* ... */
    1. 我想知道typing中100% max-width: calc(var(--characters) * 1ch)这个注释掉是不是就相对于max-width: 0了.还是说是继续沿用%75的样式?
    2. 这里的steps(10)的10个阶段是针对于typing中三个阶段(0-75-100)阶段中每个阶段的吗(也就是每帧分为10个阶段)还是作用于0-100整个动画的？

    按照我自己的理解，如果有注释%75-%100这期间是max-width: 0;没有注释，这时候这段期间会保持3/4秒.也就是文字type到结尾的时候会保持这么长时间的暂停.

    keyframes前端animation
    阅读 2.1k
    1 个回答
    得票最新
    头像头饰
    陟上晴明
      21.1k124691

      因为还有一个 scale() 的缩放，如果不设置 rotate() 的话，如果再有动画就不会生效了。
      这个和 transform 的占用有关，所以后来出现了单独的 translate、rotate、scale 这些个新的CSS属性。

      相关阅读

      由 transform 被占用引发的思考🤔
      解放生产力！transform 支持单独赋值改变

      Edit

      增加一个对比动画：
      对比动画

      
<body>
  <div class="demo demo-1"></div>
  <div class="demo demo-2"></div>
</body>
<style>
  .demo{
    width: 100px;
    height: 150px;
    border: 2px solid red;
  }
  .demo-1 {
    animation: fancy-spin 5s infinite;
  }
  .demo-2 {
    animation: fancy-spin2 5s infinite;
  }
  @keyframes fancy-spin {
    0% { transform: rotate(0turn) scale(1) }
    25% { transform: rotate(0.5turn) scale(1) }
    50% { transform: rotate(1turn) scale(0.5) }
    75% { transform: rotate(1.5turn) scale(0.5) }
    100% { transform: rotate(2turn) scale(1) }
  }
  @keyframes fancy-spin2 {
    0% { transform: rotate(0turn) scale(1) }
    25% { transform: rotate(0.5turn) scale(1) }
    50% { transform: scale(0.5) }
    75% { transform: rotate(1.5turn) scale(0.5) }
    100% { transform: rotate(2turn) scale(1) }
  }
  body{
    padding: 100px;
    display: flex;
    gap: 100px;
  }
</style>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏