console
<p>32132312</p>
<div class="div1">
<div class="div2"><section class="docSection-intro" id="intro">
<blockquote>
<p>Animate.css v4 brought some <strong>breaking changes</strong>, please refer to the <a href="#migration">migration guide</a> before updating from v3.x and under.</p>
</blockquote>
<p><strong>Animate.css</strong> is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.</p>
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/00-intro.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>
<section class="docSection-usage" id="usage">
<h2>Installation and usage</h2>
<h3>Installing</h3>
<p>Install with npm:</p>
<pre class=" language-shell"><code class=" language-shell">$ <span class="token function">npm</span> <span class="token function">install</span> animate.css --save
</code></pre>
<p>with yarn:</p>
<pre class=" language-shell"><code class=" language-shell">$ <span class="token function">yarn</span> <span class="token function">add</span> animate.css
</code></pre>
<p>or add it directly to your webpage using a CDN:</p>
<pre class=" language-html"><code class=" language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span>
<span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span>
<span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
</code></pre>
<h3>Basic usage</h3>
<p>After installing Animate.css, add the class <code>animate__animated</code> to an element, along with any of the <a href="#attention_seekers">animation names</a> (don't forget the <code>animate__</code> prefix!):</p>
<pre class=" language-html"><code class=" language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>animate__animated animate__bounce<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>An animated element<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
</code></pre>
<p>That's it! You've got a CSS animated element. Super!</p>
<blockquote>
<p>Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the <a href="#best-practices">best practices</a> and <a href="#gotchas">gotchas</a> sections to bring your web-things to life in the best way possible.</p>
</blockquote>
<h4>Using <code>@keyframes</code></h4>
<p>Even though the library provides you a few helper classes like the <code>animated</code> class to get you up running quickly, you can use the provided animations <code>keyframes</code> directly. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.</p>
<p>Example:</p>
<pre class=" language-css"><code class=" language-css"><span class="token selector">.my-element</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0 0.5rem<span class="token punctuation">;</span>
<span class="token property">animation</span><span class="token punctuation">:</span> bounce<span class="token punctuation">;</span> <span class="token comment">/* referring directly to the animation's @keyframe declaration */</span>
<span class="token property">animation-duration</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span> <span class="token comment">/* don't forget to set a duration! */</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Be aware that some animations are dependent on the <code>animation-timing</code> property set on the animation's class. Changing or not declaring it might lead to unexpected results.</p>
<h4>CSS Custom Properties (CSS Variables)</h4>
<p>Since version 4, Animate.css makes use of custom properties (also known as CSS variables) to define the animations duration, delay, and iteractions. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value to globally or locally.</p>
<p>Example:</p>
<pre class=" language-css"><code class=" language-css"><span class="token comment">/* This only changes this particular animation duration */</span>
<span class="token selector">.animate__animated.animate__bounce</span> <span class="token punctuation">{</span>
<span class="token property">--animate-duration</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* This changes all the animations globally */</span>
<span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--animate-duration</span><span class="token punctuation">:</span> 800ms<span class="token punctuation">;</span>
<span class="token property">--animate-delay</span><span class="token punctuation">:</span> 0.9s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Custom properties also make it easy to change all your animations time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:</p>
<pre class=" language-javascript"><code class=" language-javascript"><span class="token comment">// All animations will take twice the time to accomplish</span>
document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span><span class="token string">'--animate-duration'</span><span class="token punctuation">,</span> <span class="token string">'2s'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// All animations will take half the time to accomplish</span>
document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span><span class="token string">'--animate-duration'</span><span class="token punctuation">,</span> <span class="token string">'.5s'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Even though custom properties are not supported by some aging browsers, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.</p>
<p class="edit-github"><a href="https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md" title="Edit this on GitHub">Edit this on GitHub</a></p>
</section>
</div>
<div class="div3"><p>123</p></div>
</div>
body{
padding:0;
margin:0;
}
.div1{
display: grid;
grid-template-rows: 1fr;
grid-template-columns: calc(100% - 300px - 1rem) 300px;gap: 1rem;margin: 0 auto;
max-width: 100%;
}
.div2 {
background-color: #ccc;
}
.div3{
background: red;
transition: transform 0.2s ease-out;
}
.div3 p{
position: sticky;
margin:0;
top: 1rem;
list-style: none;
}