--- title: AnimatiSS - A nice, colorful collection of CSS animations description: AnimatiSS is a tool to preview custom CSS animations and grab their code with a simple click, to paste it into your own web projects. canonical: https://daily.dev/posts/animatiss---a-nice-colorful-collection-of-css-animations-xtcnf9c6x twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: AnimatiSS - A nice, colorful collection of CSS animations | daily.dev og:description: AnimatiSS is a tool to preview custom CSS animations and grab their code with a simple click, to paste it into your own web projects. og:url: https://daily.dev/posts/animatiss---a-nice-colorful-collection-of-css-animations-xtcnf9c6x og:image: https://api.daily.dev/og/posts/XtCnF9C6x.png og:image:alt: AnimatiSS - A nice, colorful collection of CSS animations og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # AnimatiSS - A nice, colorful collection of CSS animations **[Product Hunt](https://daily.dev/sources/ph)** · 1 min read · 201 upvotes · 7 comments ## Summary AnimatiSS is a tool to preview custom CSS animations and grab their code with a simple click, to paste it into your own web projects. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@lorezz** · 1 upvotes > nice, needs a search imho **@tobiwe94** · 0 upvotes > Various types of CSS animations to try out, configure and copy. **@bytefer** · 0 upvotes > Nice， This website provides ten animation effects such as scale up, scale down, rote, swing, slide shadow, etc. We can adjust the timing of each animation, preview each animation, and copy the corresponding CSS code. **@cecdo** · 0 upvotes > nice **@anathu** · 0 upvotes > Nice ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#general-programming](https://daily.dev/tags/general-programming) [View this post on daily.dev](https://daily.dev/posts/animatiss---a-nice-colorful-collection-of-css-animations-xtcnf9c6x) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"AnimatiSS - A nice, colorful collection of CSS animations","url":"https://daily.dev/posts/animatiss---a-nice-colorful-collection-of-css-animations-xtcnf9c6x","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/animatiss---a-nice-colorful-collection-of-css-animations-xtcnf9c6x"},"datePublished":"2022-05-24T07:20:06.539Z","dateModified":"2026-03-15T03:42:27.082Z","description":"AnimatiSS is a tool to preview custom CSS animations and grab their code with a simple click, to paste it into your own web projects.","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/0821edd6314840e706166d2fcc0bee01","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/0821edd6314840e706166d2fcc0bee01","isAccessibleForFree":true,"articleSection":"Product Hunt","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Product Hunt","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/ph","url":"https://daily.dev/sources/ph"},"commentCount":7,"discussionUrl":"https://daily.dev/posts/animatiss---a-nice-colorful-collection-of-css-animations-xtcnf9c6x","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":201},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":7}],"keywords":"css,general-programming","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Product Hunt","item":"https://daily.dev/sources/ph"},{"@type":"ListItem","position":3,"name":"AnimatiSS - A nice, colorful collection of CSS animations"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/animatiss---a-nice-colorful-collection-of-css-animations-xtcnf9c6x","comment":[{"@type":"Comment","text":"nice, needs a search imho","datePublished":"2022-05-25T06:02:49.137Z","dateModified":"2022-05-25T06:03:13.621Z","url":"https://daily.dev/posts/XtCnF9C6x#c-OjDVs0Rx-","author":{"@type":"Person","name":"lorezz","url":"https://daily.dev/lorezz","image":"https://avatars0.githubusercontent.com/u/1153066?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Various types of CSS animations to try out, configure and copy.","datePublished":"2022-05-31T06:34:43.722Z","url":"https://daily.dev/posts/XtCnF9C6x#c-cM_2wvFOa","author":{"@type":"Person","name":"Tobias Weiss","url":"https://daily.dev/tobiwe94","image":"https://lh3.googleusercontent.com/a-/AOh14GitzCQuAAAHrnIP4KAAZB-iWRbjxZuBxlTpH2uVu4B9r8NtWhcdePzI-oOBrdG8O2Cxk6vz1Vc9d7GzUy2zMiYNNcyAb2MiPtwFV0joC1Fdj5kqJEKetuQBKeU-h0D4k66c8IqgIeiAfdP1UCKgnpLIBLj-dUuLQALw7G48tTVuY67IWOMcVCbVVG8PcVpSnuGjNIELF_gRWgENHQJ172GYAkPOfBoomVnuapfPEg89ppIXaPqkTUfEqAV0QZRCuQeseAaHXhRNNibHIjvIcITQNSz2kUBSnvEclgkEMPtmfxZiRfqOW5EYjkO16ZIlGaRPs9-sjMdQ60Krpi5i9g1b3tZlJ6toVo0X-Ue2O8ejjmWMUoN4X9XjlpYVmtCu2I4OGcElFioxIWCCqxNOsX499m6qlcY6CeHILY5sSrRLwyGVTdhO0PIDeirUrGWfCEeWtYZUcm3vRF2nlDTC7R7yapzMhdpHTMFKmpOc7me6-1r4Vg9-_Tm1HvAB0PO8jcVQwxkq5lAIlXXa95IV_zzMtxG4YEE1nmx3R9alabSQIOXvgE_xRRWdopi1PbDtgTRTzhi9r3yFVmgoWuVrqb579PF8N_Hk-prF-9COCLKI7_8NORxUniNv2qW0HYeHmdzeZft94JXUMoOWEI0NY5Cm5SlJzv-eu-FXsqCcqONDzqhIn70jWAFyrbGlsa4YN-bHRhR7vPAR4Xl2d4-1Ul7nYEphXn3rCJ_hteT0aecEyq2pJx40Re2Q35eVt59TgTTAdg=s100"}},{"@type":"Comment","text":"Nice， This website provides ten animation effects such as scale up, scale down, rote, swing, slide shadow, etc. We can adjust the timing of each animation, preview each animation, and copy the corresponding CSS code.","datePublished":"2022-08-03T05:45:47.730Z","dateModified":"2022-08-03T05:46:12.618Z","url":"https://daily.dev/posts/XtCnF9C6x#c-sgQAu_9fe","author":{"@type":"Person","name":"bytefer","url":"https://daily.dev/bytefer","image":"https://lh3.googleusercontent.com/a-/AFdZucqlbOI8UzgORH9IT5mtLClCpRPYl-bBI9zaDVVd=s100"}},{"@type":"Comment","text":"nice","datePublished":"2022-05-31T07:26:54.819Z","url":"https://daily.dev/posts/XtCnF9C6x#c-3ZHhqJbSL","author":{"@type":"Person","name":"Cec DO","url":"https://daily.dev/cecdo","image":"https://avatars.githubusercontent.com/u/83503701?v=4"}},{"@type":"Comment","text":"Nice","datePublished":"2022-09-19T04:21:54.699Z","url":"https://daily.dev/posts/XtCnF9C6x#c-jXpHhN4cY","author":{"@type":"Person","name":"Ananthu K - iRoid","url":"https://daily.dev/anathu","image":"https://lh3.googleusercontent.com/a-/AFdZucqybRPnEaf0C4X-_L8HE3IVq6ACAVwCSLjCNyav7Q=s100"}}]} ```