CODEWITHSUNDEEP
htmlcsslesscss-animationsmagento2
Jackom
Jackom

Reputation: 436

Less file not compile @keyframes

I tried to create an animation with keyframes in my Magento2 website and works fine if i use my code inline or in a simple file css. But if i put my css code with @keyframes inside LESS files this not work because is not compile.

This is my code:

.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>

Why @keyframes is not compiled in my less file of Magento2?

Upvotes: 0

Views: 290

Answers (1)

LitExtension Magento Migration
LitExtension Magento Migration

Reputation: 243

When making any change to the .less files within your custom theme, follow the following four steps.

  1. Delete the files within: <vendor>\var\view_preprocessed\pub\static\frontend\<vendor_theme>\en_NZ\css
  2. Delete the files within: <vendor>\var\cache
  3. Delete the files within: <vendor>\pub\static\frontend\<vendor_theme_name>\en_NZ\css
  4. If in production mode, run the setup:static-content:deploy command. If in developer mode, simply refresh the page you are attempting to style.

Upvotes: 0

Related Questions