webkit-transition CSS not showing

I'm working on a new character sheet for a homebrew system and I wanted to implement some CSS animations into parts of the sheet. Starting with the buttons that operate the different "tabs" of the sheet. I found that the usual CSS webkit transitions don't appear to work for the custom sheets. Perhaps I'm missing something on how to implement the button right. You can paste this in JSFiddle to see what I had tested before trying to use it on roll20.

https://jsfiddle.net/

CSS

.btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
  border-radius: 12px;
}

.hvr-sweep-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color 0.3s, duration 0.3;
  transition: color 0.3s, duration 0.3s;
  -webkit-transition-property: transform 0.3s, duration 0.3;
  transition: transform 0.3s, duration 0.3s;
}

.hvr-sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  border-radius: 12px;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
  color: white;
}
.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}

HTML

<h2>Fading Buttons - "Fade in Effect"</h2>

<button class="btn hvr-sink hvr-sweep-to-top">Hover Over Me</button>

What part isn't working?  Make sure to use ".sheet-" in all your css class names since roll20 adds "sheet-" to each class name when parsing the HTML.

example;

.sheet-btn {

    <stuff ...>

}

That hit the nail on the head. I'm so rusty with this I forgot that the prefixes in the CSS matter.

Solution

CSS

.sheet-btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
  border-radius: 12px;
}

.sheet-hvr-sweep-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color 0.3s, duration 0.3;
  transition: color 0.3s, duration 0.3s;
  -webkit-transition-property: transform 0.3s, duration 0.3;
  transition: transform 0.3s, duration 0.3s;
}

.sheet-hvr-sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  border-radius: 12px;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sheet-hvr-sweep-to-top:hover, .sheet-hvr-sweep-to-top:focus, .sheet-hvr-sweep-to-top:active {
  color: white;
}
.sheet-hvr-sweep-to-top:hover:before, .sheet-hvr-sweep-to-top:focus:before, .sheet-hvr-sweep-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.sheet-hvr-sweep-to-top:hover, .sheet-hvr-sweep-to-top:focus, .sheet-hvr-sweep-to-top:active {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}

HTML

<h2>Fading Buttons - "Fade in Effect"</h2>

<button class="sheet-btn sheet-hvr-sweep-to-top">Hover Over Me</button>

Cool beans

If you're rusty on the Roll20 html/css quirks, I recommend you check out the https://wiki.roll20.net/Building_Character_Sheets and associated articles again, as they have been updated considerably recently(the version on the wiki, not Help Center).

Thanks, I'll check this out. Also do you have any advice for what editor I should be using. I have Dreamweaver CC but I'm wondering if that's overkill for something like this.

I use Sublime Text, and some of my settings for it are linked in the article.

Rather than make a new topic I figured I'd just reply to this one.

I'm having a problem trying to use custom CSS animations on the tab buttons for pages. As I posted above I've gotten the animations themselves to work but have been unable to get them to reveal the intended page content.

When selecting the radio button within a <label> element, it does not reveal any area. When selected without a label element, it does work but can only be selected by clicking the radio circle instead of the box.

Would it be easier to make psuedo radio buttons with some other input method? is there something I'm missing with how the CSS sees the label element? This behavior is odd and I've been messing with it for a couple days but can't quite figure out what's causing it.  Here is the code from the last time I tried it.

CSS

/*----------- Tabs Setup -------------*/

/*this hides the contents of each tab by default*/
.charsheet div[class^="sheet-section"] {
    
	display: none;
}

/*this shows the tab content when the appropriate input field is selected*/
.charsheet input.sheet-tab1:checked ~ div.sheet-section-core,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-abilities,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-weapons,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-health,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-inventory,
.charsheet input.sheet-tab6:checked ~ div.sheet-section-other {
	display: block;
}

.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { 	
	display: block;
}

/*this shows the tab content when the appropriate input field is selected*/
.charsheet input.sheet-tab1:checked ~ div.sheet-section-core,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-abilities,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-weapons,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-health,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-inventory,
.charsheet input.sheet-tab6:checked ~ div.sheet-section-other {
	display: block;
}

.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { 	
	display: block;
}

