Help Transitions/Animations

[DeerPrince]

Hello!

I was just wondering how to integrate animations into tab codes, because so far I've only been able to get the flash animation to work inside my code:
but every other animation code that I've tried just either broke the code or didn't work, no matter how much I tried manipulating it?

The other question I have is how to put in a transition instead of an animation for both tabs and really anything else? I looked briefly at how the CSS code works for transitions, but wasn't sure how to integrate that into bbcode? And if anyone could provide an example of said code, I'd be eternally grateful c:

A question that's totally off topic: is there any way to change the orientation of the tabs? Like from horizontal to vertical for instance? This question isn't as important as the others, and more so because I'm just genuinely curious, because I couldn't seem to change the orientation when I experimented with tabs.

Thank you!​

 

[Alteras]

Do you mind providing the whole code?

You can make it horizontal a number of way depending on how you set it up. The way you have now it looks like all you need to do is change display to inline.

 

[DeerPrince]

This would be it ^-^ I tried putting in the animation, as you can see aha.. But I guess I'm just curious as to how to incorporate transitions and other animations into this specific code as well as others.

Lorem Ipsum

[class=tabs] float: left; background-color: #87CEEB; border-radius: 0px; box-shadow: 0px 2px 5px #B0C4DE; box-sizing: border-box; color: #F0F8FF; font-size: 18px; font-family: Times New Roman; font-weight: normal; line-height: 1; margin: 20px auto; min-width: 350px; text-align: center; width: 20%; [/class] [class=tab] box-sizing: border-box; cursor: url('https://img00.deviantart.net/8f32/i/2012/106/d/3/bunny_cursor_by_turtlesarealive-d4we9xu.gif'), auto; display: inline-block; padding: 10px 0; width: 32.5%; animation:{post_id}flash 5s linear infinite; [/class] [animation=flash] [keyframe=0]opacity:0.4;[/keyframe] [keyframe=50]opacity:0.9;[/keyframe] [keyframe=100]opacity:0.4;[/keyframe] [/animation] [class name=tab state=hover] background-color: #AFEEEE; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} Lorem) (show tabsContentLorem) if (eq ${currentTab} Ipsum) (show tabsContentIpsum) if (eq ${currentTab} Dolor) (show tabsContentDolor) [/script] [div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Lorem

[div class=tab]Ipsum

