I've read that the @keyframes rule is officially supported now but when i want to declare some keyframes there is no way I can do that because the css editor still uses standard syntax which would result in <br>@keyframes {<br> 0%: {values...};<br> etc.<br> but of course the colon and semi-colon is unneeded. How do i fix that?
I have the same question. Any way to animate with keyframes?
I keep seeing in the comments that @keyframes is supported but I have yet to see anywhere on how to actually add keyframes to the CSS file in the IDE. It seems like there needs to be a secondary option like the "add media query" that says "add keyframes" so that it's formatted correctly. As of right now, the only way I can think of getting this to work is by doing some exporting/importing circles to get the animation keyframes added to the CSS file.
Well I feel foolish now. After trying to get it to work all day I shut down and go home so I can try later. I open up the CSS file and start adding a new filed for the keyframe and now it works.
you can actually add the @keyframes tag in the main css by simply rename the class (if you're on object) or by writing it manually on adding new one. one thing bootstrap seem to not support though, is the value 0% and so on' to control timing. correct me please if i'm wrong here, but those values seem to stroke out when i trying them
example (can't add the bold ones to file):
@keyframes bounceIn { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }
You cannot nest css in a regular css file in Bootstrap Studio. You can nest in a scss file. Put your keyframes in a scss (sass) file and apply.
You can add a custom code component to the page, and then write the CSS in between <style></style> tags
This is how I've done it in the past
Hmmn, just learned something. If I import animate.css into the project I can actually copy and paste any @keyframes into a regular css file (not a scss) and it shows the nesting. I can then edit it as I want also. This means nesting is allowed if one pastes a nest to begin with. Thats nice !
Well to followup as this is news to me, you can write keyframes in regular css. It provides the nesting possible to do so. I had no problem using 0%, 60%, 100% either.
to follow up of what i said earlier. those nesting attributes, indeed, can be added manually to a regular css file (like all other attributes) but not by pasting from other else.
Not that I have any clue what you guys are talking about lol, but ... do keep in mind that just because BSS may "strike out" something you add to the CSS/SCSS does not always mean it will not work on export. It just means that BSS doesn't understand it or accept it itself. It will still export it correctly and if the code is truly valid it will work as it should.
Sorry for joining this conversation so late. Just wanted to post an update that we made a short article which demonstrates how keyframe blocks are created in the app.