Stooge CSS Documentation

The categories of animations are:

• - Text
• - Color
• - Box-model
• - Transform
• - General
• - Transition classes

Animation in the Stooge CSS context refers to the hover and focus (button click) CSS states.

Hover and focus states can be treated seperately or can be treated the same together. This is relevant for animation on buttons, fields, anchor tags and other components which have both hover and focus CSS events.

The hover- group of class names are for hover only, when you hover away, it goes back to normal state.

The focus- group of class names are for focus only. The focus state happens when you use the keyboard to tab into it or click on something, and is lost when you tab into or click on something else.

The hf- (hover and focus) group of class names are hover and focus combined. When you hover over something, the effect begins, and if you click on it and hover away, the effect stays, unlike with either state on their own.

Animation on colors must include a transition class. If you do animation on multiple properties, use the tr-all class.

Animation type	Property	Class name	Example/Code
Text animation	font-style	hover/focus/hf-italic
Text animation	font-style	hover/focus/hf-fs-normal
Text animation	font-weight	hover/focus/hf-fw-1-9
Text animation	font-weight	hover/focus/hf-bold
Text animation	text-decoration	hover/focus/hf-underline
Text animation	text-decoration	hover/focus/hf-no-underline
Text animation	text-decoration	hover/focus/hf-strike
Text animation	text-shadow	hover/focus/hf-ts-11, 12, 21, 22, 31, 32, 33, 41, 42, 43
Color animation	background-color	hover-bc-(color-ID)	hover-bc-orange-5
Color animation	border-color	hover-bo-(color-ID)	hover-bo-blue-14
Color animation	color	hover-(color-ID)	hover-white
Box-model animation	outline	hover/focus/hf-outline	outline: 1px solid;
Box-model animation	outline	hover/focus/hf-outline-transparent	outline: 1px transparent;
Box-model animation	outline	hover/focus/hf-ou-0	outline: 1px solid;
Box-model animation	outline	hover/focus/hf-shadow-1/2/3/4/5	Shadow disappears on button press(focus), simulates a button pressing down
Box-model animation	box-shadow	hover-shadow-fw5, 7, 9	Shadow on hover
Transform animation	transform: rotate	hover-rotate-45, 90, 135, 180, 225, 270, 315, 360
Transform animation	transform: scale	hover-grow	Make an item get bigger
Transform animation	transform: scale	hover-grow-large	Make an item get even bigger
General animation	Opacity	hover-fade	Fade on hover
General animation	Opacity	hover-glow	Glow a little more on hover
General animation	Opacity	hover-blinker	Flashing effect, flashes on and off, you can do it on hover or always
Transition class	transition: background-color	hover/focus-tr-bc	transition-property: background-color; transition-duration: .4s; transition-timing-function: ease-in-out;
Transition class	transition: border-color	hover/focus-tr-bo	transition-property: border-color; transition-duration: .4s; transition-timing-function: ease-in-out;
Transition class	transition: color	hover/focus-tr-co	transition-property: color; transition-duration: .4s; transition-timing-function: ease-in-out;
Transition class	transition: transform	hover/focus-tr-tr	transition-property: transform; transition-duration: .4s; transition-timing-function: ease-in-out;
Transition class	transition: all	hover/focus-tr-all	transition-property: all; transition-duration: .4s; transition-timing-function: ease-in-out;
Transition class	transition-duration	hover/focus-tr-fast	transition-duration: .3s !important; transition-timing-function: linear !important;
Transition class	transition-duration	hover/focus-tr-medium	transition-duration: .5s !important; transition-timing-function: linear !important;
Transition class	transition-duration	hover/focus-tr-slow	transition-duration: 1s !important; transition-timing-function: linear !important;

Apply these animation properties to any component or element. Button animations are shown further down.

HTML:

<input type="text" class="txt my-2 mx-2 px-1 he-3 fs-1 br-025 bc-yellow-2 hover-bc-yellow-8 focus-bw-2 hover-ou-1" placeholder="Text field, click me">
<a class="di-bl link btn my-2 mx-2 wi-16 he-2 py-025 fs-125 white bc-orange-10 br-025 hover-purple-20 hover-underline hover-blinker tr-all">Hover over this anchor ink</a>
Copy

Text animation

The animation examples below are with text but you can use any element.

A transition class is included by default for text animation. For example, hover-strike has transition: text-decoration .35s ease-in; in it's class.

hover, focus, and hf classes are available for text property animation.

Hover over this - dim

Note: It's best to use these text hover events in a "display: inline-block" attribute (di-ib).

HTML:

<p class="di-ib my-025 fs-125 hover-fw-6 hover-strike hover-background">Hover over
    this - hover-fw-6 hover-strike hover-background</p>
<p class="di-ib my-025 fs-125 hover-ts-12">Hover over this - text shadow - ts-12
</p>
<p class="di-ib my-025 fs-125 hover-ts-42">Hover over this - text shadow - ts-42</p>
<p class="di-ib my-025 fs-125 hover-bc-yellow-8 hover-background">Hover over this -
    hover-bc-yellow-8 hover-background</p>
<p class="di-ib my-025 fs-125 hover-bc-purple-3 hover-underline hover-background">Hover
    over this - bc-purple-3 hover-underline hover-background</p>
<p class="di-ib my-025 fs-125 hover-orange-15">Hover over this -
    hover-orange-15</p>
<p class="di-ib my-025 fs-125 pointer link">Hover over this - pointer link
</p>
<p class="my-025 fs-125 hover-dim">Hover over this - dim</p>
<p class="di-ib my-025 fs-125  ta-l hover-grow">Hover over this - grow</p>
<p class="di-ib my-025 fs-125 ta-l hover-grow-large">Hover over this - grow-large
</p>
<p class="di-ib my-025 fs-125 rotate-180 hover-rotate-0 tr-tr tr-slow">Hover over this -
    rotate</p>
<p class="mt-05 fs-125"><span class="fw-7">Note: </span>It's best to use these text hover events
    in a "display: inline-block" attribute (di-ib).</p>
Copy

Animated buttons and fields

Hover animation effects

Focus animation effects

Often, you would want to have the same animation effect for both hover and focus. You don't want the user to think their click hasn't been done when the button focus is away from the button after they clicked it. But sometimes you may want the button to change only on click, in this case, instead of using the hover- class, use the focus- class instead.

You can have both with the hf- (hover and focus) group of class names. When you hover over the button, the animation effect happens, and when you click it and move away, the animation effect stays. You get one or the other with the other two groups of classes.

Stooge CSS doesn't allow you to distinguish between hover and focus states for color. But it does for text properties, transition properties and box model properties..

See the difference between hover, focus and hf (hover and focus)

Comparing hover, focus and hf, color effects for hover and focus are the same but font and other types of effects are different for each state. In this three button example, for .focus, the text is bold only when you click on it, not when you hover. For .hr, the text is bold on hover and click, not on hover or click, but both hover and click.