CSS3 @keyframe Animation Not Imported [fixed in 2.4.5]

I noticed that if you try to import a css file with the new CSS3 animation code BS will simply ignores the "@keyframe styles" part of the imported style sheet meaning you won't see the styling for the keyframes.

Hi, I also facing this problem with animate.css and unable to see preview and design, external css link option temporary fix this issue but some css don't have cdn links and that time it is too difficult to work. please try to fix it as soon as possible and hoping this issue will fix in next release.

Thank you for reporting this! This is a known limitation in the program, but we will work on adding @keyframe support in the next releases. For now libraries like animate.css need to be linked from a cdn like cdn.js

Thanks Martin, I spent 2 hours trying to import animate.css... doh!

  • Right click javascript
  • Link External JS
  • Add the source
  • Boom, animate.css works great

I'm launching a massive new website for solar power installations across the USA. Still in love with Bootstrap Studio 6 months later, and 10 websites built using it.

I just spent a few hours, trying and retrying, wondering why animate.css etc., were not working. :-(

@martin we will work on adding @keyframe support in the next releases. For now libraries like animate.css need to be linked from a cdn like cdn.js

Is this still the case of not working locally, any update on when this will be possible?

Happy to report that support for @keyframes was added in version 2.4.5, which was just released! Stylesheets containing @keyframes are imported as expected. This also includes animate.css.

One thing to keep in mind is that we decided to not implement support for legacy @-webkit-keyframes and @-moz-keyframes. All modern browsers support the prefix free @keyframes declaration. The versions with vendor prefixes will be ignored when imported in Bootstrap Studio.

Awesome, thanks @martin.

@martin excitingly good news!

Hi you say you've decided NOT to support @webkit because all modern browsers support @keyframes. Well this isn't true, I recently developed a site using keyframes. Every other browser supported it bar Safari and Mozilla. The only solution to the problem was to add the @webkit support. After I did this, all animations worked correctly! Bootstrap Studio removed brackets from @Webkit...so the animation ceased to function correctly!

@Webkit should be supported!!! Please add support for Safari and Mozzilla!

Maybe your version of those browsers are seriously out of date.

IE10 supported unprefixed in 2012 //just added as a reference

Firefox 16 supported unprefixed in 2012

Safari 9 supported unprefixed in 2015

At the time of your post, if all your browsers were updated to the latest, they all should have supported the unprefixed version.