2253 lines
128 KiB
HTML
2253 lines
128 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>20 Best CSS Animation Resources - DEV Community 👩💻👨💻</title>
|
||
<meta name="last-updated" content="2022-10-28 07:12:39 UTC">
|
||
<meta name="user-signed-in" content="false">
|
||
<meta name="head-cached-at" content="1666941159">
|
||
<!-- Experimental web monetization payment pointer for micropayments -->
|
||
<!-- It lets readers make micropayments to websites they visit. -->
|
||
<!-- This is step 1: Get live in production to test for platform-wide payment pointer. -->
|
||
<!-- Step 2: Allow authors to set their payment pointer so they can directly monetize their content based on visitors. -->
|
||
<!-- Step 3: Enable further functionality based on what we learn from this experimentation and how the ecosystem evolves. -->
|
||
<meta name="monetization" content="$ilp.uphold.com/24HhrUGG7ekn">
|
||
<meta name="environment" content="production">
|
||
<link rel="stylesheet" href="https://dev.to/assets/minimal-7ae6cb020de70f4fff67c69992dfe6a916a3d64eb08e851cfce81b8ca04c3fba.css" media="all" id="main-minimal-stylesheet" />
|
||
<link rel="stylesheet" href="https://dev.to/assets/views-feec97295bb38912533cd8abc8ea91e57ce12163699186d7e6ff4ec091164bc9.css" media="all" id="main-views-stylesheet" />
|
||
<link rel="stylesheet" href="https://dev.to/assets/crayons-ccf0980a0082dafe0b93173bc3ec5686c4a916e1170fc92455f78b35049329e4.css" media="all" id="main-crayons-stylesheet" />
|
||
|
||
<script src="https://dev.to/assets/base-fc4d44f45bbe992d276daea7c046cd0456acc2bf5648af6e4e2e3c4b705acdce.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtime~base-0c7033cd78a8992ccac0.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/base-48e2278ba06b1d301dc0.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtime~Search-118f3db5f3ee8b220217.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/0-7e2f02f299313d314059.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/1-c9928f43aa4a7dd3f2bb.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/Search-80c3300f928772c381b7.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtime~runtimeBanner-f5b6262cea3b8c558bbc.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtimeBanner-f90b3292df69da52ddf6.chunk.js" defer="defer"></script>
|
||
|
||
<link rel="canonical" href="https://blog.wrappixel.com/20-best-css-animation-resources/" />
|
||
<meta name="description" content="A text fading in and out or a link popping up when hovered. What do these two things have in common?... Tagged with css, animation, resource.">
|
||
<meta name="keywords" content="css, animation, resource, software, coding, development, engineering, inclusive, community">
|
||
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:url" content="https://dev.to/suniljoshi19/20-best-css-animation-resources-1fdf" />
|
||
<meta property="og:title" content="20 Best CSS Animation Resources" />
|
||
<meta property="og:description" content="A text fading in and out or a link popping up when hovered. What do these two things have in common?..." />
|
||
<meta property="og:site_name" content="DEV Community 👩💻👨💻" />
|
||
<meta name="twitter:site" content="@thepracticaldev">
|
||
<meta name="twitter:creator" content="@suniljoshi19">
|
||
<meta name="twitter:title" content="20 Best CSS Animation Resources">
|
||
<meta name="twitter:description" content="A text fading in and out or a link popping up when hovered. What do these two things have in common?...">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:widgets:new-embed-design" content="on">
|
||
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
|
||
<meta property="og:image" content="https://res.cloudinary.com/practicaldev/image/fetch/s--hndfbmFW--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puzz9jrva2cbtb6n6yk6.png" />
|
||
<meta name="twitter:image:src" content="https://res.cloudinary.com/practicaldev/image/fetch/s--hndfbmFW--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puzz9jrva2cbtb6n6yk6.png">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<link rel="icon" type="image/x-icon" href="https://res.cloudinary.com/practicaldev/image/fetch/s--E8ak4Hr1--/c_limit,f_auto,fl_progressive,q_auto,w_32/https://dev-to.s3.us-east-2.amazonaws.com/favicon.ico" />
|
||
<link rel="apple-touch-icon" href="https://res.cloudinary.com/practicaldev/image/fetch/s--gDM0_LTS--/c_limit,f_png,fl_progressive,q_80,w_180/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
|
||
<link rel="apple-touch-icon" sizes="152x152" href="https://res.cloudinary.com/practicaldev/image/fetch/s--l0c3Kmql--/c_limit,f_png,fl_progressive,q_80,w_152/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="https://res.cloudinary.com/practicaldev/image/fetch/s--gDM0_LTS--/c_limit,f_png,fl_progressive,q_80,w_180/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
|
||
<link rel="apple-touch-icon" sizes="167x167" href="https://res.cloudinary.com/practicaldev/image/fetch/s--2ecYCSjC--/c_limit,f_png,fl_progressive,q_80,w_167/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png">
|
||
<link href="https://res.cloudinary.com/practicaldev/image/fetch/s--t7tVouP9--/c_limit,f_png,fl_progressive,q_80,w_192/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" rel="icon" sizes="192x192" />
|
||
<link href="https://res.cloudinary.com/practicaldev/image/fetch/s--lrmEcD2H--/c_limit,f_png,fl_progressive,q_80,w_128/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" rel="icon" sizes="128x128" />
|
||
<meta name="apple-mobile-web-app-title" content="dev.to">
|
||
<meta name="application-name" content="dev.to">
|
||
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
|
||
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
|
||
<link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community 👩💻👨💻" />
|
||
|
||
<meta property="forem:name" content="DEV Community 👩💻👨💻" />
|
||
<meta property="forem:logo" content="https://res.cloudinary.com/practicaldev/image/fetch/s--PFPhV65b--/c_limit,f_png,fl_progressive,q_80,w_512/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" />
|
||
<meta property="forem:domain" content="dev.to" />
|
||
</head>
|
||
<body
|
||
class="sans-serif-article-body default-header"
|
||
data-user-status="logged-out"
|
||
data-community-name="DEV Community 👩💻👨💻"
|
||
data-locale="en"
|
||
data-honeybadger-key="a45862f6"
|
||
data-deployed-at="2022-10-27T19:10:08Z"
|
||
data-latest-commit-id="cae4c929ecd261b670cb214e3f0078aecb15c783"
|
||
data-ga-tracking="UA-71991109-1"
|
||
data-ga4-tracking-id="G-TYEM8Y3JN3"
|
||
>
|
||
<link rel="stylesheet" href="https://dev.to/assets/minimal-7ae6cb020de70f4fff67c69992dfe6a916a3d64eb08e851cfce81b8ca04c3fba.css" media="all" id="secondary-minimal-stylesheet" />
|
||
<link rel="stylesheet" href="https://dev.to/assets/views-feec97295bb38912533cd8abc8ea91e57ce12163699186d7e6ff4ec091164bc9.css" media="all" id="secondary-views-stylesheet" />
|
||
<link rel="stylesheet" href="https://dev.to/assets/crayons-ccf0980a0082dafe0b93173bc3ec5686c4a916e1170fc92455f78b35049329e4.css" media="all" id="secondary-crayons-stylesheet" />
|
||
|
||
<div id="body-styles">
|
||
<style>
|
||
:root {
|
||
--accent-brand-lighter-rgb: 80, 99, 301;
|
||
--accent-brand-rgb: 59, 73, 223;
|
||
--accent-brand-darker-rgb: 47, 58, 178;
|
||
}
|
||
</style>
|
||
</div>
|
||
<div id="audiocontent" data-podcast="">
|
||
|
||
</div>
|
||
<div class="navigation-progress" id="navigation-progress"></div>
|
||
<header class="crayons-header print-hidden">
|
||
<span id="route-change-target" tabindex="-1"></span>
|
||
<a href="#main-content" class="skip-content-link">Skip to content</a>
|
||
<div class="crayons-header__container">
|
||
<span class="inline-block m:hidden ">
|
||
<button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="akj4pj8q2vun4czeeuloztdb02aa6mh2" class="crayons-icon"><title id="akj4pj8q2vun4czeeuloztdb02aa6mh2">Navigation menu</title>
|
||
<path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path>
|
||
</svg>
|
||
|
||
</button>
|
||
</span>
|
||
<a href="/" class="site-logo" aria-label="DEV Community 👩💻👨💻 Home">
|
||
<img class="site-logo__img" src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" alt="DEV Community 👩💻👨💻">
|
||
</a>
|
||
|
||
|
||
<div class="crayons-header--search js-search-form" id="header-search">
|
||
<form accept-charset="UTF-8" method="get" action="/search" role="search">
|
||
<div class="crayons-fields crayons-fields--horizontal">
|
||
<div class="crayons-field flex-1 relative">
|
||
<input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Search..." autocomplete="off" />
|
||
<button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px left-auto mt-0 py-0">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ab0z5wgpo6hibd7q9y4aoigm490ogcjd" aria-hidden="true" class="crayons-icon"><title id="ab0z5wgpo6hibd7q9y4aoigm490ogcjd">Search</title>
|
||
<path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path>
|
||
</svg>
|
||
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="flex items-center h-100 ml-auto">
|
||
<a class="c-link c-link--icon-alone c-link--block m:hidden mx-1" id="search-link" aria-label="Search" href="/search">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aa3lti3pljmqahyv4bts69i1u3rkcld9" class="crayons-icon"><title id="aa3lti3pljmqahyv4bts69i1u3rkcld9">Search</title>
|
||
<path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
<div class="flex" id="authentication-top-nav-actions">
|
||
<span class="hidden m:block">
|
||
<a href="/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant>
|
||
Log in
|
||
</a>
|
||
</span>
|
||
|
||
<a href="/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant>
|
||
Create account
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="hamburger">
|
||
<div class="hamburger__content">
|
||
<header class="hamburger__content__header">
|
||
<h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community 👩💻👨💻</h2>
|
||
|
||
<button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ang0fqygy8a6ogcwqixs1tpdap6hq2nb" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="ang0fqygy8a6ogcwqixs1tpdap6hq2nb">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg>
|
||
|
||
</button>
|
||
</header>
|
||
|
||
<div class="p-2" id="authentication-hamburger-actions">
|
||
<div class="crayons-card crayons-card--secondary p-4">
|
||
<h2 class="crayons-subtitle-2 lh-tight mb-4">
|
||
<a href="/" class="c-link c-link--branded">DEV Community 👩💻👨💻</a> is a community of 939,030 amazing developers
|
||
|
||
</h2>
|
||
<p class="color-base-70 mb-4">
|
||
We're a place where coders share, stay up-to-date and grow their careers.
|
||
</p>
|
||
<div>
|
||
<a href="/enter?state=new-user" data-tracking-id="ca_hamburger_home_page" data-tracking-source="mobile_hamburger_nav" class="c-cta c-cta--branded justify-center w-100 mb-1" aria-label="Create new account">Create account</a>
|
||
<a href="/enter" class="c-link c-link--block justify-center" aria-label="Log in">Log in</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<nav class="mb-4 mt-4" data-testid="main-nav" aria-label="DEV Community 👩💻👨💻">
|
||
<ul class="default-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
|
||
<li>
|
||
<a href="/" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#A0041E" d="M13.344 18.702h-2a.5.5 0 01-.5-.5v-7a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v7a.5.5 0 01-.5.5z"/>
|
||
<path fill="#FFE8B6" d="M9 20L22 7l13 13v17H9z"/>
|
||
<path fill="#FFCC4D" d="M22 20h1v16h-1z"/>
|
||
<path fill="#66757F" d="M35 21a.997.997 0 01-.707-.293L22 8.414 9.707 20.707a1 1 0 11-1.414-1.414l13-13a.999.999 0 011.414 0l13 13A.999.999 0 0135 21z"/>
|
||
<path fill="#66757F" d="M22 21a.999.999 0 01-.707-1.707l6.5-6.5a1 1 0 111.414 1.414l-6.5 6.5A.997.997 0 0122 21z"/>
|
||
<path fill="#C1694F" d="M14 30h4v6h-4z"/>
|
||
<path fill="#55ACEE" d="M14 21h4v4h-4zm12.5 0h4v4h-4zm0 9h4v4h-4z"/>
|
||
<path fill="#5C913B" d="M37.5 37.5A1.5 1.5 0 0136 39H8a1.5 1.5 0 010-3h28a1.5 1.5 0 011.5 1.5z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Home
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li>
|
||
<a href="/listings" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#FFD983" d="M36 4H14a4 4 0 00-4 4v24H8a4 4 0 000 8h24a4 4 0 004-4V12a4 4 0 000-8z"/>
|
||
<path fill="#E39F3D" d="M12 14h24v-2H14l-2-1z"/>
|
||
<path fill="#FFE8B6" d="M14 4a4 4 0 00-4 4v24.555A3.955 3.955 0 008 32a4 4 0 104 4V11.445c.59.344 1.268.555 2 .555a4 4 0 000-8z"/>
|
||
<path fill="#C1694F" d="M16 8a2 2 0 11-4.001-.001A2 2 0 0116 8m-6 28a2 2 0 11-4.001-.001A2 2 0 0110 36m24-17a1 1 0 01-1 1H15a1 1 0 010-2h18a1 1 0 011 1m0 4a1 1 0 01-1 1H15a1 1 0 110-2h18a1 1 0 011 1m0 4a1 1 0 01-1 1H15a1 1 0 110-2h18a1 1 0 011 1m0 4a1 1 0 01-1 1H15a1 1 0 110-2h18a1 1 0 011 1"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Listings
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/pod" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#292F33" d="M10 19h24v2H10zm15 15c0 2.208-.792 4-3 4-2.209 0-3-1.792-3-4s.791-2 3-2c2.208 0 3-.208 3 2z"/>
|
||
<path fill="#66757F" d="M22 35c-6.627 0-10 1.343-10 3v2h20v-2c0-1.657-3.373-3-10-3z"/>
|
||
<path fill="#99AAB5" d="M22 4a9 9 0 00-9 9v7h18v-7a9 9 0 00-9-9z"/>
|
||
<g fill="#292F33" transform="translate(4 4)">
|
||
<circle cx="15.5" cy="2.5" r="1.5"/>
|
||
<circle cx="20.5" cy="2.5" r="1.5"/>
|
||
<circle cx="17.5" cy="6.5" r="1.5"/>
|
||
<circle cx="22.5" cy="6.5" r="1.5"/>
|
||
<circle cx="12.5" cy="6.5" r="1.5"/>
|
||
<circle cx="15.5" cy="10.5" r="1.5"/>
|
||
<circle cx="10.5" cy="10.5" r="1.5"/>
|
||
<circle cx="20.5" cy="10.5" r="1.5"/>
|
||
<circle cx="25.5" cy="10.5" r="1.5"/>
|
||
<circle cx="17.5" cy="14.5" r="1.5"/>
|
||
<circle cx="22.5" cy="14.5" r="1.5"/>
|
||
<circle cx="12.5" cy="14.5" r="1.5"/>
|
||
</g>
|
||
<path fill="#66757F" d="M13 19.062V21c0 4.971 4.029 9 9 9s9-4.029 9-9v-1.938H13z"/>
|
||
<path fill="#66757F" d="M34 18a1 1 0 00-1 1v2c0 6.074-4.925 11-11 11s-11-4.926-11-11v-2a1 1 0 00-2 0v2c0 7.18 5.82 13 13 13s13-5.82 13-13v-2a1 1 0 00-1-1z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Podcasts
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/videos" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g transform="translate(4 4)">
|
||
<path fill="#31373D" d="M34.074 18l-4.832 3H28v-4c0-.088-.02-.169-.026-.256C31.436 15.864 34 12.735 34 9a8 8 0 00-16.001 0c0 1.463.412 2.822 1.099 4H14.92c.047-.328.08-.66.08-1a7 7 0 10-14 0 6.995 6.995 0 004 6.317V29a4 4 0 004 4h15a4 4 0 004-4v-3h1.242l4.832 3H35V18h-.926zM28.727 3.977a5.713 5.713 0 012.984 4.961L28.18 8.35a2.276 2.276 0 00-.583-.982l1.13-3.391zm-.9 6.342l3.552.592a5.713 5.713 0 01-4.214 3.669 3.985 3.985 0 00-1.392-1.148l.625-2.19a2.425 2.425 0 001.429-.923zM26 3.285c.282 0 .557.027.828.067l-1.131 3.392c-.404.054-.772.21-1.081.446L21.42 5.592A5.703 5.703 0 0126 3.285zM20.285 9c0-.563.085-1.106.236-1.62l3.194 1.597-.002.023c0 .657.313 1.245.771 1.662L23.816 13h-1.871a5.665 5.665 0 01-1.66-4zm-9.088-.385A4.64 4.64 0 0112.667 12c0 .344-.043.677-.113 1H10.1c.145-.304.233-.641.233-1a2.32 2.32 0 00-.392-1.292l1.256-2.093zM8 7.333c.519 0 1.01.105 1.476.261L8.22 9.688c-.073-.007-.145-.022-.22-.022a2.32 2.32 0 00-1.292.392L4.615 8.803A4.64 4.64 0 018 7.333zM3.333 12c0-.519.105-1.01.261-1.477l2.095 1.257c-.007.073-.022.144-.022.22 0 .75.36 1.41.91 1.837a3.987 3.987 0 00-1.353 1.895C4.083 14.881 3.333 13.533 3.333 12z"/>
|
||
<circle fill="#8899A6" cx="24" cy="19" r="2"/>
|
||
<circle fill="#8899A6" cx="9" cy="19" r="2"/>
|
||
<path fill="#8899A6" d="M24 27a2 2 0 00-2-2H11a2 2 0 00-2 2v6a2 2 0 002 2h11a2 2 0 002-2v-6z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Videos
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/tags" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#FFD983" d="M36.017 24.181L21.345 9.746C20.687 9.087 19.823 9 18.96 9H8.883C7.029 9 6 10.029 6 11.883v10.082c0 .861.089 1.723.746 2.38L21.3 39.017a3.287 3.287 0 004.688 0l10.059-10.088c1.31-1.312 1.28-3.438-.03-4.748zm-23.596-8.76a1.497 1.497 0 11-2.118-2.117 1.497 1.497 0 012.118 2.117z"/>
|
||
<path fill="#D99E82" d="M13.952 11.772a3.66 3.66 0 00-5.179 0 3.663 3.663 0 105.18 5.18 3.664 3.664 0 00-.001-5.18zm-1.53 3.65a1.499 1.499 0 11-2.119-2.12 1.499 1.499 0 012.119 2.12z"/>
|
||
<path fill="#C1694F" d="M12.507 14.501a1 1 0 11-1.415-1.414l8.485-8.485a1 1 0 111.415 1.414l-8.485 8.485z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Tags
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/faq" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#FFD983" d="M33 15.06c0 6.439-5 7.439-5 13.44 0 3.098-3.123 3.359-5.5 3.359-2.053 0-6.586-.779-6.586-3.361C15.914 22.5 11 21.5 11 15.06c0-6.031 5.285-10.92 11.083-10.92C27.883 4.14 33 9.029 33 15.06z"/>
|
||
<path fill="#CCD6DD" d="M26.167 36.5c0 .828-2.234 2.5-4.167 2.5-1.933 0-4.167-1.672-4.167-2.5 0-.828 2.233-.5 4.167-.5 1.933 0 4.167-.328 4.167.5z"/>
|
||
<path fill="#FFCC4D" d="M26.707 14.293a.999.999 0 00-1.414 0L22 17.586l-3.293-3.293a1 1 0 10-1.414 1.414L21 19.414V30a1 1 0 102 0V19.414l3.707-3.707a.999.999 0 000-1.414z"/>
|
||
<path fill="#99AAB5" d="M28 35a2 2 0 01-2 2h-8a2 2 0 01-2-2v-6h12v6z"/>
|
||
<path fill="#CCD6DD" d="M15.999 36a1 1 0 01-.163-1.986l12-2a.994.994 0 011.15.822.999.999 0 01-.822 1.15l-12 2a.927.927 0 01-.165.014zm0-4a1 1 0 01-.163-1.986l12-2a.995.995 0 011.15.822.999.999 0 01-.822 1.15l-12 2a.927.927 0 01-.165.014z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
FAQ
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="https://shop.forem.com" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#F4900C" d="M15 4a8 8 0 00-8 8v8h2v-8a6 6 0 0112 0v8h2v-8a8 8 0 00-8-8z"/>
|
||
<path fill="#DD2E44" d="M5 12l2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2v23H5z"/>
|
||
<path fill="#FFCC4D" d="M29 9a8 8 0 00-8 8v8h2v-8a6 6 0 0112 0v8h2v-8a8 8 0 00-8-8z"/>
|
||
<path fill="#744EAA" d="M19 17l2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2v23H19z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Forem Shop
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/sponsorships" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<path fill="#DD2E44" d="M39.885 15.833c0-5.45-4.418-9.868-9.867-9.868-3.308 0-6.227 1.633-8.018 4.129-1.791-2.496-4.71-4.129-8.017-4.129-5.45 0-9.868 4.417-9.868 9.868 0 .772.098 1.52.266 2.241C5.751 26.587 15.216 35.568 22 38.034c6.783-2.466 16.249-11.447 17.617-19.959.17-.721.268-1.469.268-2.242z"/>
|
||
</svg>
|
||
|
||
</span>
|
||
Sponsors
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/about" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg viewBox="0 0 235 234" xmlns="http://www.w3.org/2000/svg" class="rainbow-logo" preserveAspectRatio="xMinYMin meet">
|
||
<g fill="none" fill-rule="evenodd">
|
||
<path fill="#88AEDC" d="M234.04 175.67l-75.69 58.28h47.18L234.04 212z"/>
|
||
<path d="M234.04 140.06l-121.93 93.89h.02l121.91-93.87zM133.25.95L.04 103.51v.02L133.27.95z"/>
|
||
<path fill="#F58F8E" fill-rule="nonzero" d="M.04.95v30.16L39.21.95z"/>
|
||
<path fill="#FEE18A" fill-rule="nonzero" d="M39.21.95L.04 31.11v35.9L85.84.95z"/>
|
||
<path fill="#F3F095" fill-rule="nonzero" d="M85.84.95L.04 67.01v36.5L133.25.95z"/>
|
||
<path fill="#55C1AE" fill-rule="nonzero" d="M133.27.95L.04 103.53v35.59L179.49.95z"/>
|
||
<path fill="#F7B3CE" fill-rule="nonzero" d="M234.04.95h-7.37L.04 175.45v35.93l234-180.18z"/>
|
||
<path fill="#88AEDC" fill-rule="nonzero" d="M179.49.95L.04 139.12v36.33L226.67.95z"/>
|
||
<path fill="#F58F8E" fill-rule="nonzero" d="M234.04 31.2L.04 211.38v22.57h18.03l215.97-166.3z"/>
|
||
<path fill="#FEE18A" fill-rule="nonzero" d="M234.04 67.65L18.07 233.95H64.7l169.34-130.39z"/>
|
||
<path fill="#F3F095" fill-rule="nonzero" d="M234.04 103.56L64.7 233.95h47.41l121.93-93.89z"/>
|
||
<path fill="#55C1AE" fill-rule="nonzero" d="M234.04 140.08l-121.91 93.87h46.22l75.69-58.28z"/>
|
||
<path fill="#F7B3CE" fill-rule="nonzero" d="M234.04 212l-28.51 21.95h28.51z"/>
|
||
<path d="M65.237 77.75c4.514.95 7.774 2.8 11.135 6.3 3.059 3.2 4.965 6.85 5.767 10.95.652 3.45.652 40.55 0 44.05-1.705 9.1-9.479 16.2-19.109 17.45-2.006.25-8.727.5-14.845.5H37V77h12.438c8.828 0 13.342.2 15.8.75zM51.545 117v25.6l5.166-.2c4.464-.15 5.417-.35 7.423-1.5 3.912-2.3 3.962-2.45 3.962-24.2 0-21.2 0-21.2-3.661-23.6-1.806-1.2-2.558-1.35-7.473-1.55l-5.417-.15V117zm79.245-32.75v7.25h-25.58v18h15.549V124H105.21l.1 9.1.15 9.15 12.69.15 12.638.1V157h-14.795c-16.451 0-19.009-.3-21.617-2.6-3.661-3.2-3.46-1.15-3.611-36.3-.1-21.9.05-32.25.401-33.65.702-2.6 3.661-5.8 6.27-6.7 1.554-.55 5.466-.7 17.704-.75h15.648v7.25zm31.647 20.85c3.712 14.25 6.821 25.6 6.922 25.25.15-.35 3.31-12.4 7.071-26.85l6.872-26.25 7.824-.15c5.918-.1 7.874.05 7.874.5s-17.354 66.2-18.357 69.5c-.702 2.3-4.463 7-6.57 8.25-2.658 1.5-6.57 1.75-8.978.5-2.156-1.1-5.015-4.4-6.47-7.5-.902-1.9-15.648-56-19.058-70l-.352-1.35h7.825c7.673 0 7.874 0 8.275 1.1.2.65 3.41 12.8 7.122 27z" fill="#FFF"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
About
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/contact" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#FFAC33" d="M38.724 33.656c-1.239-.01-1.241 1.205-1.241 1.205H22.5c-5.246 0-9.5-4.254-9.5-9.5s4.254-9.5 9.5-9.5 9.5 4.254 9.5 9.5c0 3.062-1.6 5.897-3.852 7.633h5.434C35.022 30.849 36 28.139 36 25.361c0-7.456-6.045-13.5-13.5-13.5-7.456 0-13.5 6.044-13.5 13.5 0 7.455 6.044 13.5 13.5 13.5h14.982s-.003 1.127 1.241 1.139c1.238.012 1.228-1.245 1.228-1.245l.014-3.821s.001-1.267-1.241-1.278zM9 18.26a16.047 16.047 0 014-4.739V13c0-5 5-7 5-8s-1-1-1-1H5C4 4 4 5 4 5c0 1 5 3.333 5 7.69v5.57z"/>
|
||
<path fill="#BE1931" d="M17.091 33.166a9.487 9.487 0 01-4.045-8.72l-3.977-.461c-.046.452-.069.911-.069 1.376 0 4.573 2.28 8.608 5.76 11.051l2.331-3.246z"/>
|
||
<path fill="#BE1931" d="M10 29.924s-5.188-.812-5 1 5-1 5-1zm0 .312s-4.125 2.688-2.938 3.75S10 30.236 10 30.236z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Contact
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/guides" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 47.5 47.5" style="enable-background:new 0 0 47.5 47.5;" id="svg2" xml:space="preserve"><defs id="defs6"><clipPath id="clipPath18"><path d="M 0,38 38,38 38,0 0,0 0,38 z" id="path20"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)" id="g12"><g id="g14"><g clip-path="url(#clipPath18)" id="g16"><g transform="translate(33,30)" id="g22"><path d="m 0,0 -28,0 c -2.209,0 -4,-1.791 -4,-4 l 0,-15 c 0,-2.209 1.791,-4 4,-4 l 11.416,0 c 0.52,-0.596 1.477,-1 2.584,-1 1.107,0 2.064,0.404 2.584,1 L 0,-23 c 2.209,0 4,1.791 4,4 L 4,-4 C 4,-1.791 2.209,0 0,0" id="path24" style="fill:#226699;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(21,10)" id="g26"><path d="m 0,0 c 0,-1.104 -0.896,-2 -2,-2 -1.104,0 -2,0.896 -2,2 l 0,18 c 0,1.104 0.896,2 2,2 1.104,0 2,-0.896 2,-2 L 0,0 z" id="path28" style="fill:#292f33;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(19,11)" id="g30"><path d="m 0,0 c 0,-1.104 -0.896,-2 -2,-2 l -12,0 c -1.104,0 -2,0.896 -2,2 l 0,18 c 0,1.104 0.896,2 2,2 l 12,0 c 1.104,0 2,-0.896 2,-2 L 0,0 z" id="path32" style="fill:#99aab5;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(19,11)" id="g34"><path d="m 0,0 c -0.999,1.998 -3.657,2 -4,2 -2,0 -5,-2 -8,-2 -1,0 -2,0.896 -2,2 l 0,16 c 0,1.104 1,2 2,2 3.255,0 6,2 8,2 3,0 4,-1.896 4,-3 L 0,0 z" id="path36" style="fill:#e1e8ed;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(35,11)" id="g38"><path d="m 0,0 c 0,-1.104 -0.896,-2 -2,-2 l -12,0 c -1.104,0 -2,0.896 -2,2 l 0,18 c 0,1.104 0.896,2 2,2 l 12,0 c 1.104,0 2,-0.896 2,-2 L 0,0 z" id="path40" style="fill:#99aab5;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g><g transform="translate(19,11)" id="g42"><path d="m 0,0 c 0.999,1.998 3.657,2 4,2 2,0 5,-2 8,-2 1,0 2,0.896 2,2 l 0,16 c 0,1.104 -1,2 -2,2 C 8.744,20 6,22 4,22 1,22 0,20.104 0,19 L 0,0 z" id="path44" style="fill:#ccd6dd;fill-opacity:1;fill-rule:nonzero;stroke:none"/></g></g></g></g></svg>
|
||
|
||
</span>
|
||
Guides
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/software-comparisons" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve" version="1.1" id="svg2"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath16" clipPathUnits="userSpaceOnUse"><path id="path18" d="M 0,36 36,36 36,0 0,0 0,36 Z"/></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,45)" id="g10"><g id="g12"><g clip-path="url(#clipPath16)" id="g14"><g transform="translate(2,20)" id="g20"><path id="path22" style="fill:#ffcc4d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-8.837 7.164,-16 16,-16 8.837,0 16,7.163 16,16 C 32,8.836 24.837,16 16,16 7.164,16 0,8.836 0,0"/></g><g transform="translate(15.4063,25.5)" id="g24"><path id="path26" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-1.381 -0.896,-2.5 -2,-2.5 -1.104,0 -2,1.119 -2,2.5 0,1.38 0.896,2.5 2,2.5 1.104,0 2,-1.12 2,-2.5"/></g><g transform="translate(26,24.5)" id="g28"><path id="path30" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,-1.381 -0.895,-2.5 -2,-2.5 -1.104,0 -2,1.119 -2,2.5 0,1.38 0.896,2.5 2,2.5 1.105,0 2,-1.12 2,-2.5"/></g><g transform="translate(9.6709,29.667)" id="g32"><path id="path34" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.164,0.087 -0.303,0.223 -0.391,0.398 -0.607,0.827 -0.431,1.325 0.002,1.511 4.268,3.341 7.701,1.554 7.845,1.477 8.278,1.246 8.453,0.729 8.236,0.323 8.02,-0.082 7.496,-0.223 7.063,0.005 6.94,0.069 4.231,1.437 0.785,-0.042 0.528,-0.151 0.238,-0.127 0,0"/></g><g transform="translate(14.7427,16.4277)" id="g36"><path id="path38" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.136,0.127 -0.236,0.293 -0.276,0.486 -0.375,0.955 -0.078,1.392 0.389,1.46 4.981,2.138 7.841,-0.469 7.962,-0.58 8.322,-0.914 8.357,-1.457 8.044,-1.795 7.732,-2.131 7.189,-2.133 6.83,-1.801 6.726,-1.709 4.458,0.307 0.748,-0.24 0.471,-0.281 0.197,-0.184 0,0"/></g><g transform="translate(20.4307,25.917)" id="g40"><path id="path42" style="fill:#664500;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 C -0.156,0.098 -0.286,0.243 -0.362,0.424 -0.549,0.866 -0.339,1.352 0.105,1.508 4.486,3.044 7.79,1.028 7.929,0.941 8.344,0.681 8.483,0.154 8.24,-0.237 7.998,-0.627 7.464,-0.732 7.049,-0.475 6.929,-0.402 4.321,1.146 0.782,-0.095 0.518,-0.187 0.23,-0.143 0,0"/></g><g transform="translate(17.2764,0.8682)" id="g44"><path id="path46" style="fill:#f4900c;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 c 0,0 1.265,0.411 1.429,1.352 0.173,0.971 -0.624,1.167 -0.624,1.167 0,0 1.041,0.208 1.172,1.376 0.123,1.1 -0.862,1.363 -0.862,1.363 0,0 0.97,0.4 1.016,1.539 0.038,0.959 -0.995,1.428 -0.995,1.428 0,0 5.038,1.22 5.555,1.34 0.516,0.121 1.321,0.616 1.07,1.695 -0.249,1.08 -1.204,1.118 -1.698,1.003 -0.494,-0.116 -6.744,-1.567 -8.9,-2.069 -0.23,-0.053 -1.308,-0.302 -1.439,-0.334 -0.54,-0.127 -0.785,0.111 -0.405,0.512 0.509,0.536 0.833,1.129 0.947,2.113 0.119,1.036 -0.232,2.314 -0.433,2.809 -0.374,0.921 -1.005,1.649 -1.734,1.899 -1.138,0.39 -1.946,-0.321 -1.542,-1.561 0.604,-1.855 0.209,-3.375 -0.833,-4.293 -2.449,-2.157 -3.589,-3.695 -2.83,-6.973 0.827,-3.575 4.377,-5.876 7.952,-5.048 C -2.965,-0.64 0,0 0,0"/></g></g></g></g></svg>
|
||
|
||
</span>
|
||
Software comparisons
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
<nav class="mb-4" data-testid="other-nav" aria-labelledby="other-nav-heading-hamburger">
|
||
<h2 id="other-nav-heading-hamburger" class="crayons-subtitle-3 py-2 pl-3">
|
||
Other
|
||
</h2>
|
||
<ul class="other-navigation-links sidebar-navigation-links spec-sidebar-navigation-links">
|
||
<li>
|
||
<a href="/code-of-conduct" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g class="nc-icon-wrapper">
|
||
<path fill="#FFDB5E" d="M38.956 21.916c0-.503-.12-.975-.321-1.404-1.341-4.326-7.619-4.01-16.549-4.221-1.493-.035-.639-1.798-.115-5.668.341-2.517-1.282-6.382-4.01-6.382-4.498 0-.171 3.548-4.148 12.322-2.125 4.688-6.875 2.062-6.875 6.771v10.719c0 1.833.18 3.595 2.758 3.885 2.499.281 1.937 2.062 5.542 2.062h18.044a3.337 3.337 0 003.333-3.334c0-.762-.267-1.456-.698-2.018 1.02-.571 1.72-1.649 1.72-2.899 0-.76-.266-1.454-.696-2.015 1.023-.57 1.725-1.649 1.725-2.901 0-.909-.368-1.733-.961-2.336a3.311 3.311 0 001.251-2.581z"/>
|
||
<path fill="#EE9547" d="M27.02 25.249h8.604c1.17 0 2.268-.626 2.866-1.633a.876.876 0 00-1.506-.892 1.588 1.588 0 01-1.361.775h-8.81c-.873 0-1.583-.71-1.583-1.583s.71-1.583 1.583-1.583H32.7a.875.875 0 000-1.75h-5.888a3.337 3.337 0 00-3.333 3.333c0 1.025.475 1.932 1.205 2.544a3.32 3.32 0 00-.998 2.373c0 1.028.478 1.938 1.212 2.549a3.318 3.318 0 00.419 5.08 3.305 3.305 0 00-.852 2.204 3.337 3.337 0 003.333 3.333h5.484a3.35 3.35 0 002.867-1.632.875.875 0 00-1.504-.894 1.594 1.594 0 01-1.363.776h-5.484c-.873 0-1.583-.71-1.583-1.583s.71-1.583 1.583-1.583h6.506a3.35 3.35 0 002.867-1.633.875.875 0 10-1.504-.894 1.572 1.572 0 01-1.363.777h-7.063a1.585 1.585 0 010-3.167h8.091a3.35 3.35 0 002.867-1.632.875.875 0 00-1.504-.894 1.573 1.573 0 01-1.363.776H27.02a1.585 1.585 0 010-3.167z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Code of Conduct
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/privacy" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g transform="translate(4 4)">
|
||
<circle fill="#FFCC4D" cx="18" cy="18" r="18"/>
|
||
<path fill="#664500" d="M27.335 23.629a.501.501 0 00-.635-.029c-.039.029-3.922 2.9-8.7 2.9-4.766 0-8.662-2.871-8.7-2.9a.5.5 0 10-.729.657C8.7 24.472 11.788 29.5 18 29.5s9.301-5.028 9.429-5.243a.499.499 0 00-.094-.628z"/>
|
||
<path fill="#65471B" d="M18 26.591c-.148 0-.291-.011-.438-.016v4.516h.875v-4.517c-.145.005-.289.017-.437.017z"/>
|
||
<path fill="#FFF" d="M22 26c.016-.004-1.45.378-2.446.486-.366.042-.737.076-1.117.089v4.517H20c1.1 0 2-.9 2-2V26zm-8 0c-.016-.004 1.45.378 2.446.486.366.042.737.076 1.117.089v4.517H16c-1.1 0-2-.9-2-2V26z"/>
|
||
<path fill="#65471B" d="M27.335 23.629a.501.501 0 00-.635-.029c-.03.022-2.259 1.668-5.411 2.47-.443.113-1.864.43-3.286.431-1.424 0-2.849-.318-3.292-.431-3.152-.802-5.381-2.448-5.411-2.47a.501.501 0 00-.729.657c.097.162 1.885 3.067 5.429 4.481v-1.829c-.016-.004 1.45.378 2.446.486.366.042.737.076 1.117.089.146.005.289.016.437.016.148 0 .291-.011.438-.016.38-.013.751-.046 1.117-.089.996-.108 2.462-.49 2.446-.486v1.829c3.544-1.414 5.332-4.319 5.429-4.481a.5.5 0 00-.095-.628zm-.711-9.605c0 1.714-.938 3.104-2.096 3.104-1.157 0-2.096-1.39-2.096-3.104s.938-3.104 2.096-3.104c1.158 0 2.096 1.39 2.096 3.104zm-17.167 0c0 1.714.938 3.104 2.096 3.104 1.157 0 2.096-1.39 2.096-3.104s-.938-3.104-2.096-3.104c-1.158 0-2.096 1.39-2.096 3.104z"/>
|
||
<path fill="#292F33" d="M34.808 9.627c-.171-.166-1.267.274-2.376-.291-2.288-1.166-8.07-2.291-11.834.376-.403.285-2.087.333-2.558.313-.471.021-2.155-.027-2.558-.313-3.763-2.667-9.545-1.542-11.833-.376-1.109.565-2.205.125-2.376.291-.247.239-.247 1.196.001 1.436.246.239 1.477.515 1.722 1.232.247.718.249 4.958 2.213 6.424 1.839 1.372 6.129 1.785 8.848.238 2.372-1.349 2.289-4.189 2.724-5.881.155-.603.592-.907 1.26-.907s1.105.304 1.26.907c.435 1.691.351 4.532 2.724 5.881 2.719 1.546 7.009 1.133 8.847-.238 1.965-1.465 1.967-5.706 2.213-6.424.245-.717 1.476-.994 1.722-1.232.248-.24.249-1.197.001-1.436zm-20.194 3.65c-.077 1.105-.274 3.227-1.597 3.98-.811.462-1.868.743-2.974.743h-.001c-1.225 0-2.923-.347-3.587-.842-.83-.619-1.146-3.167-1.265-4.12-.076-.607-.28-2.09.388-2.318 1.06-.361 2.539-.643 4.052-.643.693 0 3.021.043 4.155.741 1.005.617.872 1.851.829 2.459zm16.278-.253c-.119.954-.435 3.515-1.265 4.134-.664.495-2.362.842-3.587.842h-.001c-1.107 0-2.163-.281-2.975-.743-1.323-.752-1.52-2.861-1.597-3.966-.042-.608-.176-1.851.829-2.468 1.135-.698 3.462-.746 4.155-.746 1.513 0 2.991.277 4.052.638.668.228.465 1.702.389 2.309z"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Privacy Policy
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/terms" class="sidebar-navigation-link c-link c-link--block c-link--icon-left">
|
||
<span class="c-link__icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="24" height="24">
|
||
<g transform="translate(4 4)">
|
||
<ellipse fill="#F5F8FA" cx="8.828" cy="18" rx="7.953" ry="13.281"/>
|
||
<path fill="#E1E8ED" d="M8.828 32.031C3.948 32.031.125 25.868.125 18S3.948 3.969 8.828 3.969 17.531 10.132 17.531 18s-3.823 14.031-8.703 14.031zm0-26.562C4.856 5.469 1.625 11.09 1.625 18s3.231 12.531 7.203 12.531S16.031 24.91 16.031 18 12.8 5.469 8.828 5.469z"/>
|
||
<circle fill="#8899A6" cx="6.594" cy="18" r="4.96"/>
|
||
<circle fill="#292F33" cx="6.594" cy="18" r="3.565"/>
|
||
<circle fill="#F5F8FA" cx="7.911" cy="15.443" r="1.426"/>
|
||
<ellipse fill="#F5F8FA" cx="27.234" cy="18" rx="7.953" ry="13.281"/>
|
||
<path fill="#E1E8ED" d="M27.234 32.031c-4.88 0-8.703-6.163-8.703-14.031s3.823-14.031 8.703-14.031S35.938 10.132 35.938 18s-3.824 14.031-8.704 14.031zm0-26.562c-3.972 0-7.203 5.622-7.203 12.531 0 6.91 3.231 12.531 7.203 12.531S34.438 24.91 34.438 18 31.206 5.469 27.234 5.469z"/>
|
||
<circle fill="#8899A6" cx="25" cy="18" r="4.96"/>
|
||
<circle fill="#292F33" cx="25" cy="18" r="3.565"/>
|
||
<circle fill="#F5F8FA" cx="26.317" cy="15.443" r="1.426"/>
|
||
</g>
|
||
</svg>
|
||
|
||
</span>
|
||
Terms of use
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="flex justify-start mb-4">
|
||
<a
|
||
href="https://twitter.com/thepracticaldev"
|
||
target="_blank"
|
||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||
rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ammxceiln93z70uc6ix2hcj2fs0bfaa7" class="crayons-icon c-link__icon"><title id="ammxceiln93z70uc6ix2hcj2fs0bfaa7">Twitter</title>
|
||
<path d="M22.162 5.656a8.383 8.383 0 01-2.402.658A4.196 4.196 0 0021.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 00-7.126 3.814 11.874 11.874 0 01-8.62-4.37 4.168 4.168 0 00-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 01-1.894-.523v.052a4.185 4.185 0 003.355 4.101 4.211 4.211 0 01-1.89.072A4.185 4.185 0 007.97 16.65a8.395 8.395 0 01-6.191 1.732 11.83 11.83 0 006.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.495 8.495 0 002.087-2.165l-.001-.001z" fill="#65bbf2"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
<a
|
||
href="https://facebook.com/thepracticaldev"
|
||
target="_blank"
|
||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||
rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahve3ze37qldiffmpj4p00tgmr5cv3m2" class="crayons-icon c-link__icon"><title id="ahve3ze37qldiffmpj4p00tgmr5cv3m2">Facebook</title>
|
||
<path d="M15.402 21v-6.966h2.333l.349-2.708h-2.682V9.598c0-.784.218-1.319 1.342-1.319h1.434V5.857a19.188 19.188 0 00-2.09-.107c-2.067 0-3.482 1.262-3.482 3.58v1.996h-2.338v2.708h2.338V21H4a1 1 0 01-1-1V4a1 1 0 011-1h16a1 1 0 011 1v16a1 1 0 01-1 1h-4.598z"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
<a
|
||
href="https://github.com/forem"
|
||
target="_blank"
|
||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||
rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="adp0xe29425o2rrs9lyonuz1buzcerb3" class="crayons-icon c-link__icon"><title id="adp0xe29425o2rrs9lyonuz1buzcerb3">Github</title>
|
||
<path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0022 12c0-5.525-4.475-10-10-10z"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
<a
|
||
href="https://instagram.com/thepracticaldev"
|
||
target="_blank"
|
||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||
rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="anlz6hkkfu7k6z1816ioymuthj6h1ll2" class="crayons-icon c-link__icon"><title id="anlz6hkkfu7k6z1816ioymuthj6h1ll2">Instagram</title>
|
||
<path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153.509.5.902 1.105 1.153 1.772.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 01-1.153 1.772c-.5.508-1.105.902-1.772 1.153-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 01-1.772-1.153 4.904 4.904 0 01-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 011.153-1.772A4.897 4.897 0 015.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5 5 0 100 10 5 5 0 000-10zm6.5-.25a1.25 1.25 0 10-2.5 0 1.25 1.25 0 002.5 0zM12 9a3 3 0 110 6 3 3 0 010-6z"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
<a
|
||
href="https://twitch.com/thepracticaldev"
|
||
target="_blank"
|
||
class="c-link c-link--icon-alone c-link--block mx-1"
|
||
rel="noopener">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ak9nlqph89lkyz8s5afl8pnq8gc3ol3s" class="crayons-icon c-link__icon"><title id="ak9nlqph89lkyz8s5afl8pnq8gc3ol3s">Twitch</title>
|
||
<path d="M4.3 3H21v11.7l-4.7 4.7h-3.9l-2.5 2.4H7v-2.4H3V6.2L4.3 3zM5 17.4h4v2.4h.095l2.5-2.4h3.877L19 13.872V5H5v12.4zM15 8h2v4.7h-2V8zm0 0h2v4.7h-2V8zm-5 0h2v4.7h-2V8z"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="hamburger__overlay js-hamburger-trigger"></div>
|
||
</div>
|
||
|
||
|
||
<div id="active-broadcast" class="broadcast-wrapper"></div>
|
||
<div id="message-notice"></div>
|
||
<div id="base-payment-pointer" data-payment-pointer="$ilp.uphold.com/24HhrUGG7ekn"></div>
|
||
<div id="page-content" class="wrapper stories stories-show" data-current-page="stories-show">
|
||
<div id="page-content-inner">
|
||
<div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div>
|
||
|
||
|
||
|
||
<style>
|
||
.html-variant-wrapper { display: none}
|
||
</style>
|
||
|
||
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js"
|
||
integrity="sha384-3HK5hxQbkFqOIxMbpROlRmRtYl2LBZ52t+tqcjzsmr9NJuOWQxl8RgQSyFvq2lhy"
|
||
crossorigin="anonymous" defer></script>
|
||
|
||
<script src="https://dev.to/packs/js/runtime~webShare-d3caf9661361b7cf171c.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/webShare-2b83d7b0b56b9902800a.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtime~articlePage-157b455583f49ee2bcbf.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/0-7e2f02f299313d314059.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/1-c9928f43aa4a7dd3f2bb.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/articlePage-f5a7eabb601b8a673728.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/runtime~commentDropdowns-b59d8bd1d49ff3155eb4.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/commentDropdowns-6bc15fcce9899b915277.chunk.js" defer="defer"></script>
|
||
|
||
<script type="application/ld+json">
|
||
{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://dev.to/suniljoshi19/20-best-css-animation-resources-1fdf"},"url":"https://dev.to/suniljoshi19/20-best-css-animation-resources-1fdf","image":["https://res.cloudinary.com/practicaldev/image/fetch/s--TU0tqM7a--/c_imagga_scale,f_auto,fl_progressive,h_1080,q_auto,w_1080/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puzz9jrva2cbtb6n6yk6.png","https://res.cloudinary.com/practicaldev/image/fetch/s--38_3Uazc--/c_imagga_scale,f_auto,fl_progressive,h_720,q_auto,w_1280/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puzz9jrva2cbtb6n6yk6.png","https://res.cloudinary.com/practicaldev/image/fetch/s--fgcie3C0--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puzz9jrva2cbtb6n6yk6.png"],"publisher":{"@context":"http://schema.org","@type":"Organization","name":"DEV Community 👩💻👨💻","logo":{"@context":"http://schema.org","@type":"ImageObject","url":"https://res.cloudinary.com/practicaldev/image/fetch/s--t7tVouP9--/c_limit,f_png,fl_progressive,q_80,w_192/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png","width":"192","height":"192"}},"headline":"20 Best CSS Animation Resources","author":{"@context":"http://schema.org","@type":"Person","url":"https://dev.to/suniljoshi19","name":"Sunil Joshi"},"datePublished":"2021-05-31T14:19:52Z","dateModified":"2022-07-06T05:16:39Z"}
|
||
</script>
|
||
|
||
|
||
<div class="crayons-layout crayons-layout--3-cols crayons-layout--article">
|
||
<aside class="crayons-layout__sidebar-left" aria-label="Article actions">
|
||
<div class="crayons-article-actions print-hidden">
|
||
<div class="crayons-article-actions__inner">
|
||
|
||
<button
|
||
id="reaction-butt-like"
|
||
aria-label="Like"
|
||
aria-pressed="false"
|
||
class="crayons-reaction crayons-reaction--like crayons-tooltip__activator relative"
|
||
data-category="like">
|
||
<span class="crayons-reaction__icon crayons-reaction__icon--inactive">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon">
|
||
<path d="M21.179 12.794l.013.014L12 22l-9.192-9.192.013-.014A6.5 6.5 0 0112 3.64a6.5 6.5 0 019.179 9.154zM4.575 5.383a4.5 4.5 0 000 6.364L12 19.172l7.425-7.425a4.5 4.5 0 10-6.364-6.364L8.818 9.626 7.404 8.21l3.162-3.162a4.5 4.5 0 00-5.99.334l-.001.001z"></path>
|
||
</svg>
|
||
|
||
</span>
|
||
<span class="crayons-reaction__count" id="reaction-number-like"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>
|
||
|
||
<span data-testid="tooltip" class="crayons-tooltip__content">
|
||
Like
|
||
</span>
|
||
</button>
|
||
|
||
|
||
<button
|
||
id="reaction-butt-comment"
|
||
aria-label="Jump to Comments"
|
||
aria-pressed="false"
|
||
class="crayons-reaction crayons-reaction--comment crayons-tooltip__activator relative"
|
||
data-category="comment">
|
||
<span class="crayons-reaction__icon crayons-reaction__icon--inactive">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon">
|
||
<path d="M10 3h4a8 8 0 010 16v3.5c-5-2-12-5-12-11.5a8 8 0 018-8zm2 14h2a6 6 0 000-12h-4a6 6 0 00-6 6c0 3.61 2.462 5.966 8 8.48V17z"></path>
|
||
</svg>
|
||
|
||
</span>
|
||
<span class="crayons-reaction__count" id="reaction-number-comment">1</span>
|
||
|
||
<span data-testid="tooltip" class="crayons-tooltip__content">
|
||
Jump to Comments
|
||
</span>
|
||
</button>
|
||
|
||
<button
|
||
id="reaction-butt-readinglist"
|
||
aria-label="Add to reading list"
|
||
aria-pressed="false"
|
||
class="crayons-reaction crayons-reaction--readinglist crayons-tooltip__activator relative"
|
||
data-category="readinglist">
|
||
<span class="crayons-reaction__icon crayons-reaction__icon--inactive">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon">
|
||
<path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path>
|
||
</svg>
|
||
|
||
</span>
|
||
<span class="crayons-reaction__count" id="reaction-number-readinglist"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>
|
||
|
||
<span data-testid="tooltip" class="crayons-tooltip__content">
|
||
Save
|
||
</span>
|
||
</button>
|
||
|
||
<div id="mod-actions-menu-btn-area" class="print-hidden hidden align-center"></div>
|
||
<div class="align-center m:relative">
|
||
<button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Share post options">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aj83zsnievk1aypv6wv2v0twi1yyp717" aria-hidden="true" class="crayons-icon dropdown-icon"><title id="aj83zsnievk1aypv6wv2v0twi1yyp717">More...</title><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12a2 2 0 11-4 0 2 2 0 014 0zm7 0a2 2 0 11-4 0 2 2 0 014 0zm5 2a2 2 0 100-4 2 2 0 000 4z"></path></svg>
|
||
|
||
</button>
|
||
|
||
<div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto mb-1 m:mb-0 top-unset bottom-100 m:top-0 m:bottom-unset">
|
||
<div>
|
||
<button
|
||
id="copy-post-url-button"
|
||
class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0"
|
||
data-postUrl="https://dev.to/suniljoshi19/20-best-css-animation-resources-1fdf">
|
||
<span class="fw-bold">Copy link</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="article-copy-icon" role="img" aria-labelledby="aqsg38tmw4sbzs0l0iio819d1qjd59j4" aria-hidden="true" class="crayons-icon mx-2 shrink-0"><title id="aqsg38tmw4sbzs0l0iio819d1qjd59j4">Copy link</title>
|
||
<path d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"></path>
|
||
</svg>
|
||
|
||
</button>
|
||
<div id="article-copy-link-announcer" aria-live="polite" class="crayons-notice crayons-notice--success my-2 p-1" aria-live="polite" hidden>Copied to Clipboard</div>
|
||
</div>
|
||
|
||
<div class="Desktop-only">
|
||
<a
|
||
target="_blank"
|
||
class="crayons-link crayons-link--block"
|
||
rel="noopener"
|
||
href='https://twitter.com/intent/tweet?text=%2220%20Best%20CSS%20Animation%20Resources%22%20by%20%40suniljoshi19%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fsuniljoshi19%2F20-best-css-animation-resources-1fdf'>
|
||
Share to Twitter
|
||
</a>
|
||
<a
|
||
target="_blank"
|
||
class="crayons-link crayons-link--block"
|
||
rel="noopener"
|
||
href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Fsuniljoshi19%2F20-best-css-animation-resources-1fdf&title=20%20Best%20CSS%20Animation%20Resources&summary=A%20text%20fading%20in%20and%20out%20or%20a%20link%20popping%20up%20when%20hovered.%20What%20do%20these%20two%20things%20have%20in%20common%3F...&source=DEV%20Community%20%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB">
|
||
Share to LinkedIn
|
||
</a>
|
||
<a
|
||
target="_blank"
|
||
class="crayons-link crayons-link--block"
|
||
rel="noopener"
|
||
href="https://www.reddit.com/submit?url=https%3A%2F%2Fdev.to%2Fsuniljoshi19%2F20-best-css-animation-resources-1fdf&title=20%20Best%20CSS%20Animation%20Resources">
|
||
Share to Reddit
|
||
</a>
|
||
<a
|
||
target="_blank"
|
||
class="crayons-link crayons-link--block"
|
||
rel="noopener"
|
||
href="https://news.ycombinator.com/submitlink?u=https%3A%2F%2Fdev.to%2Fsuniljoshi19%2F20-best-css-animation-resources-1fdf&t=20%20Best%20CSS%20Animation%20Resources">
|
||
Share to Hacker News
|
||
</a>
|
||
<a
|
||
target="_blank"
|
||
class="crayons-link crayons-link--block"
|
||
rel="noopener"
|
||
href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Fsuniljoshi19%2F20-best-css-animation-resources-1fdf">
|
||
Share to Facebook
|
||
</a>
|
||
</div>
|
||
|
||
<web-share-wrapper shareurl="https://dev.to/suniljoshi19/20-best-css-animation-resources-1fdf" sharetitle="20 Best CSS Animation Resources" sharetext="A text fading in and out or a link popping up when hovered. What do these two things have in common?..." template="web-share-button">
|
||
</web-share-wrapper>
|
||
<template id="web-share-button">
|
||
<a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post via...</a>
|
||
</template>
|
||
|
||
<a href="/report-abuse" class="crayons-link crayons-link--block">Report Abuse</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</aside>
|
||
|
||
<main id="main-content" class="crayons-layout__content grid gap-4">
|
||
<div class="article-wrapper">
|
||
|
||
|
||
<article class="crayons-card crayons-article mb-4"
|
||
id="article-show-container"
|
||
data-article-id="714003"
|
||
data-article-slug="20-best-css-animation-resources-1fdf"
|
||
data-author-id="402414"
|
||
data-author-name="Sunil Joshi"
|
||
data-author-username="suniljoshi19"
|
||
data-co-author-ids=""
|
||
data-path="/suniljoshi19/20-best-css-animation-resources-1fdf"
|
||
data-pin-path="/stories/feed/pinned_article"
|
||
data-pinned-article-id=""
|
||
data-published="true"
|
||
data-scheduled="false"
|
||
>
|
||
<header class="crayons-article__header" id="main-title">
|
||
<div class="crayons-article__cover">
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OS05eJuC--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puzz9jrva2cbtb6n6yk6.png" width="1000" height="420" style="background-color:#dddddd;" class="crayons-article__cover__image" alt="Cover image for 20 Best CSS Animation Resources">
|
||
</div>
|
||
|
||
<div class="crayons-article__header__meta">
|
||
<div class="flex s:items-start flex-col s:flex-row">
|
||
<div id="action-space" class="crayons-article__actions mb-4 s:mb-0 s:order-last"></div>
|
||
<div class="flex flex-1 mb-5 items-start">
|
||
<div class="relative">
|
||
<a href="/suniljoshi19"><img class="radius-full align-middle" src="https://res.cloudinary.com/practicaldev/image/fetch/s--5m3Ce7e0--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/402414/6b8863a6-9c25-4b6a-9bfd-be94ab69ec6c.jpg" width="40" height="40" alt="Sunil Joshi" /></a>
|
||
</div>
|
||
<div class="pl-3 flex-1">
|
||
<a href="/suniljoshi19" class="crayons-link fw-bold">Sunil Joshi</a>
|
||
<p class="fs-xs color-base-60">
|
||
Posted on <time datetime="2021-05-31T14:19:52Z" class="date">May 31, 2021</time>
|
||
|
||
• Updated on <time datetime="2022-07-06T05:16:39Z" class="date-no-year">Jul 6</time>
|
||
|
||
• Originally published at <a style="color:#1395b8" href="https://blog.wrappixel.com/20-best-css-animation-resources/">blog.wrappixel.com</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h1 class="fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-2 medium">
|
||
20 Best CSS Animation Resources
|
||
</h1>
|
||
|
||
<div class="spec__tags flex flex-wrap">
|
||
<a class="crayons-tag " style="
|
||
--tag-bg: rgba(41, 101, 241, 0.10);
|
||
--tag-prefix: #2965F1;
|
||
--tag-bg-hover: rgba(41, 101, 241, 0.10);
|
||
--tag-prefix-hover: #2965F1;
|
||
" href="/t/css"><span class="crayons-tag__prefix">#</span>css</a>
|
||
<a class="crayons-tag " style="
|
||
--tag-bg: rgba(59, 73, 223, 0.10);
|
||
--tag-prefix: #3b49df;
|
||
--tag-bg-hover: rgba(59, 73, 223, 0.10);
|
||
--tag-prefix-hover: #3b49df;
|
||
" href="/t/animation"><span class="crayons-tag__prefix">#</span>animation</a>
|
||
<a class="crayons-tag " style="
|
||
--tag-bg: rgba(59, 73, 223, 0.10);
|
||
--tag-prefix: #3b49df;
|
||
--tag-bg-hover: rgba(59, 73, 223, 0.10);
|
||
--tag-prefix-hover: #3b49df;
|
||
" href="/t/resource"><span class="crayons-tag__prefix">#</span>resource</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="crayons-article__main">
|
||
|
||
<div class="crayons-article__body text-styles spec__body" data-article-id="714003" id="article-body">
|
||
<p>A text fading in and out or a link popping up when hovered. What do these two things have in common? Yes, they all animate.</p>
|
||
|
||
<p>What’s special about the web development space is that along with static elements, it also provides an infinite possibilities of dynamic elements which can animate the way it is needed. It can be done via simple CSS rules or by using a library or even a generator tool would do the same.</p>
|
||
|
||
<p>It’s just a matter of what type of animation you want and how you want to implement them. So that you don’t have to hop around from one website to another, we have curated 20 of the best CSS animation resources from libraries to generator tools in this article. Pick your favourite and start implementing it!</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="css-libraries" href="#css-libraries">
|
||
</a>
|
||
CSS Libraries 📚
|
||
</h2>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="1-whirl" href="#1-whirl">
|
||
</a>
|
||
1. <a href="https://whirl.netlify.app/">Whirl</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--McIkEt2n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622457921007_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--McIkEt2n--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622457921007_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>Made by <a href="https://github.com/jh3y">Jhey Tompkins</a>, a CSS wizard in himself, Whirl is a curation of CSS loading animations. It takes the pain out of a developer because it already has 106 whirls and more.</p>
|
||
|
||
<p>Take a look at the <a href="https://whirl.netlify.app/">demo website</a> to get a taste what type of loaders are available.</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<p>You can install it on your projects via NPM or Yarn commands -</p>
|
||
|
||
<p><code>npm i @jh3y/whirl</code><br>
|
||
<code>yarn add @jh3y/whirl</code></p>
|
||
|
||
<p>Else, if you want to get a quick spin up, you are free to use the <a href="https://github.com/jh3y/whirl/tags">CSS or SASS files</a>.</p>
|
||
|
||
<hr>
|
||
<h3>
|
||
<a name="2-magic-effects" href="#2-magic-effects">
|
||
</a>
|
||
2. <a href="https://www.minimamente.com/project/magic/">Magic Effects</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZDUK6WwL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622457973245_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZDUK6WwL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622457973245_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>Every wanted to have some ‘special-effects’ on your website without having to learn some complex software programmes? </p>
|
||
|
||
<p>The Magic Effects library has got them all. Whether you want the usual static effects like <code>OPENDOWNLEFT</code> which make an element appear as if it’s opening from a box and then going down, or something more real-life like <code>PERSEPECTIVEUPRETURN</code> that uses the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/perspective">CSS perspective property</a> to make you feel like the element is in a 3D space, this library suits the best!</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<p>The good thing is that we can use it with both CSS and JavaScript files. Let’s see how to do it in CSS:</p>
|
||
|
||
<p><code>npm i magic.css</code><br>
|
||
<code>yarn add magic.css</code></p>
|
||
|
||
<p>You can also include its minified version in your HTML boilerplate:</p>
|
||
|
||
<p><code><link rel="stylesheet" href="yourpath/magic.min.css"></code></p>
|
||
|
||
<hr>
|
||
<h3>
|
||
<a name="3-animista" href="#3-animista">
|
||
</a>
|
||
3. <a href="https://animista.net/">Animista</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--o3g0pMtG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458054463_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--o3g0pMtG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458054463_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>What makes Animista unique from others you say? Well, it has a fully-featured animation demo workspace where you can literally preview each of the different types of animation it has to offer along with different options like delay, iteration-count, direction, fill-mode and more!</p>
|
||
|
||
<p>And did I told you that each of its 15 ‘Basic’ animation type has more than 10 sub-animations! It’s mind-blowing to see how much we can achieve with Animista.</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<p>There are three steps in this-</p>
|
||
|
||
<ol>
|
||
<li>Get a taste of different animations from its editor.</li>
|
||
<li>Pick your favourite ones by clicking on the heart button.</li>
|
||
<li>When you are ready, click the download button on the top-right corner to access the download screen.</li>
|
||
</ol>
|
||
|
||
<p>When you do this, an animate.css file will be downloaded which you can then easily add to your project directory.</p>
|
||
|
||
<hr>
|
||
<h3>
|
||
<a name="4-hamburgers" href="#4-hamburgers">
|
||
</a>
|
||
4. <a href="https://jonsuh.com/hamburgers/">Hamburgers</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YGAfdz5m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458130658_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YGAfdz5m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458130658_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>Did someone said, “Treat!”? Well, yes but for developers. Hamburgers is a collection of 10+ examples of CSS hamburger animations which are very well suited for navigation for mobile devices.</p>
|
||
|
||
<p>From the usual ‘Boring’ one to the exciting ‘Empathic’, you can get them all. The good thing here is that it has a tremendous support for different stacks be it <a href="http://sass-lang.com/">SASS</a> or <a href="https://rubyonrails.org/">Ruby on Rails</a>.</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<ol>
|
||
<li>Download the file from <a href="https://github.com/jonsuh/hamburgers">here</a>.</li>
|
||
<li>
|
||
<p>Include the following in your HTML:</p>
|
||
|
||
<p><code><link href="dist/hamburgers.css" rel="stylesheet"></code></p>
|
||
</li>
|
||
<li>
|
||
<p>Add base HTML:<br>
|
||
</p>
|
||
|
||
<p><code><button class="hamburger" type="button"><br>
|
||
<span class="hamburger-box"><br>
|
||
<span class="hamburger-inner"></span><br>
|
||
</span><br>
|
||
</button></code><br>
|
||
</p>
|
||
|
||
|
||
</li>
|
||
<li>
|
||
|
||
<p>Append the class name of the type of hamburger you want:<br>
|
||
</p>
|
||
|
||
<p><code><button class="hamburger hamburger--collapse" type="button"><br>
|
||
<span class="hamburger-box"><br>
|
||
<span class="hamburger-inner"></span><br>
|
||
</span><br>
|
||
</button></code><br>
|
||
</p>
|
||
|
||
|
||
</li>
|
||
<li><p>Finally, trigger the active state:<br><br>
|
||
</p></li>
|
||
</ol>
|
||
|
||
<p><code><button class="hamburger hamburger--collapse is-active" type="button"><br>
|
||
<span class="hamburger-box"><br>
|
||
<span class="hamburger-inner"></span><br>
|
||
</span><br>
|
||
</button></code><br>
|
||
</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="5-animatecss" href="#5-animatecss">
|
||
</a>
|
||
5. <a href="https://animate.style/">Animate.css</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6GqeGoaZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458158876_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6GqeGoaZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458158876_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>This has to come right? Probably one of the most popular CSS animation libraries out there. Animate.css is one of those libraries which work great for emphasis, home pages, sliders, and attention-guiding hints. </p>
|
||
|
||
<p>With powers of NPM, <a href="https://postcss.org/">Post CSS</a> + <a href="https://github.com/csstools/postcss-preset-env">postcss-preset-env</a>, you can create custom builds pretty easily. For accessibility, it supports <code>[prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)</code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">media query</a>.</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<p><code>npm install animate.css --save</code><br>
|
||
<code>yarn add animate.css</code></p>
|
||
|
||
<p>Or add it’s CDN:<br>
|
||
</p>
|
||
|
||
<p><code><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /></code><br>
|
||
</p>
|
||
|
||
<p>Then use it on any element like this:</p>
|
||
|
||
<p><code><div class="animate__animated animate__bounce"></div></code></p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="6-hovercss" href="#6-hovercss">
|
||
</a>
|
||
6. <a href="http://ianlunn.github.io/Hover/">Hover.css</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QyIe3SJD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458188590_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QyIe3SJD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458188590_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>Finding some inspiration on different hover states and how they should animate? Hover.css got you back with an amazing set of 2D, icons, borders, speech bubbles animations to integrate in your button or link styles.</p>
|
||
|
||
<p>The best part? All effects make use of a single element and are self contained so you can easily copy and paste them whenever needed.</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<p>Install it by running the following commands-</p>
|
||
|
||
<p><code>npm install hover.css --save</code><br>
|
||
<code>bower install hover --save</code></p>
|
||
|
||
<p>Or you can directly <a href="https://github.com/IanLunn/Hover/archive/master.zip">download its ZIP code</a>. Once it is installed, you can use it like:</p>
|
||
|
||
<p><code><a href="#" class="hvr-grow">Add to Basket</a></code></p>
|
||
|
||
<hr>
|
||
<h3>
|
||
<a name="7-gsap" href="#7-gsap">
|
||
</a>
|
||
7. <a href="https://greensock.com/gsap/">GSAP</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8TqFp7d_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458328197_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8TqFp7d_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458328197_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>GSAP or GreenSock Animation Platform is not just another CSS library, it’s an entire platform of animation services on the web which can be achieved by both CSS and JavaScript.</p>
|
||
|
||
<p>What stands out is that it’s really powerful and packed with tonnes of customisable features. If you are someone who is fed up of the usual entrance, hover or glow animations, GSAP allows you to completely code out your entire animation sequences from scratch!</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<p>There is so much to chose from here that they made an entire webpage just to choose what to install. Go to <a href="https://greensock.com/docs/">this page</a> and select the different features you want to incorporate and make sure you visit their <a href="https://greensock.com/get-started/">Getting Started guide</a>.</p>
|
||
|
||
<hr>
|
||
<h3>
|
||
<a name="8-motion-ui" href="#8-motion-ui">
|
||
</a>
|
||
8. <a href="https://zurb.com/playground/motion-ui">Motion UI</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JX9qVG-2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458352470_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JX9qVG-2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458352470_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>Motion UI is a <a href="https://sass-lang.com/">SASS</a> library for creating flexible CSS transitions and animations. The core utility here is to transition components in and out. You can then apply these transitions to any UI element you like.</p>
|
||
|
||
<p>You can tinker around with the variety of animations it has to offer in their demo page linked above. The code is mostly in SCSS and CSS also so you can use features of both.</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<p>You can install it via the following commands-</p>
|
||
|
||
<p><code>bower install motion-ui --save</code><br>
|
||
<code>npm install motion-ui --save</code></p>
|
||
|
||
<hr>
|
||
<h3>
|
||
<a name="9-infinite" href="#9-infinite">
|
||
</a>
|
||
9. <a href="https://tilomitra.github.io/infinite/">Infinite</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XRnnOIPw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458380769_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XRnnOIPw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458380769_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>Probably the simplest of the lot here. Infinite is a simple set of useful infinite CSS animations that you can drop into your project.</p>
|
||
|
||
<p>It mainly focusses on the pulsating effects for an element. Some of the animations it has to offer include; <code>pulsate</code>, <code>opacityPulse</code> and <code>alertPulse</code>.</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<p>The usage is really simple. You just have to include its <a href="https://github.com/tilomitra/infinite/blob/gh-pages/infinite.css">infinite.css</a> file in your project and then you are ready to go!</p>
|
||
|
||
<hr>
|
||
<h3>
|
||
<a name="10-animxyz" href="#10-animxyz">
|
||
</a>
|
||
10. <a href="https://animxyz.com/">AnimXYZ</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--L4IdIN-T--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458418853_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--L4IdIN-T--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458418853_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>This one claims to be the first composable CSS animation toolkit. AnimXYZ is powered by CSS variables by which it opens an infinite amount of possibilities that can be achieved with this library without you writing a single <code>[@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)</code> code.</p>
|
||
|
||
<p>What’s great is that it supports the major frontend contenders like Vue, React and SCSS out of the box!</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<p>Install it with:<br>
|
||
</p>
|
||
|
||
<p><code># with npm <br>
|
||
npm install @animxyz/core <br>
|
||
# with yarn <br>
|
||
yarn add @animxyz/core</code><br>
|
||
</p>
|
||
|
||
<p>Or simply use it with a CDN:<br>
|
||
</p>
|
||
|
||
<p><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core@0.4.0/dist/animxyz.min.css"></code><br>
|
||
</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="11-wowjs" href="#11-wowjs">
|
||
</a>
|
||
11. <a href="https://wowjs.uk/">WOW.js</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aA5eQZgL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458444198_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aA5eQZgL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458444198_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>Need a wonderful reveal animation library specially on scroll? WOW got you!</p>
|
||
|
||
<p>It’s works close to Animate.css and you can easily customise the style, delay, length, offset, and iterations of each animation you chose. One plus point here is that you can customise its default settings easily!</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<p>Here are some steps to follow-</p>
|
||
|
||
<ol>
|
||
<li>
|
||
<p>Link Animate.css in HTML:<br>
|
||
</p>
|
||
|
||
<p><code><link rel="stylesheet" href="css/animate.css"></code><br>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>Link and activate WOW.js:<br>
|
||
</p>
|
||
|
||
<p><code><script src="js/wow.min.js"></script><br>
|
||
<script><br>
|
||
new WOW().init();<br>
|
||
</script></code><br>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>Use it in an element:<br>
|
||
</p>
|
||
|
||
<p><code><h3 class="wow">Content to Reveal Here</h3></code><br>
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="12-wicked-css" href="#12-wicked-css">
|
||
</a>
|
||
12. <a href="https://kristofferandreasen.github.io/wickedCSS/">Wicked CSS</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--uwsVfWjj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458471398_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--uwsVfWjj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458471398_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>Wicked CSS is developed for those who want to spice up their sites with some sweet animation effects it offers.</p>
|
||
|
||
<p>It has some really sweet animation demos and examples on their website and offers just enough of effects you might need on any regular project like <code>zoomer</code>, <code>shake</code> or <code>fadeIn</code>.</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<ol>
|
||
<li>Download the Wicked CSS file from <a href="https://kristofferandreasen.github.io/wickedCSS/dist/wickedcss.min.css">here</a>.</li>
|
||
<li>
|
||
<p>Add this to your HTML:<br>
|
||
</p>
|
||
|
||
<p><code><link rel="stylesheet" href="css/wickedcss.css"></code><br>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>Apply the animation you want:<br>
|
||
</p>
|
||
|
||
<p><code><div class="barrelRoll">My animation</div></code><br>
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="13-tachyons-animate" href="#13-tachyons-animate">
|
||
</a>
|
||
13. <a href="https://github.com/anater/tachyons-animate">Tachyons Animate</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Tj-jE6Pv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458520388_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Tj-jE6Pv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458520388_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>Tachyons Animate provides you with just the single-purpose classes to help you create CSS animations.</p>
|
||
|
||
<p>There are zero animation keyframes and there are only sing-purpose classes to use. With this you can control the animation play state, iteration count and the direction.</p>
|
||
|
||
<p>Usage:</p>
|
||
|
||
<ol>
|
||
<li>
|
||
<p>Clone its repository:<br>
|
||
</p>
|
||
|
||
<p><code>git clone https://github.com/anater/tachyons-animate</code><br>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p>Alternatively, you can go the NPM route:<br>
|
||
</p>
|
||
|
||
<p><code>npm i tachyons-animate</code><br>
|
||
</p>
|
||
</li>
|
||
</ol>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="css-animation-generators" href="#css-animation-generators">
|
||
</a>
|
||
CSS Animation Generators ⚙️
|
||
</h2>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="1-angry-tools" href="#1-angry-tools">
|
||
</a>
|
||
1. <a href="https://angrytools.com/css-generator/animation/">Angry Tools</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UBP0E2fj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458560522_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UBP0E2fj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458560522_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>The first of the lot is from Angry Tools and they managed to put some of the common animations you will need in a project at a single place.</p>
|
||
|
||
<p>With their interactive demo by which you can control the animation function, you get the desired code immediately which you can then copy/paste or adjust the values accordingly.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="2-css-animate" href="#2-css-animate">
|
||
</a>
|
||
2. <a href="https://cssanimate.com/">CSS Animate</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iNtkrgoW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458592682_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iNtkrgoW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458592682_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>How about combining the power of a timeline view with animation generation? This one provides the best of both worlds.</p>
|
||
|
||
<p>You simply drag, pan, change shape or size of the element on a specified duration in the timeline and it will play the animation. They have a robust set of examples to get you started with and the code works in all modern browsers.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="3-wait-animate" href="#3-wait-animate">
|
||
</a>
|
||
3. <a href="https://waitanimate.wstone.io/">WAIT! Animate</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HvYlsKxI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458621200_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HvYlsKxI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458621200_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>It promises to calculate updated keyframe percentages of an animation given a wait time. </p>
|
||
|
||
<p>This means you can insert a delay between each animation iteration using pure CSS, without JavaScript with this tool. It also supports SASS mixins.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="4-ceaser" href="#4-ceaser">
|
||
</a>
|
||
4. <a href="https://matthewlein.com/tools/ceaser">Ceaser</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zovWBXAs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458639921_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zovWBXAs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458639921_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>Want to tinker around with the bezier curve functions? Maybe you want to have some ease-out at first and then go with easeInSine?</p>
|
||
|
||
<p>Fret not because Ceaser is that tool which has mastered curves early in this game. It has more than 10 curve types which can be further customised accordingly with duration, effects and opacity values.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="5-ultimate-css-gradient-generator-by-colorzilla" href="#5-ultimate-css-gradient-generator-by-colorzilla">
|
||
</a>
|
||
5. <a href="https://www.colorzilla.com/gradient-editor/">Ultimate CSS Gradient Generator by ColorZilla</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oE25sQwi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458669567_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oE25sQwi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458669567_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>The gold mine for gradients! When you have a synchronised preview by your side along with browser support and interactive tool for making the perfect gradient, you can't complaint much.</p>
|
||
|
||
<p>There are plethora of options available in this tool from changing the hue/saturation to getting SASS code, complex multi-stop gradients and more.</p>
|
||
|
||
|
||
<hr>
|
||
|
||
<h2>
|
||
<a name="miscellaneous-tools-%F0%9F%9B%A0" href="#miscellaneous-tools-%F0%9F%9B%A0">
|
||
</a>
|
||
Miscellaneous tools 🛠
|
||
</h2>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="1-css-animation-tutorials-and-guides" href="#1-css-animation-tutorials-and-guides">
|
||
</a>
|
||
1. <a href="https://cssanimation.rocks/">CSS Animation tutorials and guides</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NpuJJWTo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458701417_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--NpuJJWTo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458701417_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>This is a curated weekly roundup of all the latest in web animation. You get:</p>
|
||
|
||
<ul>
|
||
<li>Inspirations on all the new projects made by developers with CSS animations.</li>
|
||
<li>A complete guide on how to start working on an animation project with latest CSS standards.</li>
|
||
<li>Tutorials with demos and code examples.</li>
|
||
<li>A weekly newsletter which shares the latest and greatest animations.</li>
|
||
</ul>
|
||
|
||
|
||
<hr>
|
||
|
||
<h3>
|
||
<a name="2-cool-css-animation" href="#2-cool-css-animation">
|
||
</a>
|
||
2. <a href="https://coolcssanimation.com/">Cool CSS Animation</a>
|
||
</h3>
|
||
|
||
<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jCHF9FiI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458731154_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jCHF9FiI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropbox.com/s_4A35A8F7904429A4257D847778006A63560C63056133AEB10E85C88C93165F10_1622458731154_image.png" alt="" loading="lazy"></a></p>
|
||
|
||
<p>With this website, you can easily discover CSS animations by learning to code really cool animations with amazing effects. You get:</p>
|
||
|
||
<ul>
|
||
<li>CSS animation examples: to get some inspiration.</li>
|
||
<li>CSS animation tutorials: to learn some cool HTML and CSS tricks.</li>
|
||
<li>CSS animation cheatsheets: to code CSS animations faster with code snippets.</li>
|
||
</ul>
|
||
|
||
<p>We hope you liked these CSS animation resources. Don’t forget to bookmark your favourites and show the world what you can make with these amazing resources!</p>
|
||
|
||
|
||
<hr>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<section id="comments" data-follow-button-container="true" data-updated-at="2022-10-28 07:12:39 UTC" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10">
|
||
<header class="relative flex justify-between items-center mb-6">
|
||
<div class="flex items-center">
|
||
<h2 class="crayons-subtitle-1">
|
||
Top comments <span class="js-comments-count" data-comments-count="1">(1)</span>
|
||
</h2>
|
||
<button class="c-btn c-btn--ghost crayons-btn--icon-left" id="toggle-comments-sort-dropdown" aria-controls="comments-sort-dropdown-container" aria-expanded="false" aria-label="Sort comments" aria-haspopup="true">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" class="mt-2"><title>Crown</title>
|
||
<path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
|
||
</svg>
|
||
|
||
</button>
|
||
</div>
|
||
|
||
<nav class="crayons-dropdown p-4" id="comments-sort-dropdown-container" aria-labelledby="comments-sort-title">
|
||
<h3 id="comments-sort-title" class="mb-3">Sort discussion: </h3>
|
||
<ul class="comments-sort-dropdown__list">
|
||
<li class="comment-sort-option">
|
||
<a
|
||
href="/suniljoshi19/20-best-css-animation-resources-1fdf?comments_sort=top#toggle-comments-sort-dropdown"
|
||
class="comment-sort-option__header pl-7 pb-0 crayons-link--block block"
|
||
aria-describedby="top-description-text"
|
||
aria-current="page">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-labelledby="a1ep9vfikswyh2qcr4rrxzl1vn4v8sts" aria-hidden="true" class="crayons-icon"><title id="a1ep9vfikswyh2qcr4rrxzl1vn4v8sts">Selected Sort Option</title>
|
||
<path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414 4.95 4.95z"></path>
|
||
</svg>
|
||
|
||
Top
|
||
</div>
|
||
<div id="top-description-text" class="crayons-field__description">
|
||
Most upvoted and relevant comments will be first
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="comment-sort-option">
|
||
<a
|
||
href="/suniljoshi19/20-best-css-animation-resources-1fdf?comments_sort=latest#toggle-comments-sort-dropdown"
|
||
class="comment-sort-option__header pl-7 pb-0 crayons-link--block block"
|
||
aria-describedby="latest-description-text"
|
||
aria-current="">
|
||
<div>
|
||
|
||
Latest
|
||
</div>
|
||
<div id="latest-description-text" class="crayons-field__description">
|
||
Most recent comments will be first
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="comment-sort-option">
|
||
<a
|
||
href="/suniljoshi19/20-best-css-animation-resources-1fdf?comments_sort=oldest#toggle-comments-sort-dropdown"
|
||
class="comment-sort-option__header pl-7 pb-0 crayons-link--block block"
|
||
aria-describedby="oldest-description-text"
|
||
aria-current="">
|
||
<div>
|
||
|
||
Oldest
|
||
</div>
|
||
<div id="oldest-description-text" class="crayons-field__description">
|
||
The oldest comments will be first
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
<div id="comment-subscription" class="print-hidden">
|
||
<div class="crayons-btn-group">
|
||
<span class="crayons-btn crayons-btn--outlined">Subscribe</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div
|
||
id="comments-container"
|
||
data-testid="comments-container"
|
||
data-commentable-id="714003"
|
||
data-commentable-type="Article"
|
||
data-has-recent-comment-activity="false">
|
||
|
||
<div id="response-templates-data" class="hidden"></div>
|
||
<script src="https://dev.to/packs/js/runtime~validateFileInputs-8d835be3c3cad3ed8433.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/0-7e2f02f299313d314059.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/1-c9928f43aa4a7dd3f2bb.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/validateFileInputs-8248e77b022618936c83.chunk.js" defer="defer"></script>
|
||
|
||
|
||
<form class="comment-form print-hidden" id="new_comment" action="/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off" />
|
||
|
||
<input type="hidden" name="authenticity_token" value="NOTHING" id="new_comment_authenticity_token">
|
||
|
||
<input value="714003" autocomplete="off" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" />
|
||
<input value="Article" autocomplete="off" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" />
|
||
|
||
|
||
<span class="crayons-avatar m:crayons-avatar--l mr-2 shrink-0">
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RmY55OKL--/c_limit,f_auto,fl_progressive,q_auto,w_256/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar" loading="lazy" />
|
||
</span>
|
||
<div class="comment-form__inner">
|
||
<div class="comment-form__field" data-tracking-name="comment_form_textfield">
|
||
<textarea placeholder="Add to the discussion" onfocus="handleFocus(event)" onkeyup="handleKeyUp(event)" onkeydown="handleKeyDown(event)" oninput="handleChange(event)" id="text-area" required="required" class="crayons-textfield comment-textarea crayons-textfield--ghost" aria-label="Add a comment to the discussion" name="comment[body_markdown]">
|
||
</textarea>
|
||
|
||
</div>
|
||
|
||
<div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden">
|
||
<header class="mb-3">
|
||
<button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button>
|
||
<button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Trusted User</button>
|
||
</header>
|
||
|
||
<img class="loading-img hidden" src="https://dev.to/assets/loading-ellipsis-b714cf681fd66c853ff6f03dd161b77aa3c80e03cdc06f478b695f42770421e9.svg" alt="loading" loading="lazy" />
|
||
|
||
<div class="personal-responses-container">
|
||
</div>
|
||
<div class="moderator-responses-container hidden">
|
||
</div>
|
||
|
||
<a target="_blank" rel="noopener nofollow" href="/settings/response-templates">
|
||
Create template
|
||
</a>
|
||
<p>Templates let you quickly answer FAQs or store snippets for re-use.</p>
|
||
</div>
|
||
|
||
<div class="comment-form__preview text-styles text-styles--secondary" id="preview-div"></div>
|
||
|
||
<div class="comment-form__buttons mb-4">
|
||
<button type="submit" class="crayons-btn mr-2 js-btn-enable" onclick="validateField(event)" data-tracking-name="comment_submit_button" disabled>Submit</button>
|
||
<button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-preview js-btn-enable mr-2" data-tracking-name="comment_preview_button" disabled>Preview</button>
|
||
<a href="/404.html" class="dismiss-edit-comment crayons-btn crayons-btn--ghost js-btn-dismiss hidden">Dismiss</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-of-conduct" id="toggle-code-of-conduct-checkbox"></div>
|
||
</form>
|
||
|
||
|
||
<div class="comments" id="comment-trees-container">
|
||
<details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0
|
||
root
|
||
" open>
|
||
<summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle">
|
||
<span class="m:mx-1 inline-block align-middle">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a8n325qmebcbmakvxaorlmfbxaprqh8d" class="crayons-icon expanded"><title id="a8n325qmebcbmakvxaorlmfbxaprqh8d">Collapse</title>
|
||
<path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path>
|
||
</svg>
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a6gc7anx6oda8hczojsjgsb48l5b1g05" class="crayons-icon collapsed"><title id="a6gc7anx6oda8hczojsjgsb48l5b1g05">Expand</title>
|
||
<path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path>
|
||
</svg>
|
||
|
||
</span>
|
||
<span class="js-collapse-comment-content inline-block align-middle"></span>
|
||
</summary>
|
||
<div
|
||
id="comment-node-721894"
|
||
class="
|
||
comment single-comment-node
|
||
|
||
root
|
||
comment--deep-0
|
||
|
||
"
|
||
data-comment-id="721894"
|
||
data-path="/suniljoshi19/20-best-css-animation-resources-1fdf/comments/1f1n4"
|
||
data-comment-author-id="232190"
|
||
data-content-user-id="232190">
|
||
<a name="comment-1f1n4" style="position: absolute; top: -8px;"> </a>
|
||
|
||
<div class="comment__inner">
|
||
<a href="https://dev.to/dvtuan123" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3">
|
||
<img class="crayons-avatar__image" width="32" height="32" src="https://res.cloudinary.com/practicaldev/image/fetch/s--vutepQUY--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/232190/7afea217-0a47-4710-8bc1-be4c4cb52ec0.png" alt="dvtuan123 profile image" loading="lazy" />
|
||
</a>
|
||
|
||
|
||
<div class="inner-comment comment__details">
|
||
<div class="comment__content crayons-card">
|
||
|
||
|
||
|
||
<div class="comment__header">
|
||
<a href="https://dev.to/dvtuan123" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
|
||
<span class="js-comment-username">dvtuan123</span>
|
||
</a>
|
||
<div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
|
||
<button id="comment-profile-preview-trigger-721894" aria-controls="comment-profile-preview-content-721894" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="dvtuan123 profile details">
|
||
dvtuan123
|
||
</button>
|
||
<div id="comment-profile-preview-content-721894" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #002a9e; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true">
|
||
<div class="gap-4 grid">
|
||
<div class="-mt-4">
|
||
<a href="/dvtuan123" class="flex">
|
||
<span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0">
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4oX4uf6l--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/232190/7afea217-0a47-4710-8bc1-be4c4cb52ec0.png" class="crayons-avatar__image" alt="" loading="lazy" />
|
||
</span>
|
||
<span class="crayons-link crayons-subtitle-2 mt-5">dvtuan123</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="print-hidden">
|
||
<button name="button" type="button" data-info="{"className":"User","style":"","id":232190,"name":"dvtuan123"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: dvtuan123" aria-pressed="false">Follow</button>
|
||
</div>
|
||
|
||
<div class="user-metadata-details">
|
||
<ul class="user-metadata-details-inner">
|
||
<li>
|
||
<div class="key">
|
||
Joined
|
||
</div>
|
||
<div class="value">
|
||
<time datetime="2019-09-18T18:07:45Z" class="date">Sep 18, 2019</time>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<span class="color-base-30 px-2 m:pl-0" role="presentation">•</span>
|
||
|
||
<a href="https://dev.to/suniljoshi19/20-best-css-animation-resources-1fdf#comment-1f1n4" class="comment-date crayons-link crayons-link--secondary fs-s">
|
||
<time datetime="2021-05-31T14:26:39Z" class=date-short-year>
|
||
May 31 '21
|
||
</time>
|
||
|
||
</a>
|
||
|
||
|
||
<div class="comment__dropdown" data-tracking-name="comment_dropdown">
|
||
<button id="comment-dropdown-trigger-721894" aria-controls="comment-dropdown-721894" aria-expanded="false"
|
||
class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon "
|
||
aria-label="Toggle dropdown menu" aria-haspopup="true">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aaz99s76kqsoyjwsoifqd0h833q3v8td" class="crayons-icon pointer-events-none"><title id="aaz99s76kqsoyjwsoifqd0h833q3v8td">Dropdown menu</title>
|
||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
|
||
</svg>
|
||
|
||
</button>
|
||
<div id="comment-dropdown-721894" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
|
||
<ul class="m-0">
|
||
<li><a href="https://dev.to/suniljoshi19/20-best-css-animation-resources-1fdf#comment-1f1n4" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to dvtuan123's comment" data-no-instant>Copy link</a></li>
|
||
<li class="comment-actions hidden" data-user-id="232190" data-action="settings-button" data-path="https://dev.to/dvtuan123/comment/1f1n4/settings" aria-label="Go to dvtuan123's comment settings"></li>
|
||
<li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="402414" data-user-id="232190">
|
||
<button
|
||
class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment"
|
||
data-hide-type="hide"
|
||
data-comment-id="721894"
|
||
data-comment-url="https://dev.to/dvtuan123/comment/1f1n4"
|
||
aria-label="Hide dvtuan123's comment">
|
||
Hide
|
||
</button>
|
||
</li>
|
||
<li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/dvtuan123/comment/1f1n4/mod" aria-label="Moderate dvtuan123's comment"></li>
|
||
<li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/dvtuan123/comment/1f1n4" aria-label="Report dvtuan123's comment as abusive or violating our code of conduct and/or terms and conditions"></li>
|
||
<li class="current-user-actions"></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div
|
||
class="
|
||
comment__body
|
||
text-styles
|
||
text-styles--secondary
|
||
body
|
||
|
||
|
||
">
|
||
<p>Thank you</p>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<footer class="comment__footer print-hidden">
|
||
<button
|
||
class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button"
|
||
id="button-for-comment-721894"
|
||
data-comment-id="721894"
|
||
aria-label="like"
|
||
data-tracking-name="comment_heart_button">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a15doyx2in7h10s6ap3pbekpx5aobeqb" class="crayons-icon reaction-icon not-reacted"><title id="a15doyx2in7h10s6ap3pbekpx5aobeqb">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg>
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a78f4x0xq8j2ylwti5nrqccn5h12gjtd" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a78f4x0xq8j2ylwti5nrqccn5h12gjtd">Like comment: </title>
|
||
<path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path>
|
||
</svg>
|
||
|
||
<span class="reactions-count">1</span><span class="reactions-label hidden m:inline-block"> like</span>
|
||
<span data-testid="tooltip" class="crayons-tooltip__content">
|
||
Like
|
||
</span>
|
||
</button>
|
||
|
||
<a
|
||
class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
|
||
href="#/suniljoshi19/20-best-css-animation-resources-1fdf/comments/new/1f1n4"
|
||
data-comment-id="721894"
|
||
data-path="/suniljoshi19/20-best-css-animation-resources-1fdf/comments/1f1n4"
|
||
data-tracking-name="comment_reply_button"
|
||
data-testid="reply-button-721894"
|
||
rel="nofollow">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ad5ibw2v2u9vnlmb8woe85oc2zu5w249" class="crayons-icon reaction-icon not-reacted"><title id="ad5ibw2v2u9vnlmb8woe85oc2zu5w249">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg>
|
||
|
||
<span class="hidden m:inline-block">Reply</span>
|
||
</a>
|
||
|
||
</footer>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</details>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="align-center">
|
||
|
||
|
||
<nav class="fs-s align-center block" aria-label="Conduct controls">
|
||
<a href="/code-of-conduct" class="crayons-link crayons-link--secondary">Code of Conduct</a>
|
||
<span class="opacity-25 px-2" role="presentation">•</span>
|
||
<a href="/report-abuse" class="crayons-link crayons-link--secondary">Report abuse</a>
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
<div id="hide-comments-modal" class="hidden">
|
||
<form id="hide-comments-modal__form" class="hide-comments-modal__form" data-type="json" action="/comments/hide" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off" /><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="ITJzm6yHKFvhDwX7DTVT63uFmNDxfmxdYEg4XXXCeUNz1WsGJ7zSAZAee3Ov94nyi4jHopE9THj3xmgZ402qIA" autocomplete="off" />
|
||
<div class="hide-comments-modal__content">
|
||
<p class="pb-2">
|
||
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's <a id="hide-comments-modal__comment-permalink" href="#">permalink</a>.
|
||
</p>
|
||
<label class="crayons-field crayons-field--checkbox my-2">
|
||
<input name="hide_children" type="hidden" value="0" autocomplete="off" /><input class="hide_children crayons-checkbox" type="checkbox" value="1" name="hide_children" id="hide_children" />
|
||
<p class="crayons-field__label">Hide child comments as well</p>
|
||
</label>
|
||
<p class="pb-4 pt-2">
|
||
<button type="submit" class="crayons-btn">
|
||
Confirm
|
||
</button>
|
||
</p>
|
||
</div>
|
||
</form> <p class="fs-s color-base-60">For further actions, you may consider blocking this person and/or <a id="hide-comments-modal__report-link" href="/report-abuse">reporting abuse</a></p>
|
||
</div>
|
||
|
||
|
||
|
||
</article>
|
||
|
||
<div class="crayons-card crayons-card--secondary p-4 crayons-sponsorship-article text-styles"
|
||
data-display-unit data-id="228"
|
||
data-category-click="click"
|
||
data-category-impression="impression"
|
||
data-context-type="home">
|
||
<h2> <a href="#friends-dont-let-friends-browse-without-dark-mode" class="anchor"> </a> 🌚 Friends don't let friends browse without <a href="https://dev.to/settings/customization">dark mode</a>.</h2><p>Sorry, it's true.</p>
|
||
</div>
|
||
|
||
<section class="crayons-card crayons-card--secondary text-padding mb-4 print-hidden" id="bottom-content-read-next">
|
||
<h2 class="crayons-subtitle-1">Read next</h2>
|
||
<a href="/jolamemushaj/building-a-sidebar-with-tailwind-css-4kn4" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--2UF5Jkwq--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cez7paqumt3dsl9lofre.png" class="crayons-link mt-6 block">
|
||
<div class="flex items-center">
|
||
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
|
||
<img loading="lazy" alt="jolamemushaj profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--UlEc5UrP--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/802833/a33a373b-422e-4ed7-a733-752db8bccfaf.jpg" />
|
||
</span>
|
||
<div>
|
||
<h3 class="fs-xl mb-0 lh-tight">Building a sidebar with Tailwind CSS</h3>
|
||
<p class="opacity-75 pt-1">
|
||
jolamemushaj - <time datetime="2022-08-24T08:32:15Z">Aug 24</time>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a href="/shubhamku044/how-to-use-ttf-fonts-with-tailwind-css-39dg" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--d1tg49O5--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2xj9m3630hmjw0k1v57.png" class="crayons-link mt-6 block">
|
||
<div class="flex items-center">
|
||
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
|
||
<img loading="lazy" alt="shubhamku044 profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--7Z_HNRL7--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/720295/d897c00d-927c-4c19-831e-b45ef4082a48.jpg" />
|
||
</span>
|
||
<div>
|
||
<h3 class="fs-xl mb-0 lh-tight">How to use .ttf fonts with Tailwind CSS</h3>
|
||
<p class="opacity-75 pt-1">
|
||
Shubham Sharma - <time datetime="2022-08-23T22:53:49Z">Aug 23</time>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a href="/kadlagakash/css-position-ultimate-guide-2022-a9p" data-preload-image="https://res.cloudinary.com/practicaldev/image/fetch/s--e8M4Ah_F--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6zrzv0zjwt0q7abbrb3.png" class="crayons-link mt-6 block">
|
||
<div class="flex items-center">
|
||
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
|
||
<img loading="lazy" alt="kadlagakash profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--8j8G19sz--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/906846/da5b8997-d112-4ccc-b9f2-f5293be9291c.jpg" />
|
||
</span>
|
||
<div>
|
||
<h3 class="fs-xl mb-0 lh-tight">CSS Position Ultimate Guide 2022.</h3>
|
||
<p class="opacity-75 pt-1">
|
||
Akash Kadlag - <time datetime="2022-08-23T11:51:00Z">Aug 23</time>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a href="/techthatconnect/responsive-design-and-how-i-utilize-it-in-my-blog-1f38" data-preload-image="" class="crayons-link mt-6 block">
|
||
<div class="flex items-center">
|
||
<span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
|
||
<img loading="lazy" alt="techthatconnect profile image" class="crayons-avatar__image" width="100" height="100" src="https://res.cloudinary.com/practicaldev/image/fetch/s--gv3NU-CH--/c_imagga_scale,f_auto,fl_progressive,h_100,q_auto,w_100/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/905951/95f3c8e0-bbc1-4c98-84b2-44ffb48ec0bb.png" />
|
||
</span>
|
||
<div>
|
||
<h3 class="fs-xl mb-0 lh-tight">Responsive design and how I utilize it in my Blog</h3>
|
||
<p class="opacity-75 pt-1">
|
||
TechThatConnect - <time datetime="2022-08-23T18:38:02Z">Aug 23</time>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</section>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<aside class="crayons-layout__sidebar-right" aria-label="Author details">
|
||
<div class="crayons-article-sticky grid gap-4 break-word" id="article-show-primary-sticky-nav">
|
||
<div class="crayons-card crayons-card--secondary branded-7 p-4 pt-0 gap-4 grid" style="border-top-color: #131313;">
|
||
<div class="-mt-4">
|
||
<a href="/suniljoshi19" class="flex">
|
||
<span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0">
|
||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7pkQABoW--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/402414/6b8863a6-9c25-4b6a-9bfd-be94ab69ec6c.jpg" class="crayons-avatar__image" alt="" loading="lazy" />
|
||
</span>
|
||
<span class="crayons-link crayons-subtitle-2 mt-5">Sunil Joshi</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="print-hidden">
|
||
<button name="button" type="button" data-info="{"className":"User","style":"","id":402414,"name":"Sunil Joshi"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Sunil Joshi" aria-pressed="false">Follow</button>
|
||
</div>
|
||
<div class="color-base-70">
|
||
An avid designer cum developer who is passionate about solving complex UX challenges across digital businesses.
|
||
</div>
|
||
|
||
<div class="user-metadata-details">
|
||
<ul class="user-metadata-details-inner">
|
||
<li>
|
||
<div class="key">
|
||
Location
|
||
</div>
|
||
<div class="value">
|
||
India
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="key">
|
||
Work
|
||
</div>
|
||
<div class="value">
|
||
Co-Founder at WrapPixel
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="key">
|
||
Joined
|
||
</div>
|
||
<div class="value">
|
||
<time datetime="2020-06-05T07:27:52Z" class="date">Jun 5, 2020</time>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="crayons-card crayons-card--secondary">
|
||
<header class="crayons-card__header">
|
||
<h3 class="crayons-subtitle-2">
|
||
More from <a href="/suniljoshi19">Sunil Joshi</a>
|
||
</h3>
|
||
</header>
|
||
<div>
|
||
<a class="crayons-link crayons-link--contentful" href="/suniljoshi19/implementing-drag-and-drop-in-vuejs-276c">
|
||
Implementing Drag and Drop in Vuejs
|
||
<div class="crayons-link__secondary -ml-1">
|
||
<span class="mr-1"><span class="opacity-50">#</span>vue</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>webdev</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>productivity</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>css</span>
|
||
</div>
|
||
</a>
|
||
<a class="crayons-link crayons-link--contentful" href="/suniljoshi19/setting-up-tailwindcss-in-angular-10-2p4p">
|
||
Setting up TailwindCss in Angular 10
|
||
<div class="crayons-link__secondary -ml-1">
|
||
<span class="mr-1"><span class="opacity-50">#</span>angular</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>javascript</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>webdev</span>
|
||
<span class="mr-1"><span class="opacity-50">#</span>css</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</aside>
|
||
</div>
|
||
|
||
|
||
<div class="mod-actions-menu print-hidden"></div>
|
||
<div data-testid="unpublish-post-modal-container" class="unpublish-post-modal-container hidden"></div>
|
||
<div id="suspend-modal-content" class="hidden">
|
||
<p>
|
||
Once suspended, suniljoshi19 will not be able to comment or publish posts until their suspension is removed.
|
||
</p>
|
||
|
||
<div class="crayons-field mt-4">
|
||
<label
|
||
for="suspend-reason-userid-402414"
|
||
class="crayons-field__label">
|
||
Note:
|
||
</label>
|
||
<textarea
|
||
id="suspend-reason-userid-402414"
|
||
rows="4"
|
||
cols="70"
|
||
placeholder="Reason for suspension"
|
||
class="crayons-textfield"
|
||
aria-describedby="suspension-reason-error"
|
||
required></textarea>
|
||
<p
|
||
id="suspension-reason-error"
|
||
data-testid="suspension-reason-error"
|
||
class="suspend-reason-error crayons-field__description"
|
||
style="color: red;"
|
||
aria-live="assertive">
|
||
</p>
|
||
</div>
|
||
<div class="mt-4">
|
||
<button
|
||
id="submit-user-suspend-btn"
|
||
class="c-btn c-btn--primary c-btn--destructive"
|
||
data-btn-action="suspend"
|
||
data-reason-selector="#suspend-reason-userid-402414"
|
||
data-user-id="402414"
|
||
data-username="suniljoshi19">
|
||
Submit & Suspend
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="unsuspend-modal-content" class="hidden">
|
||
<p>
|
||
Once unsuspended, suniljoshi19 will be able to comment and publish posts again.
|
||
</p>
|
||
|
||
<div class="crayons-field mt-4">
|
||
<label
|
||
for="unsuspend-reason-userid-402414"
|
||
class="crayons-field__label">
|
||
Note:
|
||
</label>
|
||
<textarea
|
||
id="unsuspend-reason-userid-402414"
|
||
rows="4"
|
||
cols="70"
|
||
placeholder="Reason for unsuspension"
|
||
class="crayons-textfield"
|
||
aria-describedby="unsuspension-reason-error"
|
||
required></textarea>
|
||
<p
|
||
id="unsuspension-reason-error"
|
||
data-testid="unsuspension-reason-error"
|
||
class="unsuspend-reason-error crayons-field__description"
|
||
style="color: red;"
|
||
aria-live="assertive">
|
||
</p>
|
||
</div>
|
||
<div class="mt-4">
|
||
<button
|
||
id="submit-user-unsuspend-btn"
|
||
class="c-btn c-btn--primary"
|
||
data-btn-action="unsuspend"
|
||
data-reason-selector="#unsuspend-reason-userid-402414"
|
||
data-user-id="402414"
|
||
data-username="suniljoshi19">
|
||
Submit & Unsuspend
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="unpublish-all-posts" class="hidden">
|
||
<p>
|
||
Once unpublished, all posts by suniljoshi19 will become hidden and only accessible to themselves.
|
||
</p>
|
||
<p class="mt-2">
|
||
If suniljoshi19 is not suspended, they can still re-publish their posts from their dashboard.
|
||
</p>
|
||
<p class="mt-2"><label for="note_content">Note:</label><textarea name="note[content]" id="note_content" class="crayons-textfield note_content" placeholder="Note text">
|
||
</textarea></p>
|
||
<div class="mt-4">
|
||
<button
|
||
id="unpublish-all-posts-submit-btn"
|
||
class="c-btn c-btn--destructive c-btn--primary"
|
||
data-user-id="402414">
|
||
Unpublish all posts
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="unpublish-post-modal" class="hidden">
|
||
<p>
|
||
Once unpublished, this post will become invisible to the public and only accessible to Sunil Joshi.
|
||
</p>
|
||
<p>They can still re-publish the post if they are not suspended.</p>
|
||
<div class="mt-4">
|
||
<button
|
||
destructive
|
||
variant="primary"
|
||
class="c-btn c-btn--primary c-btn--destructive"
|
||
id="confirm-unpublish-post-action">
|
||
Unpublish Post
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="flag-user-modal-content" class="hidden">
|
||
<p>
|
||
Thanks for keeping DEV Community 👩💻👨💻 safe. Here is what you can do to flag suniljoshi19:
|
||
</p>
|
||
|
||
<div class="crayons-field crayons-field--radio mt-4">
|
||
<input
|
||
type="radio"
|
||
id="flag-user-radio-input"
|
||
name="flag-user-radio-input"
|
||
class="crayons-radio"
|
||
data-reactable-id="402414"
|
||
data-category="vomit"
|
||
data-reactable-type="User" />
|
||
<label for="flag-user-radio-input" class="crayons-field__label">
|
||
Make all posts by suniljoshi19 less visible
|
||
<p class="crayons-field__description">
|
||
suniljoshi19 consistently posts content that violates DEV Community 👩💻👨💻's
|
||
code of conduct because it is harassing, offensive or spammy.
|
||
</p>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="mt-4">
|
||
<a
|
||
href="javascript:void(0);"
|
||
id="report-inappropriate-content"
|
||
data-report-abuse-link="/report-abuse?url=https://dev.to/suniljoshi19/20-best-css-animation-resources-1fdf">
|
||
Report other inappropriate conduct
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mt-6">
|
||
<p
|
||
id="unselected-radio-error"
|
||
data-testid="unselected-radio-error"
|
||
class="crayons-field__description mb-4"
|
||
style="color: red;"
|
||
aria-live="assertive">
|
||
</p>
|
||
<button
|
||
id="confirm-flag-user-action"
|
||
class="c-btn c-btn--primary c-btn--destructive"
|
||
data-category="vomit"
|
||
data-reactable-type="User"
|
||
data-user-id="402414"
|
||
data-username="suniljoshi19">
|
||
Confirm Flag
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="unflag-user-modal-content" class="hidden">
|
||
<p>
|
||
Unflagging suniljoshi19 will restore default visibility to their posts.
|
||
</p>
|
||
|
||
<div class="mt-6">
|
||
<button
|
||
id="confirm-unflag-user-action"
|
||
class="c-btn c-btn--primary"
|
||
data-category="vomit"
|
||
data-reactable-type="User"
|
||
data-user-id="402414"
|
||
data-username="suniljoshi19">
|
||
Confirm Unflag
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="fullscreen-code js-fullscreen-code"></div>
|
||
<script src="https://dev.to/packs/js/runtime~followButtons-b2ec6f081f1bd033da22.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/7-39e97a9b1ae6d662603d.chunk.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/followButtons-59484fc57088dbed5a58.chunk.js" defer="defer"></script>
|
||
|
||
<script>
|
||
var waitingOnPodcast = setInterval(function() {
|
||
if (typeof initializePodcastPlayback !== 'undefined') {
|
||
initializePodcastPlayback();
|
||
clearInterval(waitingOnPodcast);
|
||
}
|
||
}, 1);
|
||
|
||
if (document.head.querySelector('meta[name="user-signed-in"][content="true"]')) {
|
||
function displayPollResults(json) {
|
||
var totalVotes = json.voting_data.votes_count;
|
||
json.voting_data.votes_distribution.forEach(function(point) {
|
||
var pollOptionItem = document.getElementById('poll_option_list_item_'+point[0]);
|
||
var optionText = document.getElementById('poll_option_label_'+point[0]).textContent;
|
||
if (json.user_vote_poll_option_id === point[0]) {
|
||
var votedClass = 'optionvotedfor'
|
||
} else {
|
||
var votedClass = 'optionnotvotedfor'
|
||
}
|
||
if (totalVotes === 0) {
|
||
var percent = 0;
|
||
} else {
|
||
var percent = (point[1]/totalVotes)*100;
|
||
}
|
||
var roundedPercent = Math.round( percent * 10 ) / 10
|
||
var percentFromRight = (100-roundedPercent)
|
||
var html = '<span><span class="ltag-votepercent ltag-'+votedClass+'" style="right:'+percentFromRight+'%"></span> <span class="ltag-votepercenttext">'+optionText+' — '+roundedPercent+'%</span></span>';
|
||
pollOptionItem.innerHTML = html;
|
||
pollOptionItem.classList.add('already-voted')
|
||
document.getElementById('showmethemoney-'+json.poll_id).innerHTML = '<span class="ltag-voting-results-count">'+totalVotes+' total votes</span>';
|
||
})
|
||
}
|
||
|
||
var polls = document.getElementsByClassName('ltag-poll');
|
||
for (var i = 0; i < polls.length; i += 1) {
|
||
var poll = polls[i]
|
||
var pollId = poll.dataset.pollId
|
||
window.fetch('/poll_votes/'+pollId)
|
||
.then(function(response){
|
||
response.json().then(
|
||
function(json) {
|
||
if (json.voted) {
|
||
displayPollResults(json)
|
||
} else {
|
||
var els = document.getElementById('poll_'+json.poll_id).getElementsByClassName('ltag-polloption');
|
||
|
||
for (i = 0; i < els.length; i += 1) {
|
||
els[i].addEventListener('click', function(e) {
|
||
var tokenMeta = document.querySelector("meta[name='csrf-token']")
|
||
if (!tokenMeta) {
|
||
alert('Whoops. There was an error. Your vote was not counted. Try refreshing the page.')
|
||
return
|
||
}
|
||
var csrfToken = tokenMeta.getAttribute('content')
|
||
var optionId = e.target.dataset.optionId
|
||
window.fetch('/poll_votes', {
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRF-Token': csrfToken,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({poll_vote: { poll_option_id: optionId } }),
|
||
credentials: 'same-origin',
|
||
}).then(function(response){
|
||
response.json().then(function(j){displayPollResults(j)})
|
||
})
|
||
});
|
||
}
|
||
|
||
document.getElementById('showmethemoney-'+json.poll_id).addEventListener('click', function() {
|
||
pollId = this.dataset.pollId
|
||
window.fetch('/poll_skips', {
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRF-Token': csrfToken,
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({poll_skip: {poll_id: pollId }}),
|
||
credentials: 'same-origin',
|
||
}).then(function(response){
|
||
response.json().then(function(j){displayPollResults(j)})
|
||
})
|
||
});
|
||
}
|
||
}
|
||
)
|
||
})
|
||
}
|
||
} else {
|
||
var els = document.getElementsByClassName('ltag-poll')
|
||
for (i = 0; i < els.length; i += 1) {
|
||
els[i].onclick = function(e) {
|
||
if (typeof showLoginModal !== "undefined") {
|
||
showLoginModal();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function activateRunkitTags() {
|
||
if (!areAnyRunkitTagsPresent())
|
||
return
|
||
|
||
var checkRunkit = setInterval(function() {
|
||
try {
|
||
dynamicallyLoadRunkitLibrary()
|
||
|
||
if (typeof(RunKit) === 'undefined') {
|
||
return
|
||
}
|
||
|
||
replaceTagContentsWithRunkitWidget()
|
||
clearInterval(checkRunkit);
|
||
} catch(e) {
|
||
console.error(e);
|
||
clearInterval(checkRunkit);
|
||
}
|
||
}, 200);
|
||
}
|
||
|
||
function isRunkitTagAlreadyActive(runkitTag) {
|
||
return runkitTag.querySelector("iframe") !== null;
|
||
};
|
||
|
||
function areAnyRunkitTagsPresent() {
|
||
var presentRunkitTags = document.getElementsByClassName("runkit-element");
|
||
|
||
return presentRunkitTags.length > 0
|
||
}
|
||
|
||
function replaceTagContentsWithRunkitWidget() {
|
||
var targets = document.getElementsByClassName("runkit-element");
|
||
for (var i = 0; i < targets.length; i++) {
|
||
if (isRunkitTagAlreadyActive(targets[i])) {
|
||
continue;
|
||
}
|
||
|
||
var wrapperContent = targets[i].textContent;
|
||
if (/^(<iframe src)/.test(wrapperContent) === false) {
|
||
if (targets[i].children.length > 0) {
|
||
var preamble = targets[i].children[0].textContent;
|
||
var content = targets[i].children[1].textContent;
|
||
targets[i].innerHTML = "";
|
||
var notebook = RunKit.createNotebook({
|
||
element: targets[i],
|
||
source: content,
|
||
preamble: preamble
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
function dynamicallyLoadRunkitLibrary() {
|
||
if (typeof(dynamicallyLoadScript) === "undefined")
|
||
return
|
||
|
||
dynamicallyLoadScript("//embed.runkit.com")
|
||
}
|
||
|
||
activateRunkitTags();
|
||
|
||
var videoPreviews = document.getElementsByClassName("ltag__twitter-tweet__media__video-wrapper");
|
||
[].forEach.call(videoPreviews, function(el) {
|
||
el.onclick = function(e) {
|
||
var divHeight = el.offsetHeight;
|
||
el.style.maxHeight = divHeight + "px";
|
||
el.getElementsByClassName("ltag__twitter-tweet__media--video-preview")[0].style.display = "none";
|
||
el.getElementsByClassName("ltag__twitter-tweet__video")[0].style.display = "block";
|
||
el.getElementsByTagName("video")[0].play();
|
||
}
|
||
});
|
||
var tweets = document.getElementsByClassName("ltag__twitter-tweet__main");
|
||
[].forEach.call(tweets, function(tweet){
|
||
tweet.onclick = function(e) {
|
||
if (e.target.nodeName == "A" || e.target.parentElement.nodeName == "A") {
|
||
return;
|
||
}
|
||
window.open(tweet.dataset.url,"_blank");
|
||
}
|
||
});
|
||
|
||
</script>
|
||
|
||
<div id="runtime-banner-container"></div>
|
||
</div>
|
||
</div>
|
||
<footer class="crayons-footer print-hidden">
|
||
<div id="footer-container" class="crayons-footer__container">
|
||
<p class="fs-s crayons-footer__description">
|
||
<a class="c-link c-link--branded fw-medium" aria-label="DEV Community 👩💻👨💻 Home" href="/">DEV Community 👩💻👨💻</a> — A constructive and inclusive social network for software developers. With you every step of your journey.
|
||
</p>
|
||
<div class="fs-s">
|
||
<p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p>
|
||
<p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community 👩💻👨💻 <span title="copyright">©</span> 2016 - 2022.</p>
|
||
</div>
|
||
<a href="https://www.forem.com" target="_blank" rel="noopener" class="c-link c-link c-link--block c-link--icon-alone self-center">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-labelledby="a2zmmndgig7yfjibm5f7xebod7mx1qpe" class="crayons-icon crayons-icon--default c-link__icon"><title id="a2zmmndgig7yfjibm5f7xebod7mx1qpe">Forem logo</title>
|
||
<g clip-path="url(#clip0)" fill="#1AB3A6">
|
||
<path d="M4.603 1.438a8.056 8.056 0 017.643 5.478 8.543 8.543 0 00-3.023 5.968H8.054C3.606 12.884 0 9.296 0 4.87V1.468a.03.03 0 01.03-.03h4.573zM23.97 6.515a.03.03 0 01.03.03v2.833c0 4.11-3.354 7.442-7.491 7.442h-2.881v5.726h-2.305V14.53l.022-1.145c.294-3.843 3.526-6.87 7.469-6.87h5.155z"></path>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0">
|
||
<path fill="#fff" d="M0 0h24v24H0z"></path>
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
|
||
</a>
|
||
</div>
|
||
</footer>
|
||
<div id="snack-zone"></div>
|
||
|
||
<div id="global-signup-modal" class="authentication-modal hidden">
|
||
<div class="authentication-modal__container">
|
||
<figure class="authentication-modal__image-container">
|
||
<img class="authentication-modal__image" src="https://res.cloudinary.com/practicaldev/image/fetch/s--pcSkTMZL--/c_limit,f_auto,fl_progressive,q_80,w_190/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png"
|
||
alt="DEV Community 👩💻👨💻" loading="lazy" />
|
||
</figure>
|
||
<div class="authentication-modal__content">
|
||
<p class="authentication-modal__description">
|
||
We're a place where coders share, stay up-to-date and grow their careers.
|
||
</p>
|
||
</div>
|
||
<div class="authentication-modal__actions">
|
||
<a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant>
|
||
Log in
|
||
</a>
|
||
<a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant>
|
||
Create account
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://dev.to/packs/js/runtime~signupModalShortcuts-b9beb5ee6e65857034c5.js" defer="defer"></script>
|
||
<script src="https://dev.to/packs/js/signupModalShortcuts-9d9e280d24d3403628af.chunk.js" defer="defer"></script>
|
||
|
||
<div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings."}}}"></div>
|
||
</body>
|
||
</html>
|