[div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Dolor[/div][/div] [div class="tabsContent tabsContentLorem" style="display:none;"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar iaculis placerat. Etiam eu est eros. Nullam vel iaculis libero. Cras posuere gravida ultricies. Cras sit amet volutpat ante, in varius lectus. Fusce lacinia lacinia massa, ut aliquam est. Sed sit amet porttitor nisl, id rutrum urna. Donec et ex ut dolor vehicula egestas. Quisque feugiat massa justo, vel tristique felis lobortis eget. Morbi molestie, turpis vel tempor iaculis, augue mauris tincidunt urna, id laoreet quam lacus id diam. Donec ornare dolor id nibh molestie, a vulputate nulla varius. Pellentesque nibh tortor, semper eget ante eget, posuere consectetur lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar iaculis placerat. Etiam eu est eros. Nullam vel iaculis libero. Cras posuere gravida ultricies. Cras sit amet volutpat ante, in varius lectus. Fusce lacinia lacinia massa, ut aliquam est. Sed sit amet porttitor nisl, id rutrum urna. Donec et ex ut dolor vehicula egestas. Quisque feugiat massa justo, vel tristique felis lobortis eget. Morbi molestie, turpis vel tempor iaculis, augue mauris tincidunt urna, id laoreet quam lacus id diam. Donec ornare dolor id nibh molestie, a vulputate nulla varius. Pellentesque nibh tortor, semper eget ante eget, posuere consectetur lectus.

[/div] [div class="tabsContent tabsContentIpsum" style="display: none;"]

Aliquam varius scelerisque nulla, ornare blandit tellus fringilla sed. Donec placerat dolor sed enim tincidunt tristique. Suspendisse potenti. Integer nulla orci, suscipit id ante sed, vehicula lacinia augue. In dolor justo, venenatis vitae congue ac, tempor quis sem. In suscipit lectus et scelerisque malesuada. Curabitur et enim id nisl hendrerit congue. Nulla pellentesque enim dictum, fringilla ligula id, dapibus nisi. Cras dictum diam at leo porttitor vehicula. Sed viverra luctus nisl, at iaculis nisl posuere sit amet. Pellentesque pellentesque urna nec massa egestas, non ullamcorper nulla faucibus. Proin et leo eget mauris sagittis posuere vitae sed libero. Aliquam nec rhoncus diam. Aliquam eu nulla lobortis, interdum velit quis, rhoncus purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed aliquet lacinia tristique. Pellentesque at nisi neque. Nullam luctus tortor nec nisl ultrices efficitur. Fusce suscipit eros sed lacus blandit, eu venenatis velit pulvinar. Mauris et interdum magna. Curabitur sem velit, lobortis non lacus maximus, mollis consectetur neque. Aliquam id consequat ligula, sagittis tempus enim. Nam molestie, nibh eu consectetur sodales, lorem quam porta magna, sit amet mollis odio leo in eros. Sed consectetur nisl nec tortor finibus auctor.

[/div] [div class="tabsContent tabsContentDolor" style="display: none;"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar iaculis placerat. Etiam eu est eros. Nullam vel iaculis libero. Cras posuere gravida ultricies. Cras sit amet volutpat ante, in varius lectus. Fusce lacinia lacinia massa, ut aliquam est. Sed sit amet porttitor nisl, id rutrum urna. Donec et ex ut dolor vehicula egestas. Quisque feugiat massa justo, vel tristique felis lobortis eget. Morbi molestie, turpis vel tempor iaculis, augue mauris tincidunt urna, id laoreet quam lacus id diam. Donec ornare dolor id nibh molestie, a vulputate nulla varius. Pellentesque nibh tortor, semper eget ante eget, posuere consectetur lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar iaculis placerat. Etiam eu est eros. Nullam vel iaculis libero. Cras posuere gravida ultricies. Cras sit amet volutpat ante, in varius lectus. Fusce lacinia lacinia massa, ut aliquam est. Sed sit amet porttitor nisl, id rutrum urna. Donec et ex ut dolor vehicula egestas. Quisque feugiat massa justo, vel tristique felis lobortis eget. Morbi molestie, turpis vel tempor iaculis, augue mauris tincidunt urna, id laoreet quam lacus id diam. Donec ornare dolor id nibh molestie, a vulputate nulla varius. Pellentesque nibh tortor, semper eget ante eget, posuere consectetur lectus.

[/div] [/div][/div]

coded by DeerPrince ​

[centerblock=50]
[RIGHT][div=font-size:55px;text-shadow: 2px 2px 3px #AFEEEE; color: #87CEEB;][font=Zeyada]Lorem Ipsum[/font][/div][/RIGHT]
[div= cursor: url('https://img00.deviantart.net/8f32/i/2012/106/d/3/bunny_cursor_by_turtlesarealive-d4we9xu.gif'), auto;][div=background: url('https://i.pinimg.com/564x/b0/cc/73/b0cc73cea48ea04ed2d146b028b90bf5.jpg'); background-repeat: no-repeat; height:500px;width:500px;]
[nobr]
[class=tabs]
float: left;
background-color: #87CEEB;
border-radius: 0px;
box-shadow: 0px 2px 5px #B0C4DE;
box-sizing: border-box;
color: #F0F8FF;
font-size: 18px;
font-family: Times New Roman;
font-weight: normal;
line-height: 1;
margin: 20px auto;
min-width: 350px;
text-align: center;
width: 20%;
[/class]

[class=tab]
box-sizing: border-box;
cursor: url('https://img00.deviantart.net/8f32/i/2012/106/d/3/bunny_cursor_by_turtlesarealive-d4we9xu.gif'), auto;
display: inline-block;
padding: 10px 0;
width: 32.5%;
animation:{post_id}flash 5s linear infinite;
[/class]

[animation=flash]
[keyframe=0]opacity:0.4;[/keyframe]
[keyframe=50]opacity:0.9;[/keyframe]
[keyframe=100]opacity:0.4;[/keyframe]
[/animation]

[class name=tab state=hover]
background-color: #AFEEEE;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Lorem) (show tabsContentLorem)
if (eq ${currentTab} Ipsum) (show tabsContentIpsum)
if (eq ${currentTab} Dolor) (show tabsContentDolor)
[/script]


[div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Lorem[/div][div class=tab]Ipsum[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Dolor[/div][/div]
[div class="tabsContent tabsContentLorem" style="display:none;"][div=margin: auto; overflow: auto; height:300px; width:450px; padding:5px; background-color:#F0F8FF; opacity:0.9; border:0px white solid; border-radius: 0px;][font=Times New Roman]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar iaculis placerat. Etiam eu est eros. Nullam vel iaculis libero. Cras posuere gravida ultricies. Cras sit amet volutpat ante, in varius lectus. Fusce lacinia lacinia massa, ut aliquam est. Sed sit amet porttitor nisl, id rutrum urna. Donec et ex ut dolor vehicula egestas. Quisque feugiat massa justo, vel tristique felis lobortis eget. Morbi molestie, turpis vel tempor iaculis, augue mauris tincidunt urna, id laoreet quam lacus id diam. Donec ornare dolor id nibh molestie, a vulputate nulla varius. Pellentesque nibh tortor, semper eget ante eget, posuere consectetur lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar iaculis placerat. Etiam eu est eros. Nullam vel iaculis libero. Cras posuere gravida ultricies. Cras sit amet volutpat ante, in varius lectus. Fusce lacinia lacinia massa, ut aliquam est. Sed sit amet porttitor nisl, id rutrum urna. Donec et ex ut dolor vehicula egestas. Quisque feugiat massa justo, vel tristique felis lobortis eget. Morbi molestie, turpis vel tempor iaculis, augue mauris tincidunt urna, id laoreet quam lacus id diam. Donec ornare dolor id nibh molestie, a vulputate nulla varius. Pellentesque nibh tortor, semper eget ante eget, posuere consectetur lectus.[/font][/div][/div]

[div class="tabsContent tabsContentIpsum" style="display: none;"][div=margin: auto; overflow: auto; height:300px; width:450px; padding:5px; background-color:#F0F8FF; opacity:0.9; border:0px white solid; border-radius: 0px;][font=Times New Roman]
Aliquam varius scelerisque nulla, ornare blandit tellus fringilla sed. Donec placerat dolor sed enim tincidunt tristique. Suspendisse potenti. Integer nulla orci, suscipit id ante sed, vehicula lacinia augue. In dolor justo, venenatis vitae congue ac, tempor quis sem. In suscipit lectus et scelerisque malesuada. Curabitur et enim id nisl hendrerit congue. Nulla pellentesque enim dictum, fringilla ligula id, dapibus nisi. Cras dictum diam at leo porttitor vehicula. Sed viverra luctus nisl, at iaculis nisl posuere sit amet. Pellentesque pellentesque urna nec massa egestas, non ullamcorper nulla faucibus. Proin et leo eget mauris sagittis posuere vitae sed libero.

Aliquam nec rhoncus diam. Aliquam eu nulla lobortis, interdum velit quis, rhoncus purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed aliquet lacinia tristique. Pellentesque at nisi neque. Nullam luctus tortor nec nisl ultrices efficitur. Fusce suscipit eros sed lacus blandit, eu venenatis velit pulvinar. Mauris et interdum magna. Curabitur sem velit, lobortis non lacus maximus, mollis consectetur neque. Aliquam id consequat ligula, sagittis tempus enim. Nam molestie, nibh eu consectetur sodales, lorem quam porta magna, sit amet mollis odio leo in eros. Sed consectetur nisl nec tortor finibus auctor.
[/font][/div][/div]

[div class="tabsContent tabsContentDolor" style="display: none;"][div=margin: auto; overflow: auto; height:300px; width:450px; padding:5px; background-color:#F0F8FF; opacity:0.9; border:0px white solid; border-radius: 0px;][font=Times New Roman]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar iaculis placerat. Etiam eu est eros. Nullam vel iaculis libero. Cras posuere gravida ultricies. Cras sit amet volutpat ante, in varius lectus. Fusce lacinia lacinia massa, ut aliquam est. Sed sit amet porttitor nisl, id rutrum urna. Donec et ex ut dolor vehicula egestas. Quisque feugiat massa justo, vel tristique felis lobortis eget. Morbi molestie, turpis vel tempor iaculis, augue mauris tincidunt urna, id laoreet quam lacus id diam. Donec ornare dolor id nibh molestie, a vulputate nulla varius. Pellentesque nibh tortor, semper eget ante eget, posuere consectetur lectus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar iaculis placerat. Etiam eu est eros. Nullam vel iaculis libero. Cras posuere gravida ultricies. Cras sit amet volutpat ante, in varius lectus. Fusce lacinia lacinia massa, ut aliquam est. Sed sit amet porttitor nisl, id rutrum urna. Donec et ex ut dolor vehicula egestas. Quisque feugiat massa justo, vel tristique felis lobortis eget. Morbi molestie, turpis vel tempor iaculis, augue mauris tincidunt urna, id laoreet quam lacus id diam. Donec ornare dolor id nibh molestie, a vulputate nulla varius. Pellentesque nibh tortor, semper eget ante eget, posuere consectetur lectus.
[/font][/div][/div]
[/nobr][/div][/div]
[centerblock=55]
[RIGHT][font=Times New Roman]coded by [USER=6719]@DeerPrince[/USER][/font][/RIGHT]
[/centerblock]
[/centerblock]

​

 

[Alteras]

To do transitions, you just have to put transition: propertyname timing.

Here's a guide for how to do it: Tutorial - A Guide to Animations using CSS Transitions and BBscript

as for vertical tabs, it looks like all you have to do is add position: relative;

 

[DeerPrince]

Thank you so much!​