更少的文件不编译@keyframes答案

【问题标题】：Less file not compile @keyframes更少的文件不编译@keyframes
【发布时间】：2021-07-12 09:19:56
【问题描述】：

我尝试在我的 Magento2 网站中创建一个带有关键帧的动画，如果我使用我的内联代码或在一个简单的文件 css 中工作正常。但是，如果我将带有 @keyframes 的 css 代码放在 LESS 文件中，这将不起作用，因为无法编译。

这是我的代码：

.col-sm-12{width:80%;padding:15px;float:left;}

#textComAz .item-1, #textComAz .item-2, #textComAz .item-3 {position: absolute;display: block;top: 2em;width: 60%;font-size: 2em;animation-duration: 20s;animation-timing-function: ease-in-out;animation-iteration-count: infinite;}
#textComAz .item-1{animation-name: anim-1;}
#textComAz .item-2{animation-name: anim-2;}
#textComAz .item-3{animation-name: anim-3;}

@keyframes anim-1 {0%, 8.3% { left: 0%; opacity: 0; }8.3%,25% { left: 25%; opacity: 1; }33.33%, 100% { left: 50%; opacity: 0; }}

@keyframes anim-2 {0%, 33.33% { left: 0%; opacity: 0; }41.63%, 58.29% { left: 25%; opacity: 1; }66.66%, 100% { left: 50%; opacity: 0; }}

@keyframes anim-3 {0%, 66.66% { left: 0%; opacity: 0; }74.96%, 91.62% { left: 25%; opacity: 1; }100% { left: 50%; opacity: 0; }}

<div id="textComAz" class="col-sm-12">
<p class="item-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<p class="item-2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
<p class="item-3">But I must explain to you how all this mistaken idea of denouncing pleasure.</p>
</div>

为什么我的 Magento2 的 less 文件中没有编译 @keyframes？

【问题讨论】：

标签： html css less css-animations magento2

【解决方案1】：

对自定义主题中的 .less 文件进行任何更改时，请遵循以下四个步骤。

删除以下文件：<vendor>\var\view_preprocessed\pub\static\frontend\<vendor_theme>\en_NZ\css
删除以下文件：<vendor>\var\cache
删除以下文件：<vendor>\pub\static\frontend\<vendor_theme_name>\en_NZ\css
如果处于生产模式，请运行setup:static-content:deploy 命令。如果处于开发者模式，只需刷新您尝试设置样式的页面即可。

【讨论】：