{"id":59942,"date":"2018-05-03T17:06:54","date_gmt":"2018-05-03T11:36:54","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59942"},"modified":"2024-04-12T14:20:51","modified_gmt":"2024-04-12T08:50:51","slug":"angular-keyframe-animations","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/","title":{"rendered":"Angular Keyframe Animations"},"content":{"rendered":"<h1>Angular Keyframe Animations<\/h1>\n<p>Angular Keyframe Animations Triggers<\/p>\n<p>Remember when we imported a trigger function up top? The trigger Angular Keyframe Animations function is the starting point of each unique animation.<\/p>\n<p>The first argument accepts the name of the animation, and the second argument accepts all of the other functions that we imported.<\/p>\n<p>So, within the animations property of the component decorator, we add:<\/p>\n<p>animations: [<br \/>\ntrigger(&#8216;myAwesomeAnimation&#8217;, [<\/p>\n<p>]),<br \/>\n]\n<p>Notice the comma after the trigger function? That&#8217;s there so that you can define multiple animations, each with unique names defined within the first argument.<\/p>\n<p>Next up are Angular Keyframe Animations states.<br \/>\nAngular Keyframe Animations States &amp; Styles<\/p>\n<p>The state function allows you to define different states that you can call and transition between. The first argument accepts a unique name, and the second argument accepts the style function.<\/p>\n<p>The style function allows you to apply an object with web Angular Keyframe Animations property names and associated values.<\/p>\n<p>So, expanding on our previous example:<\/p>\n<p>animations: [<br \/>\ntrigger(&#8216;myAwesomeAnimation&#8217;, [<br \/>\nstate(&#8216;small&#8217;, style({<br \/>\ntransform: &#8216;scale(1)&#8217;,<br \/>\n})),<br \/>\nstate(&#8216;large&#8217;, style({<br \/>\ntransform: &#8216;scale(1.2)&#8217;,<br \/>\n})),<br \/>\n]),<br \/>\n]\n<p>We have 2 different states where the scale property is going from a default size of 1, to 1.2. Next up is the transition function.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"VSKILLbodytext\"><strong>IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n<p><a href=\"https:\/\/www.vskills.in\/certification\/web-development\/angular-4-certification\" rel=\"attachment wp-att-61497\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-61497\" src=\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" srcset=\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png 1050w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-300x48.png 300w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-768x124.png 768w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-1024x165.png 1024w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-712x115.png 712w\" alt=\"\" width=\"1050\" height=\"169\" \/><\/a><\/p>\n<ul>\n<li class=\"VSKILLbodytext\"><a href=\"https:\/\/www.vskills.in\/practice\/skills\/Web-Development\/Angular-4\" target=\"_blank\" rel=\"noopener\">Practice Test for Angular4 <\/a><\/li>\n<li class=\"VSKILLbodytext\"><a href=\"https:\/\/www.vskills.in\/certification\/web-development\/angular-4-certification\" target=\"_blank\" rel=\"noopener\">Govt Certification in Angular 4<\/a><\/li>\n<li><a href=\"https:\/\/www.vskills.in\/certification\/blog\/\">Blog posts on Angular 4 and Web Development<\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/web-development\/angular-4\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-55483 size-full\" src=\"http:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/05\/Back-Arrow.jpg\" alt=\"Angular 4 Tutorial Index\" width=\"47\" height=\"52\" \/>Back to Angular 4 Tutorial Main Page <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular Keyframe Animations Angular Keyframe Animations Triggers Remember when we imported a trigger function up top? The trigger Angular Keyframe Animations function is the starting point of each unique animation. The first argument accepts the name of the animation, and the second argument accepts all of the other functions that we imported. So, within the&#8230;<\/p>\n","protected":false},"author":10,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[7230,7231,5743],"tags":[7221,7227,7235,7421,7425,7236,7226,7234,7427,7426,7232,7223,7233],"class_list":["post-59942","page","type-page","status-publish","hentry","category-angular-2","category-angular-4","category-web-development","tag-angular","tag-angular-4","tag-angular-4-tutorial","tag-angular-animation","tag-angular-animations","tag-angular-cli","tag-angular-js","tag-angular-js-tutorial","tag-angular-keyframe-animation","tag-angular-keyframe-animations","tag-angular-tutorial","tag-angularjs","tag-angularjs-tutorial"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular Keyframe Animations - Tutorial<\/title>\n<meta name=\"description\" content=\"Angular Keyframe Animations: The trigger Angular Keyframe Animations function is the starting point of each unique animation. Click here.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Keyframe Animations - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Angular Keyframe Animations: The trigger Angular Keyframe Animations function is the starting point of each unique animation. Click here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:50:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/\",\"name\":\"Angular Keyframe Animations - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\",\"datePublished\":\"2018-05-03T11:36:54+00:00\",\"dateModified\":\"2024-04-12T08:50:51+00:00\",\"description\":\"Angular Keyframe Animations: The trigger Angular Keyframe Animations function is the starting point of each unique animation. Click here.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/#primaryimage\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\",\"width\":1050,\"height\":169},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Keyframe Animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Keyframe Animations - Tutorial","description":"Angular Keyframe Animations: The trigger Angular Keyframe Animations function is the starting point of each unique animation. Click here.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/","og_locale":"en_US","og_type":"article","og_title":"Angular Keyframe Animations - Tutorial","og_description":"Angular Keyframe Animations: The trigger Angular Keyframe Animations function is the starting point of each unique animation. Click here.","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:50:51+00:00","og_image":[{"url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/","name":"Angular Keyframe Animations - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","datePublished":"2018-05-03T11:36:54+00:00","dateModified":"2024-04-12T08:50:51+00:00","description":"Angular Keyframe Animations: The trigger Angular Keyframe Animations function is the starting point of each unique animation. Click here.","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/#primaryimage","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","width":1050,"height":169},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-keyframe-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Angular Keyframe Animations"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/59942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=59942"}],"version-history":[{"count":5,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/59942\/revisions"}],"predecessor-version":[{"id":64264,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/59942\/revisions\/64264"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=59942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=59942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=59942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}