Css 相对于现有的转换3D应用关键帧动画

发布于03月26日

我不知道该怎么办. 我有一个div，它的位置是用JavaScript的内联样式控制的，即:

<div style="transform: translate3d(20px, 40px, 0);"></div>

我有一个通用的"摇"动画如下

.shake{
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    backface-visibility: hidden;
    perspective: 1000px;
    transform-origin: center;
}
@keyframes shake {
    10%, 90% {
        transform: translateX(-2px);
    }  
    20%, 80% {
        transform: translateX(4px);
    }
    30%, 50%, 70% {
        transform: translateX(-8px);
    }
    40%, 60% {
        transform: translateX(8px);
    }
}

如果我将我的css类应用于div，它会将div重新定位到屏幕的左上角.有没有一种方法可以从动画中添加到现有的转换3D中，也许是使用calc()？理想情况下，我想做(伪代码)

 @keyframes shake {
    10%, 90% {
        transform: translateX(@current_translate_x - 2px);
    }  
    ....

推荐答案

现在，您可以设置一个animation-composition规则，以告知动画期间设置的特性应如何影响动画之前已经设置的特性:

.shake {
    width: 30px;
    height: 30px;
    background: red;
}
  
:checked + .shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    backface-visibility: hidden;
    perspective: 1000px;
    transform-origin: center;
    animation-composition: add;
}
@keyframes shake {
    10%, 90% {
        transform: translateX(-2px);
    }  
    20%, 80% {
        transform: translateX(4px);
    }
    30%, 50%, 70% {
        transform: translateX(-8px);
    }
    40%, 60% {
        transform: translateX(8px);
    }
}

<input type=checkbox>
<div class="shake" style="transform: translate3d(20px, 40px, 0);"></div>

如果浏览器的支持对你来说太低，那么你也可以通过使用translate属性而不是transform: translate()来实现同样的目的，这两个属性都会加起来:

.shake {
    width: 30px;
    height: 30px;
    background: red;
}
  
:checked + .shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    backface-visibility: hidden;
    perspective: 1000px;
    transform-origin: center;
}
@keyframes shake {
    10%, 90% {
        transform: translateX(-2px);
    }  
    20%, 80% {
        transform: translateX(4px);
    }
    30%, 50%, 70% {
        transform: translateX(-8px);
    }
    40%, 60% {
        transform: translateX(8px);
    }
}

<input type=checkbox>
<!-- Note how we now use the 'translate' property -->
<div class="shake" style="translate: 20px 40px;"></div>

如果它对你来说仍然太前卫，你仍然可以求助于旧的好包装容器和 retrofit 所说的容器:

.shake-container > div {
    width: 30px;
    height: 30px;
    background: red;
}
  
:checked + .shake-container  > div {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    backface-visibility: hidden;
    perspective: 1000px;
    transform-origin: center;
}
@keyframes shake {
    10%, 90% {
        transform: translateX(-2px);
    }  
    20%, 80% {
        transform: translateX(4px);
    }
    30%, 50%, 70% {
        transform: translateX(-8px);
    }
    40%, 60% {
        transform: translateX(8px);
    }
}

<input type=checkbox>
<!-- we set the initial transform on the container -->
<div class="shake-container" style="transform: translate3d(20px, 40px, 0);">
  <div></div>
</div>

Css 相对于现有的转换3D应用关键帧动画

推荐答案

Css相关问答推荐

如何提高数学输出的质量？

显示Reaction组件上的问题.使用FlexBox时的意外大小

我如何使用 CSS 在我的应用程序中每隔 3 位用逗号分隔数字？

将重复的线性渐变锚定到元素的顶部

Bootstrap 5 - 更改列顺序时出现问题

如何简化CSS？

循环一个 sass/scss 变量以生成 css 变量

关键帧不能动画回来

从 Angular SCSS 生成 CSS？

更改组件中 css 的值

卡在 CSS 中的grid-template-columns中

如何制作一个div来包装两个浮动div？

我应该使用 CSS ：disabled 伪类还是 [disabled] 属性 Select 器，还是见仁见智？

属性nowrap被认为是过时的.建议使用较新的构造.它是什么？

Flexbox 列自底对齐

如何将 bootstrap 列高设为 100% 行高？

更改 FontAwesome 图标的字体粗细？

让 div 扩展全高

如何水平对齐 span 或 div？

行高百分比不起作用