GC Design SystemCSS Shortcuts
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Transition

The transition class sets the transition property. It applies an animation that allows fading content in or out when hovering. Overview
CSS Shortcut class Applied style 
transition-fade-in
 
opacity: 0;
transition: opacity 0.15s ease-in-out;

&:hover {
 opacity: 1;
}
 
transition-fade-out
 
opacity: 1;
transition: opacity 0.15s ease-in-out;

&:hover {
 opacity: 0;
}

Examples

Fade in
transition-fade-in

When hovered over, this element fades in. 
<span class="transition-fade-in">
  When hovered over, this element fades in.
</span>

Fade out
transition-fade-out

When hovered over, this element fades out. 
<span class="transition-fade-out">
  When hovered over, this element fades out.
</span>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:
  • xs: > 480px
  • sm: > 640px
  • md: > 768px
  • lg: > 1024px
  • xl: > 1280px
<div class="xs:transition-fade-in ...">
  ...
</div>
Learn more about the responsive layout prefix. 2026-01-06