![]() ![]() The cylon animation gets its name from the "eye" of the Cylons from the original 1978 Battlestar Galactica TV series.Ĭombine icons together via the use of the component and the stacked prop on individual icons ( or ) to create complex icons:.See the reduced motion section of our accessibility documentation for additional details. The BootstrapVue defined animation effects of this component is dependent on the prefers-reduced-motion media query. ![]() Animation durations can be configured via SASS SCSS variables.With the cylon animations, the left-right movement (or up-down movement) extends past the icon's bounding box by +/- 25%, so you may need to adjust padding or margins to compensate for your use case.The animation prop translates to the class name b-icon-animation- and pass the custom animation name to the animation prop. The BootstrapVue defined icon animation effects require BootstrapVue's custom CSS. Cylon animation: Vertical cylon animation: Fade animation: Spinning animation: Reverse spinning animation: Pulsing spin animation: Reversed pulsing spin animation: Throb animation: Īs the animations are CSS based, they are applied after any SVG transforms have taken place: To use the animation, set the animation prop to one of the animation names above. 'throb' scales the icon in and out 2.12.0+.'spin-reverse-pulse' spins the icon counter-clockwise, but in a pulsed step style.'spin-pulse' spins the icon clockwise, but in a pulsed step style. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |