Shopping Worlds / Code Element / CSS Animations

Shopware 5 Themes & Design
1

Hi! I’ve created a Code Element in Shopping Worlds which is a bg. picture with a transparent color overlay and a block of text animated with css.

Outside of Shopware the animation works. In Shopware the picture and overaly are ok but the text doesn’t get animated.

The stiles are in my-custom.less file which is imported in all.less. Of course, I clean the template cache before compiling.

#hb-text {   
   animation: move-text 1s forwards ease-in-out;
   opacity: 0; 
}

@keyframes move-text {
  from {
    opacity: 0;  
    transform: translateY(20%); 
  }

   to {
     opacity: 1;
     transform: translateY(0);
  }
}

 

2

I solved the issue by creating a child theme and making all changes there.

Before, I was editing the Responsive theme.