In this example a bottom container is animated into view when a hash
#target-1 is present in the url. This hash corresponds with the id attribute of the container (
target-1). The bottom container is initially positioned
-100% with the class
offcanvas-bottom and reset to
0 when its
:target event is enabled creating the animated effect. The show link takes care of that for us with
target-1 as its href value.
offcanvas rules effect the initial visibility of the element on the page. This is generally paired with a positioning rule like
pin-top to govern how the element appears on the page when it's targeted.
Don't want to use :target?
For pages that require scrolling :target might not be the best option. offcanvas additionaly behaves to an
Preventing animation transitions on page load
Elements that have the
animate class may cause undesired animation glitches on page load. One way to avoid this effect is to enable transitions after the body tag receives an animate class once the DOM has loaded.