178 lines
9.2 KiB
HTML
178 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Primary Meta Tags -->
|
|
<title>Animate.css | A cross-browser library of CSS animations.</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="title" content="Animate.css | A cross-browser library of CSS animations.">
|
|
<meta name="description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://animate.style">
|
|
<meta property="og:title" content="Animate.css | A cross-browser library of CSS animations.">
|
|
<meta property="og:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
|
|
<meta property="og:image" content="https://animate.style/img/animatecss-opengraph.jpg">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="https://animate.style">
|
|
<meta property="twitter:title" content="Animate.css | A cross-browser library of CSS animations.">
|
|
<meta property="twitter:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
|
|
<meta property="twitter:image" content="https://animate.style/img/animatecss-opengraph.jpg">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
|
|
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
|
|
|
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,700;1,400&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<!-- Fork Corner Stylesheet -->
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
|
|
<link rel="stylesheet" href="animate.min.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Fork Corner -->
|
|
<a href="https://github.com/animate-css/animate.css" target="_blank" id="fork-corner" class="fork-corner fc-size-small fc-pos-tl fc-animate-grow fc-theme-github"></a>
|
|
|
|
<article class="intro">
|
|
<section class="callout">
|
|
<h1 class="callout-title">Animate.css</h1>
|
|
<h2 class="callout-subtitle">Just-add-water CSS animations</h2>
|
|
<p class="callout-showList">
|
|
<button class="button button-animations">See animations</button>
|
|
</p>
|
|
</section>
|
|
|
|
<section class="animation-list">
|
|
<label for="night-light-checkbox" class="night-light-label">
|
|
<input type="checkbox" id="night-light-checkbox" />
|
|
<span class="night-light-ball"></span>
|
|
<svg viewBox="0 0 512 512" class="sun-svg">
|
|
<path id="sun-svg"
|
|
d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z">
|
|
</path>
|
|
</svg>
|
|
<svg viewBox="0 0 512 512" class="moon-svg">
|
|
<path id="moon-svg"
|
|
d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z">
|
|
</path>
|
|
</svg>
|
|
</label>
|
|
<button class="callout-hideList button">Close list</button>
|
|
{{list}}
|
|
</section>
|
|
|
|
<footer class="intro-footer">
|
|
<p>
|
|
Another thing from
|
|
<a href="https://daneden.me" target="_blank" title="Daniel Eden">Daniel Eden</a> and
|
|
<a href="#contributors" title="Contributors">friends</a>
|
|
</p>
|
|
</footer>
|
|
</article>
|
|
|
|
<main>
|
|
<header class="docs-header">
|
|
<div class="container">
|
|
<h2 class="docs-mainTitle">
|
|
<a href="#documentation" title="Documentation">Documentation</a>
|
|
</h2>
|
|
</div>
|
|
</header>
|
|
|
|
<article class="docs" id="documentation">
|
|
<span class="hamburger">
|
|
<svg
|
|
width="23"
|
|
height="15"
|
|
viewBox="0 0 23 15"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<line y1="1.5" x2="23" y2="1.5" stroke="#351C75" stroke-width="3" />
|
|
<line y1="7.5" x2="23" y2="7.5" stroke="#351C75" stroke-width="3" />
|
|
<line y1="13.5" x2="23" y2="13.5" stroke="#351C75" stroke-width="3" />
|
|
</svg>
|
|
</span>
|
|
<div class="container">
|
|
<div class="content">
|
|
{{docs}}
|
|
</div>
|
|
<aside class="sidebar">
|
|
<div class="meta">
|
|
<a href="https://github.com/animate-css/animate.css" target="_blank" class="icon-github">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 18 18"
|
|
width="18"
|
|
height="18"
|
|
>
|
|
<path
|
|
fill="#000000"
|
|
d="M16.793 4.703a8.96 8.96 0 00-3.276-3.276A8.803 8.803 0 009 .22a8.804 8.804 0 00-4.518 1.207 8.96 8.96 0 00-3.275 3.276A8.803 8.803 0 000 9.22c0 1.96.572 3.724 1.717 5.29 1.144 1.567 2.623 2.651 4.435 3.252.211.04.367.012.469-.081a.458.458 0 00.152-.352l-.006-.633c-.004-.398-.006-.746-.006-1.042l-.27.046a3.434 3.434 0 01-.65.041 4.958 4.958 0 01-.814-.082 1.82 1.82 0 01-.785-.351 1.487 1.487 0 01-.516-.72l-.117-.27a2.93 2.93 0 00-.369-.598c-.168-.219-.338-.367-.51-.445l-.082-.059a.865.865 0 01-.152-.14.643.643 0 01-.105-.165c-.024-.054-.004-.1.058-.135.063-.035.176-.052.34-.052l.234.035c.157.031.35.125.58.281.23.156.42.36.569.61.18.32.396.564.65.732.254.168.51.252.768.252.257 0 .48-.02.667-.059a2.33 2.33 0 00.528-.175c.07-.524.262-.927.574-1.208a8.026 8.026 0 01-1.201-.21 4.779 4.779 0 01-1.102-.458 3.153 3.153 0 01-.943-.785c-.25-.312-.455-.723-.615-1.23-.16-.508-.24-1.094-.24-1.758 0-.946.308-1.75.925-2.414-.289-.711-.261-1.508.082-2.39.227-.071.563-.018 1.008.157.446.176.772.327.979.452.207.125.373.23.498.316A8.32 8.32 0 019 4.568c.773 0 1.523.101 2.25.304l.445-.281c.305-.188.664-.36 1.078-.516.414-.156.73-.199.95-.129.351.883.382 1.68.093 2.39.617.665.926 1.47.926 2.415 0 .664-.08 1.252-.24 1.764-.16.511-.367.921-.62 1.23-.255.309-.572.569-.95.78-.38.21-.747.362-1.102.456a8.013 8.013 0 01-1.201.212c.406.351.61.906.61 1.664v2.472c0 .14.048.258.146.351.097.094.252.121.463.082 1.812-.601 3.29-1.685 4.435-3.252C17.427 12.944 18 11.18 18 9.22a8.81 8.81 0 00-1.207-4.517z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
<span class="animate-version">v{{version}}</span>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<footer class="main-footer">
|
|
<p>
|
|
Animate.css is a Hippocratic-2.1 licensed library.
|
|
You can use it freely, respecting the terms included in the <a href="https://github.com/animate-css/animate.css/blob/main/LICENSE" title="license">license file.</a>
|
|
</p>
|
|
</footer>
|
|
|
|
<aside class="motionless__banner">
|
|
<p class="motionless__paragraph">
|
|
<b>Hey!</b> It seems that you have animations disabled on your OS, turning Animate.css
|
|
off.<br />
|
|
Animate.css supports the
|
|
<a
|
|
title="prefers-reduced-motion CSS media feature on MDN"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"
|
|
>
|
|
prefers-reduced-motion CSS media feature</a
|
|
>. You can read more about it
|
|
<a
|
|
title="Move Ya! Or maybe, don't, if the user prefers-reduced-motion! on Google Developers"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion"
|
|
>
|
|
here</a
|
|
>.
|
|
</p>
|
|
</aside>
|
|
<script type="module" src="main.mjs"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
|
|
|
<!-- Fork Corner Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/fork-corner/dist/fork-corner.min.js" defer></script>
|
|
</body>
|
|
</html>
|