---
layout: pattern
title: Animated footer
description: This banner slides-in from the bottom of the page
  without causing layout shifts.
date: 2021-08-18
updated: 2021-08-18
height: 300
---

This animated footer slides-in from the bottom of the page. The effect is
created by using the CSS
[`transform`](https://developer.mozilla.org/docs/Web/CSS/transform)
property. The result is a [performant
animation](/animations-guide/) that does not cause layout shifts.