/*this modifies the span color once the radio button is selected so you know which tab is selected*/
.charsheet input.sheet-tab1:checked + label.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
.charsheet input.sheet-tab8:checked + span.sheet-tab8,
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {
    
    	background: #2c424e;
    	color: #bfc4c6;
	border-radius: 0;
}

/*----------- End Tab Setup -----------*/

.sheet-charsheet sheet-tab:hover {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  border-radius: 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.sheet-hvr-sweep-to-top {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
  border-radius: 0;
  
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color 0.3s, duration 0.3;
  transition: color 0.3s, duration 0.3s;
  -webkit-transition-property: transform 0.3s, duration 0.3;
  transition: transform 0.3s, duration 0.3s;
}
.sheet-hvr-sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  border-radius: 0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sheet-hvr-sweep-to-top:hover, .sheet-hvr-sweep-to-top:focus, .sheet-hvr-sweep-to-top:active, .sheet-hvr-sweep-to-top:checked {
  color: white;
}
.sheet-hvr-sweep-to-top:hover:before, .sheet-hvr-sweep-to-top:focus:before, .sheet-hvr-sweep-to-top:active:before, .sheet-hvr-sweep-to-top:checked {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
.sheet-hvr-sweep-to-top:hover, .sheet-hvr-sweep-to-top:focus, .sheet-hvr-sweep-to-top:active, .sheet-hvr-sweep-to-top:checked {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}

HTML

	
	<label class="sheet-tab sheet-tab1 sheet-hvr-sweep-to-top">
	<input type="radio" class="sheet-tab sheet-tab1" name="attr_tab" value="1" title="Core Info" checked="checked"/> 
	<span class="sheet-tab sheet-tab1" style="line-height: 40px;">CORE INFO</span>
	</label>
	
	
	<input type="radio" class="sheet-tab sheet-tab2" name="attr_tab" value="2" title="Abilities" /> 
	<span class="sheet-tab sheet-tab2 sheet-hvr-sweep-to-top" style="line-height: 40px;">ABILITIES</span>
	
	<label>
	<input type="radio" class="sheet-tab sheet-tab3" name="attr_tab" value="3" title="Weapons" /> 
	<span class="sheet-tab sheet-tab3 sheet-hvr-sweep-to-top" style="line-height: 40px;">WEAPONS</span>
	</label>
	<label>
	<input type ="radio" class="sheet-tab sheet-tab4" name="attr_tab" value="4" title="Health" /> 
	<span class="sheet-tab sheet-tab4 sheet-hvr-sweep-to-top" style="line-height: 40px;">HEALTH</span>
	</label>
	<label>
	<input type="radio" class="sheet-tab sheet-tab5" name="attr_tab" value="5" title="Inventory" /> 
	<span class="sheet-tab sheet-tab5 sheet-hvr-sweep-to-top" style="line-height: 40px;">INVENTORY</span>
	</label>
	<label>
	<input type="radio" class="sheet-tab sheet-tab6" name="attr_tab" value="6" title="Other" /> 
	<span class="sheet-tab sheet-tab6 sheet-hvr-sweep-to-top" style="line-height: 40px;">CONFIG</span>
	</label>
	<label>
	<input type="radio" class="sheet-tab sheet-tab7" name="attr_tab" value="99" title="All (debug)" />
	<span class="sheet-tab sheet-tab7 sheet-hvr-sweep-to-top" style="line-height: 40px;">NOTES</span>
	</label>
	
	<div class="sheet-section-core">
		<h1>Skills &amp; Stats</h1>
		1 Core tab
	</div>
	
	<div class="sheet-section-abilities">
		<h1>Abilities</h1>
		
		2 Abilities tab - sheet-section-abilities
	</div>
	
	<div class="sheet-section-weapons">
		<h1>Weapons</h1>
	    3 Weapons tab - sheet-section-weapons
	</div>
	
	<div class="sheet-section-health">
		<h1>Damage</h1>
		4 Health tab - sheet-section-health
	</div>
	
	<div class="sheet-section-inventory">
		<h1>Inventory</h1>
		5 Inventory tab - sheet-section-inventory
	</div>
	
	<div class="sheet-section-other">
		<h1>Configuration (GM ONLY)</h1>
		6 Other tab - sheet-section-other
	</div>
	<div class="sheet-section-notes">
		<h1>Notebook</h1>
		7 Notes tab - sheet-section-notes
	</div>
</div>