Animations Not reviewed for accessibility Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.
The .anim-fade-in class is used to fade in an element on the page. This will run once when the element is revealed.
< span class = " anim-fade-in " >
< ! -- < %= octicon ( "mark-github" , : height => 32 , : class => "v-align-middle mr-2" ) % > -- >
< svg height = " 32 " class = " octicon octicon-mark-github v-align-middle mr-2 " viewBox = " 0 0 16 16 " version = " 1.1 " width = " 32 " aria-hidden = " true " > < path fill-rule = " evenodd " d = " M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z " > </ path > </ svg >
Hello from GitHub !
</ span >
The .anim-fade-out class is used to fade out an element on the page. This will run once when the element is revealed.
< span class = " anim-fade-out " >
< ! -- < %= octicon ( "mark-github" , : height => 32 , : class => "v-align-middle mr-2" ) % > -- >
< svg height = " 32 " class = " octicon octicon-mark-github v-align-middle mr-2 " viewBox = " 0 0 16 16 " version = " 1.1 " width = " 32 " aria-hidden = " true " > < path fill-rule = " evenodd " d = " M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z " > </ path > </ svg >
Hello from GitHub !
</ span >
The .anim-fade-up class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with overflow: hidden; or on the bottom of the page.
< div class = " anim-fade-up " >
< ! -- < %= octicon ( "mark-github" , : height => 32 , : class => "v-align-middle mr-2" ) % > -- >
< svg height = " 32 " class = " octicon octicon-mark-github v-align-middle mr-2 " viewBox = " 0 0 16 16 " version = " 1.1 " width = " 32 " aria-hidden = " true " > < path fill-rule = " evenodd " d = " M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z " > </ path > </ svg >
Hello from GitHub !
</ div >
The .anim-fade-down class is used to slide an element down hiding it. You should use this in a container with overflow: hidden; or on the bottom of the page.
< div class = " anim-fade-down " >
< ! -- < %= octicon ( "mark-github" , : height => 32 , : class => "v-align-middle mr-2" ) % > -- >
< svg height = " 32 " class = " octicon octicon-mark-github v-align-middle mr-2 " viewBox = " 0 0 16 16 " version = " 1.1 " width = " 32 " aria-hidden = " true " > < path fill-rule = " evenodd " d = " M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z " > </ path > </ svg >
Hello from GitHub !
</ div >
The .anim-scale-in class will scale the element in. This is useful on menus when you want them to appear more friendly.
< div class = " anim-scale-in color-bg-accent-emphasis color-fg-on-emphasis p-2 " >
< ! -- < %= octicon ( "mark-github" , : height => 32 ) % > -- >
< svg height = " 32 " class = " octicon octicon-mark-github " viewBox = " 0 0 16 16 " version = " 1.1 " width = " 32 " aria-hidden = " true " > < path fill-rule = " evenodd " d = " M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z " > </ path > </ svg >
</ div >
The .anim-grow-x class will grow an element width from 0-:100: real quick.
< div class = " anim-grow-x py-2 color-bg-success-emphasis " > </ div >
The .anim-pulse class will pulse an element infinitely.
< ! -- < %= octicon ( "mark-github" , : height => 32 , : class => "anim-pulse" ) % > -- >
< svg height = " 32 " class = " octicon octicon-mark-github anim-pulse " viewBox = " 0 0 16 16 " version = " 1.1 " width = " 32 " aria-hidden = " true " > < path fill-rule = " evenodd " d = " M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z " > </ path > </ svg >
The .anim-hover-grow class will increase the scale of the element upon hover.
< div class = " Box anim-hover-grow m-3 p-4 " >
< ! -- < %= octicon ( "mark-github" , : height => 32 ) % > -- >
< svg height = " 32 " class = " octicon octicon-mark-github " viewBox = " 0 0 16 16 " version = " 1.1 " width = " 32 " aria-hidden = " true " > < path fill-rule = " evenodd " d = " M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z " > </ path > </ svg >
</ div >
The .anim-rotate class will rotate the element indefinitely around the coordinate specified by transform-origin. Most elements have a default of transform-origin: 50% 50% and will rotate around the center.
< ! -- < %= octicon ( "mark-github" , : height => 32 , : class => "anim-rotate" ) % > -- >
< svg height = " 32 " class = " octicon octicon-mark-github anim-rotate " viewBox = " 0 0 16 16 " version = " 1.1 " width = " 32 " aria-hidden = " true " > < path fill-rule = " evenodd " d = " M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z " > </ path > </ svg >
