[et_pb_section fb_built=”1″ fullwidth=”on” admin_label=”Header” _builder_version=”4.20.0″ use_background_color_gradient=”on” background_color_gradient_direction=”163deg” background_color_gradient_stops=”rgba(0,0,0,0.02) 50%|#ffffff 50%” background_color_gradient_start=”rgba(0,0,0,0.02)” background_color_gradient_start_position=”50%” background_color_gradient_end=”#ffffff” background_color_gradient_end_position=”0%” background_image=”https:\/\/kamil-abzalov.com\/wp-content\/uploads\/2021\/12\/web-dev-03.png” parallax=”on” animation_style=”fade” collapsed=”off” global_colors_info=”{}”][et_pb_fullwidth_header title=”Animations in Angular” content_max_width=”640px” _builder_version=”4.27.6″ title_font=”Roboto|700|||||||” title_line_height=”1.5em” content_font=”Roboto||||||||” content_font_size=”16px” content_line_height=”2em” subhead_font=”|700||on|||||” subhead_font_size=”14px” subhead_letter_spacing=”2px” subhead_line_height=”2em” background_color=”rgba(0,0,0,0)” custom_button_one=”on” button_one_text_size=”14px” button_one_text_color=”#ffffff” button_one_bg_color=”#0054ff” button_one_border_width=”14px” button_one_border_color=”rgba(0,0,0,0)” button_one_border_radius=”0px” button_one_letter_spacing=”2px” button_one_font=”|600||on|||||” button_one_icon=”9||divi||400″ button_one_on_hover=”off” custom_button_two=”on” button_two_text_size=”14px” button_two_text_color=”#0054ff” button_two_bg_color=”rgba(255,255,255,0)” button_two_border_width=”12px” button_two_border_color=”rgba(0,0,0,0)” button_two_border_radius=”0px” button_two_letter_spacing=”2px” button_two_font=”|600||on|||||” button_two_icon=”9||divi||400″ button_two_on_hover=”off” background_layout=”light” custom_margin=”|||” custom_padding=”6vw||6vw||false|false” animation_style=”zoom” animation_intensity_zoom=”-5%” title_font_size_tablet=”” title_font_size_phone=”25px” title_font_size_last_edited=”on|desktop” box_shadow_style_button_two=”preset1″ box_shadow_vertical_button_two=”0px” box_shadow_blur_button_two=”0px” box_shadow_spread_button_two=”2px” box_shadow_color_button_two=”#0054ff” button_one_letter_spacing_hover=”2px” button_two_letter_spacing_hover=”2px” global_colors_info=”{}” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”on” button_one_letter_spacing__hover=”2px” button_two_letter_spacing__hover_enabled=”on” button_two_letter_spacing__hover=”2px” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.21.2″ _module_preset=”default” collapsed=”off” global_colors_info=”{}”][et_pb_row _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=”Home” hide_currentbreadcrumb=”off” _builder_version=”4.27.6″ hover_enabled=”0″ fontsbreadcrumbs_font_size_tablet=”51″ fontsbreadcrumbs_line_height_tablet=”2″ fontsseperator_font_size_tablet=”51″ fontsseperator_line_height_tablet=”2″ fontsbreadcrumblinks_font_size_tablet=”51″ fontsbreadcrumblinks_line_height_tablet=”2″ z_index_tablet=”500″ fontsbreadcrumbs_text_shadow_horizontal_length_tablet=”0px” fontsbreadcrumbs_text_shadow_vertical_length_tablet=”0px” fontsbreadcrumbs_text_shadow_blur_strength_tablet=”1px” fontsseperator_text_shadow_horizontal_length_tablet=”0px” fontsseperator_text_shadow_vertical_length_tablet=”0px” fontsseperator_text_shadow_blur_strength_tablet=”1px” fontsbreadcrumblinks_text_shadow_horizontal_length_tablet=”0px” fontsbreadcrumblinks_text_shadow_vertical_length_tablet=”0px” fontsbreadcrumblinks_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}” sticky_enabled=”0″][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=”4.27.6″ z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]In this video, we’ll explore how to use animations in Angular. Since Angular now recommends using native CSS animations, we’ll cover CSS transitions, transforms, and animations.<\/p>\n
Angular has its own package, @angular\/animations<\/a>, which is based on the Web Animations API<\/a>. However, it has been deprecated since Angular 20. That’s why Angular now recommends using native CSS animations instead.[\/et_pb_text][et_pb_video src=”https:\/\/youtu.be\/18L1BqZb9Ww” disabled_on=”off|off|off” _builder_version=”4.27.6″ global_colors_info=”{}”][\/et_pb_video][et_pb_dmb_code_snippet title=”app.ts” code=”aW1wb3J0IHsKICBDb21wb25lbnQsCiAgY29tcHV0ZWQsCiAgaW5qZWN0LAogIEluamVjdG9yLAogIGxpbmtlZFNpZ25hbCwKICBPbkluaXQsCiAgU2lnbmFsLAogIHNpZ25hbCwKICBXcml0YWJsZVNpZ25hbCwKfSBmcm9tICdAYW5ndWxhci9jb3JlJzsKaW1wb3J0IHsgTWF0VG9vbGJhciB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3Rvb2xiYXInOwppbXBvcnQgeyBVc2Vyc1NlcnZpY2UgfSBmcm9tICcuL2ZlYXR1cmVzL3VzZXJzL3NlcnZpY2VzL3VzZXJzLXNlcnZpY2UnOwppbXBvcnQgeyBVc2VyRHRvIH0gZnJvbSAnLi9jb3JlL21vZGVscy9Vc2VyJzsKaW1wb3J0IHsgQXN5bmNQaXBlLCBKc29uUGlwZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7CmltcG9ydCB7IHRvU2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnOwppbXBvcnQgeyBVc2VyQ2FyZCB9IGZyb20gJy4vdXNlci1jYXJkL3VzZXItY2FyZCc7CmltcG9ydCB7IE1hdEJ1dHRvbiB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2J1dHRvbic7CgpAQ29tcG9uZW50KHsKICBzZWxlY3RvcjogJ2FwcC1yb290JywKICBpbXBvcnRzOiBbTWF0VG9vbGJhciwgSnNvblBpcGUsIFVzZXJDYXJkLCBNYXRCdXR0b25dLAogIHRlbXBsYXRlVXJsOiAnLi9hcHAuaHRtbCcsCiAgc3R5bGVVcmw6ICcuL2FwcC5zY3NzJywKfSkKZXhwb3J0IGNsYXNzIEFwcCBpbXBsZW1lbnRzIE9uSW5pdCB7CiAgcHJvdGVjdGVkIHRpdGxlID0gJ2FuZ3VsYXItbWF0ZXJpYWwtYXBwJzsKCiAgcHJvdGVjdGVkIG15QWdlOiBXcml0YWJsZVNpZ25hbDxudW1iZXI+ID0gc2lnbmFsKDM1KTsKCiAgcHJvdGVjdGVkIHBlcnNvbmFsSW5mbzogU2lnbmFsPHN0cmluZz4gPSBjb21wdXRlZCgoKSA9PiBgTXkgYWdlIGlzICR7dGhpcy5teUFnZSgpfWApOwoKICBwcml2YXRlIHVzZXJTZXJ2aWNlID0gaW5qZWN0KFVzZXJzU2VydmljZSk7CgogIHNoaXBwaW5nT3B0aW9ucyA9IHNpZ25hbDxhbnlbXT4oWwogICAgeyBpZDogMCwgbmFtZTogJ0dyb3VuZCcgfSwKICAgIHsgaWQ6IDEsIG5hbWU6ICdBaXInIH0sCiAgICB7IGlkOiAyLCBuYW1lOiAnU2VhJyB9LAogIF0pOwogIHNlbGVjdGVkT3B0aW9uID0gbGlua2VkU2lnbmFsPGFueVtdLCBhbnk+KHsKICAgIC8vIGBzZWxlY3RlZE9wdGlvbmAgaXMgc2V0IHRvIHRoZSBgY29tcHV0YXRpb25gIHJlc3VsdCB3aGVuZXZlciB0aGlzIGBzb3VyY2VgIGNoYW5nZXMuCiAgICBzb3VyY2U6IHRoaXMuc2hpcHBpbmdPcHRpb25zLAogICAgY29tcHV0YXRpb246IChuZXdPcHRpb25zLCBwcmV2aW91cykgPT4gewogICAgICAvLyBJZiB0aGUgbmV3T3B0aW9ucyBjb250YWluIHRoZSBwcmV2aW91c2x5IHNlbGVjdGVkIG9wdGlvbiwgcHJlc2VydmUgdGhhdCBzZWxlY3Rpb24uCiAgICAgIC8vIE90aGVyd2lzZSwgZGVmYXVsdCB0byB0aGUgZmlyc3Qgb3B0aW9uLgogICAgICBjb25zb2xlLmxvZyhuZXdPcHRpb25zLCBwcmV2aW91cyk7CiAgICAgIHJldHVybiBuZXdPcHRpb25zLmZpbmQoKG9wdCkgPT4gb3B0LmlkID09PSBwcmV2aW91cz8udmFsdWUuaWQpID8\/IG5ld09wdGlvbnNbMF07CiAgICB9LAogIH0pOwogIHByb3RlY3RlZCB1c2VyczogU2lnbmFsPFVzZXJEdG9bXT4gPSBzaWduYWwoW10pOwogIHByaXZhdGUgaW5qZWN0b3IgPSBpbmplY3QoSW5qZWN0b3IpOwoKICBwcm90ZWN0ZWQgc2hvd05vdGljZTogV3JpdGFibGVTaWduYWw8Ym9vbGVhbj4gPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpOwoKICBwdWJsaWMgbmdPbkluaXQoKSB7CiAgICB0aGlzLnVzZXJzID0gdG9TaWduYWwodGhpcy51c2VyU2VydmljZS5nZXRVc2VycygpLCB7CiAgICAgIGluaXRpYWxWYWx1ZTogW10sCiAgICAgIGluamVjdG9yOiB0aGlzLmluamVjdG9yLAogICAgfSk7CiAgfQoKICBwcm90ZWN0ZWQgY2hhbmdlRGF0YSgpIHsKICAgIC8vIHRoaXMubXlBZ2Uuc2V0KDM2KTsKICAgIHRoaXMubXlBZ2UudXBkYXRlKChhZ2UpID0+IGFnZSArIDEpOwoKICAgIHRoaXMuc2VsZWN0ZWRPcHRpb24uc2V0KHsgaWQ6IDEsIG5hbWU6ICdQaWRnaW4nIH0pOwogIH0KCiAgcHJvdGVjdGVkIHRvZ2dsZU5vdGljZSgpIHsKICAgIHRoaXMuc2hvd05vdGljZS51cGRhdGUoKHNob3cpID0+ICFzaG93KTsKICB9Cn0K” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.6″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=”app.html” code=”PGhlYWRlcj4KICA8bWF0LXRvb2xiYXIgY29sb3I9InByaW1hcnkiPgogICAgPHNwYW4+TXkgQXBwPC9zcGFuPgogIDwvbWF0LXRvb2xiYXI+CjwvaGVhZGVyPgoKPCEtLTxpbWcgc3JjPSJodHRwczovL3BsYWNlY2F0cy5jb20vMzAwLzMwMCIgYWx0PSJBbmd1bGFyIGxvZ28iIC8+LS0+Cgo8YnV0dG9uIChjbGljayk9InRvZ2dsZU5vdGljZSgpIiBtYXQtcmFpc2VkLWJ1dHRvbiBjb2xvcj0idGVydGlhcnkiPkNsaWNrIG1lPC9idXR0b24+CgoKQGlmKHNob3dOb3RpY2UoKSkgewogIDxkaXYgY2xhc3M9Im5vdGljZSI+CiAgICBOb3RpY2UgdGV4dAogIDwvZGl2Pgp9CgpAaWYoc2hvd05vdGljZSgpKSB7CiAgPGRpdiBjbGFzcz0iZ3JlZXRpbmciIGFuaW1hdGUuZW50ZXI9ImdyZWV0aW5nLWluIiBhbmltYXRlLmxlYXZlPSJncmVldGluZy1vdXQiPkdyZWV0aW5nPC9kaXY+Cn0KCg==” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.6″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_dmb_code_snippet][et_pb_dmb_code_snippet title=”app.scss” code=”Ly8gdHJhbnNpdG9ucwovLyBhbmltYXRpb25zCgoKaW1nIHsKICB0cmFuc2l0aW9uOiBhbGwgMC4zcyBlYXNlLWluLW91dDsKICAvL3RyYW5zaXRpb24tcHJvcGVydHk6IGFsbDsKICAvL3RyYW5zaXRpb24tZHVyYXRpb246IC43czsKICAvL3RyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKfQoKaW1nOmhvdmVyIHsKICAvL3RyYW5zaXRpb24tcHJvcGVydHk6IGFsbDsKICAvL3RyYW5zaXRpb24tZHVyYXRpb246IC4zczsKICAvL3RyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKICAvL3RyYW5zaXRpb24tZGVsYXk6IDJzOwogIGJvcmRlci1yYWRpdXM6IDUwJTsKICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpIHNjYWxlKDAuNSk7Cn0KCi5ub3RpY2UgewogIGJvcmRlcjogMXB4IHNvbGlkIHJlZDsKICBoZWlnaHQ6IDEwMHB4OwogIGFuaW1hdGlvbjogbm90aWNlIC41cyBlYXNlLWluLW91dDsKICAvLyBhbmltYXRpb24tbmFtZTogbm90aWNlOwogIC8vIGFuaW1hdGlvbi1kdXJhdGlvbjogLjVzOwogIC8vIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW4tb3V0OwogIC8vIGFuaW1hdGlvbi1kZWxheTogMnM7CiAgLy8gYW5pbWF0aW9uLWl0ZXJhdGlvbi1jb3VudDogMzsKICAvLyBhbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGU7CiAgLy8gYW5pbWF0aW9uLWZpbGwtbW9kZTogZm9yd2FyZHM7CiAgLy8gYW5pbWF0aW9uLXBsYXktc3RhdGU6IHJ1bm5pbmc7Cn0KCkBrZXlmcmFtZXMgbm90aWNlIHsKICAwJSB7CiAgICBoZWlnaHQ6IDA7CiAgfQoKICAxMDAlIHsKICAgIGhlaWdodDogMTAwcHg7CiAgfQp9CgovLyAxICAyCi8vIDQgIDMKCgouZ3JlZXRpbmcgewogIGJhY2tncm91bmQ6IGdyZWVuOwogIGNvbG9yOiByZWQ7CiAgdHJhbnNpdGlvbjogYWxsIC41cyBlYXNlLWluLW91dDsKCiAgJi1pbiB7CiAgICBvcGFjaXR5OiAuNTsKICB9CgogICYtb3V0IHsKICAgIG9wYWNpdHk6IDE7CiAgfQp9Cg==” copy_button=”on” copy_button_tooltip=”Copy code” _builder_version=”4.27.6″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=”4.21.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" In this video, we’ll explore how to use animations in Angular. Since Angular now recommends using native CSS animations, we’ll cover CSS transitions, transforms, and animations. Angular has its own package, @angular\/animations, which is based on the Web Animations API. However, it has been deprecated since Angular 20. That’s why Angular now recommends using native […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[256,219],"tags":[],"class_list":["post-36877","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tutorials"],"yoast_head":"\n