Editing keyframe CSS

Bootstrap Studio Help
1

Is there a reason that the BSS internal styles editor allows you to add additional CSS to a keyframes rule but not delete it? Has anyone else noticed or encountered this?

For example, I can create this…

@keyframes fade-zoom {
 0% {
    opacity: 0;
    transform: scale(100%);
  }
  }
  100% {
    opacity: 0;
    transform: scale(110%);
  }
}

Add

  16.66% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  48.66% {
    opacity: 0;
  }

In between 0% and 100%, but once it looks like this, I cannot delete the added percentages. I can edit them, but not delete them.

@keyframes fade-zoom {
  0% {
    opacity: 0;
    transform: scale(100%);
  }
  16.66% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  48.66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(110%);
  }
}

Is it just a limitation of the internal editor, or a bug?

@martin

2

The way these nested blocks are deleted is by clicking the box with 33.33%, deleting the text so the box is empty, and pressing return. Does this work for you?

3

Yes, that worked. Thank you. It took me a minute to figure it out but I got it. I would have never figured this out on my own.

This would be a good thing to add into the Docs under the keyframes section.

4

Good suggestion, we added it to the docs.

5

There are 3 ways to add CSS It’s not easy to understand at first.
1: Directly in the Appearance tab, CSS add a style to HTML.
2: Click + in the Appearance tab to add CSS to style.css to the selected class or ID. It’s nice for simple things.
3: In the Style tab with Create. but it’s very difficult to edit. It’s not like a calssic IDE where you can write your CSS. I think all is possible but it’s a new way to edit to learn.

The ways to add/edit the CSS are not easy to understand at first, so we use Appearance and all CSS is in the HTML without understanding how to add to style.css (or other file). A little video tutorial about this important point would be nice.

Thank you