{"id":1901,"date":"2023-12-20T05:00:00","date_gmt":"2023-12-20T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1901"},"modified":"2023-12-19T15:01:23","modified_gmt":"2023-12-19T23:01:23","slug":"css-animation-generator","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/css-animation-generator\/","title":{"rendered":"CSS Animation Generator"},"content":{"rendered":"\n<p>The end of the year is getting closer and closer, and I realized I haven&#8217;t covered anything CSS-related in this newsletter yet! Let&#8217;s fix this today with a tool that makes generating CSS animations super easy: <a href=\"https:\/\/webcode.tools\/css-generator\/keyframe-animation#google_vignette\" target=\"_blank\" rel=\"noopener\" title=\"\">CSS generator<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"634\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/css-animation.gif\" alt=\"\" class=\"wp-image-1902\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>As you can see in the animation, you only need to select a type of animation, tweak some parameters, and then copy\/paste the provided CSS code into your app. This example shows you how I used that tool to animate all my <code>divs<\/code>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"611\" height=\"201\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-24.png\" alt=\"\" class=\"wp-image-1903\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-24.png 611w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/12\/image-24-300x99.png 300w\" sizes=\"auto, (max-width: 611px) 100vw, 611px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p> I created a <a href=\"https:\/\/stackblitz.com\/edit\/at-css-animation?description=An%20angular-cli%20project%20based%20on%20@angular\/animations,%20@angular\/common,%20@angular\/compiler,%20@angular\/core,%20@angular\/forms,%20@angular\/platform-browser,%20@angular\/platform-browser-dynamic,%20@angular\/router,%20core-js,%20rxjs,%20tslib%20and%20zone.js&amp;file=src%2Fmain.ts&amp;title=Angular%20Starter\" target=\"_blank\" rel=\"noopener\" title=\"\">quick example in Stackblitz <\/a>to see that code in an Angular app. Note that CSS generator can be used for other CSS purposes, such as tweaking <a href=\"https:\/\/webcode.tools\/css-generator\/border-radius\" target=\"_blank\" rel=\"noopener\" title=\"\">border-radius options<\/a>, <a href=\"https:\/\/webcode.tools\/css-generator\/opacity\" target=\"_blank\" rel=\"noopener\" title=\"\">opacity<\/a>, <a href=\"https:\/\/webcode.tools\/css-generator\/sepia\" title=\"\">sepia filters<\/a>, and more. It&#8217;s a great way to discover new CSS features and config options since CSS is probably the web language that has evolved the most over the past ten years.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The end of the year is getting closer and closer, and I realized I haven&#8217;t covered anything CSS-related in this newsletter yet! Let&#8217;s fix this today with a tool that makes generating CSS animations super easy: CSS generator. As you can see in the animation, you only need to select a type of animation, tweak [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1901","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1901"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1901\/revisions"}],"predecessor-version":[{"id":1904,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1901\/revisions\/1904"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}