# Shopping Worlds / Code Element / CSS Animations

**URL:** <https://forum.shopware.com/t/shopping-worlds-code-element-css-animations/62008>\
**Category:** Themes & Design\
**Created:** [26. September 2019 um 10:07 UTC](https://forum.shopware.com/t/shopping-worlds-code-element-css-animations/62008 "2019-09-26T10:07:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![anatol06](https://avatars.discourse-cdn.com/v4/letter/a/46a35a/32.png) [@anatol06](https://forum.shopware.com/u/anatol06)\
**Post date:** [26. September 2019 um 10:07 UTC](https://forum.shopware.com/t/shopping-worlds-code-element-css-animations/62008/1 "2019-09-26T10:07:58Z")

</div>

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);
  }
}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![anatol06](https://avatars.discourse-cdn.com/v4/letter/a/46a35a/32.png) [@anatol06](https://forum.shopware.com/u/anatol06)\
**Post date:** [26. September 2019 um 12:54 UTC](https://forum.shopware.com/t/shopping-worlds-code-element-css-animations/62008/2 "2019-09-26T12:54:40Z")

</div>

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

Before, I was editing the&nbsp;Responsive theme.