The most effective banner animations are entrance animations: the banner slides, fades, or scales into view when it first appears. These work because they signal "something new appeared" without being distracting during ongoing use.<\/p>\n\n\n\n Slide-in from top:<\/strong><\/p>\n\n\n\n Slide-in from bottom (for bottom-positioned banners):<\/strong><\/p>\n\n\n\n Fade in:<\/strong><\/p>\n\n\n\n When the user dismisses the banner, animate it out rather than removing it instantly. This feels more polished:<\/p>\n\n\n\n After the entrance animation, a subtle cue can draw attention to the CTA button without being intrusive:<\/p>\n\n\n\n Gentle pulse on the CTA button:<\/strong><\/p>\n\n\n\n Icon bounce (e.g., the app icon):<\/strong><\/p>\n\n\n\n Keep these subtle: small movements (2-4px), short durations (0.5-2s), and limited repetitions (2-3 times, then stop).<\/p>\n\n\n\n Never use animations that loop indefinitely:<\/p>\n\n\n\n These are distracting and trigger "banner blindness" in the worst way: users learn to ignore the entire area of the screen.<\/p>\n\n\n\n Avoid animations that move the banner significantly or affect the page layout:<\/p>\n\n\n\n Never auto-play video or audio in a smart banner. It is intrusive, consumes bandwidth, and violates user expectations.<\/p>\n\n\n\n CSS animations run on the compositor thread and do not block the main thread. JavaScript animations ( The The only CSS properties that can be animated without triggering layout recalculation are Do not start the animation until the banner is in the viewport. For banners at the top of the page, this is immediate. For banners at the bottom (floating or sticky), use the Intersection Observer API<\/a>:<\/p>\n\n\n\n Users who are sensitive to motion can enable the "reduce motion" setting in their operating system. Your banner should respect this preference:<\/p>\n\n\n\n This is not optional. WCAG 2.1 Success Criterion 2.3.3<\/a> requires that motion can be disabled. The When the banner appears, do not steal keyboard focus from the user's current position. Screen reader users navigating a page should not be interrupted by a banner animation.<\/p>\n\n\n\n If the banner contains a dismissible element, make sure it is keyboard accessible:<\/p>\n\n\n\n Animated elements should maintain sufficient color contrast at all animation states. If you use a fade-in, the text must be readable even at partial opacity during the transition. Keep fade durations short (0.2-0.4s) so the low-contrast state is brief.<\/p>\n\n\n\n Do not show the banner immediately on page load. Let the user orient themselves first:<\/p>\n\n\n\n This pattern avoids the immediate visual clutter of a banner appearing alongside the page content, and the entrance animation is more noticeable when it happens after the user has started reading.<\/p>\n\n\n\n Tolinku's smart banners<\/a> include built-in entrance and exit animations that respect For dismiss behavior after animation, see banner dismiss behavior<\/a>. For the complete smart banners setup, see the smart banners guide<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Use animation in smart banners to capture attention without annoying users. Learn which animations work, performance considerations, and accessibility guidelines.<\/p>\n","protected":false},"author":2,"featured_media":1349,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Animated Smart Banners: Attention Without Annoyance","rank_math_description":"Use animation in smart banners to capture attention. Learn which animations work, performance considerations, and accessibility guidelines.","rank_math_focus_keyword":"animated smart banners","rank_math_canonical_url":"","rank_math_facebook_title":"","rank_math_facebook_description":"","rank_math_facebook_image":"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/og-animated-smart-banners.png","rank_math_facebook_image_id":"","rank_math_twitter_title":"","rank_math_twitter_description":"","rank_math_twitter_image":"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/og-animated-smart-banners.png","footnotes":""},"categories":[16],"tags":[337,335,336,110,296,40,33,41],"class_list":["post-1350","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-accessibility","tag-animation","tag-css","tag-marketing","tag-performance","tag-smart-banners","tag-user-experience","tag-web-to-app"],"_links":{"self":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/comments?post=1350"}],"version-history":[{"count":3,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1350\/revisions"}],"predecessor-version":[{"id":2286,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1350\/revisions\/2286"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/media\/1349"}],"wp:attachment":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/media?parent=1350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/categories?post=1350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/tags?post=1350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Tolinku](\"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/screenshot-banner-form-1772822962854.png\")
\nThe banner creation form with title, body, colors, CTA, scheduling, and live preview.<\/em><\/p>\n\n\n\nAnimations That Work<\/h2>\n\n\n\n
Entrance Animations<\/h3>\n\n\n\n
@keyframes slideDown {\n from {\n transform: translateY(-100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n.smart-banner {\n animation: slideDown 0.3s ease-out;\n}\n<\/code><\/pre>\n\n\n\n@keyframes slideUp {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n.smart-banner--bottom {\n animation: slideUp 0.3s ease-out;\n}\n<\/code><\/pre>\n\n\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.smart-banner {\n animation: fadeIn 0.4s ease-in;\n}\n<\/code><\/pre>\n\n\n\nExit Animations<\/h3>\n\n\n\n
function dismissBanner(bannerEl) {\n bannerEl.classList.add('smart-banner--dismissing');\n bannerEl.addEventListener('animationend', () => {\n bannerEl.remove();\n persistDismiss();\n }, { once: true });\n}\n<\/code><\/pre>\n\n\n\n.smart-banner--dismissing {\n animation: slideUp 0.2s ease-in forwards;\n}\n\n\/* For top banners, slide up to exit *\/\n.smart-banner--top.smart-banner--dismissing {\n animation: slideUpExit 0.2s ease-in forwards;\n}\n\n@keyframes slideUpExit {\n to {\n transform: translateY(-100%);\n opacity: 0;\n }\n}\n<\/code><\/pre>\n\n\n\nSubtle Attention Cues<\/h3>\n\n\n\n
@keyframes subtlePulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.03); }\n}\n\n.smart-banner__cta {\n animation: subtlePulse 2s ease-in-out 3; \/* Play 3 times, then stop *\/\n animation-delay: 2s; \/* Wait 2 seconds after banner appears *\/\n}\n<\/code><\/pre>\n\n\n\n@keyframes iconBounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-4px); }\n}\n\n.smart-banner__icon {\n animation: iconBounce 0.6s ease-in-out 2;\n animation-delay: 1.5s;\n}\n<\/code><\/pre>\n\n\n\nAnimations to Avoid<\/h2>\n\n\n\n
Continuous Animations<\/h3>\n\n\n\n
\n
Large-Scale Movements<\/h3>\n\n\n\n
\n
Auto-Playing Video or Audio<\/h3>\n\n\n\n
Performance<\/h2>\n\n\n\n
Use CSS Animations, Not JavaScript<\/h3>\n\n\n\n
requestAnimationFrame<\/code> loops, jQuery .animate()<\/code>) run on the main thread and can cause jank.<\/p>\n\n\n\n\/* Good: GPU-accelerated CSS animation *\/\n.smart-banner {\n will-change: transform, opacity;\n animation: slideDown 0.3s ease-out;\n}\n<\/code><\/pre>\n\n\n\nwill-change<\/code> property tells the browser to prepare for the animation, enabling GPU acceleration. Only use it on elements that will actually animate, and remove it after the animation completes.<\/p>\n\n\n\nStick to Transform and Opacity<\/h3>\n\n\n\n
transform<\/code> and opacity<\/code>. Animating height<\/code>, width<\/code>, top<\/code>, left<\/code>, margin<\/code>, or padding<\/code> forces the browser to recalculate layout on every frame, causing jank:<\/p>\n\n\n\n\/* Bad: animates height, triggers layout *\/\n@keyframes expandBad {\n from { height: 0; }\n to { height: 60px; }\n}\n\n\/* Good: animates transform, no layout *\/\n@keyframes expandGood {\n from { transform: scaleY(0); transform-origin: top; }\n to { transform: scaleY(1); }\n}\n<\/code><\/pre>\n\n\n\nLazy Animation<\/h3>\n\n\n\n
const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('smart-banner--animate');\n observer.unobserve(entry.target);\n }\n });\n}, { threshold: 0.5 });\n\nobserver.observe(document.querySelector('.smart-banner'));\n<\/code><\/pre>\n\n\n\nAccessibility<\/h2>\n\n\n\n
Respecting
prefers-reduced-motion<\/code><\/h3>\n\n\n\n@media (prefers-reduced-motion: reduce) {\n .smart-banner,\n .smart-banner__cta,\n .smart-banner__icon {\n animation: none;\n transition: none;\n }\n}\n<\/code><\/pre>\n\n\n\nprefers-reduced-motion<\/code> media query is the standard way to honor this.<\/p>\n\n\n\nFocus Management<\/h3>\n\n\n\n
<div class="smart-banner" role="complementary" aria-label="App promotion">\n <p>Get the app for a better experience<\/p>\n <a href="https:\/\/apps.apple.com\/..." class="smart-banner__cta">Install<\/a>\n <button class="smart-banner__close" aria-label="Dismiss banner">×<\/button>\n<\/div>\n<\/code><\/pre>\n\n\n\nColor Contrast<\/h3>\n\n\n\n
Delayed Entrance<\/h2>\n\n\n\n
function initBanner() {\n \/\/ Wait for the user to scroll or spend time on the page\n const showAfterMs = 2000; \/\/ 2 seconds\n const showAfterScroll = 200; \/\/ 200px of scroll\n\n let shown = false;\n\n function showBanner() {\n if (shown) return;\n shown = true;\n document.querySelector('.smart-banner').classList.add('smart-banner--visible');\n }\n\n setTimeout(showBanner, showAfterMs);\n\n window.addEventListener('scroll', () => {\n if (window.scrollY > showAfterScroll) showBanner();\n }, { passive: true });\n}\n<\/code><\/pre>\n\n\n\nTolinku Smart Banner Animations<\/h2>\n\n\n\n
prefers-reduced-motion<\/code>. The banner SDK handles the animation lifecycle (entrance, attention cue, dismiss) automatically, with configurable timing and animation style through the dashboard<\/a>.<\/p>\n\n\n\n