{"id":1059,"date":"2016-10-07T11:32:46","date_gmt":"2016-10-07T09:32:46","guid":{"rendered":"http:\/\/blog.thecodecampus.de\/?p=1059"},"modified":"2023-12-20T20:32:37","modified_gmt":"2023-12-20T19:32:37","slug":"angular-2-animate-css-tutorial-use-animate-css-ng2-application","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/","title":{"rendered":"Angular 2 Animate.css Tutorial &#8211; How to use Animate.CSS in NG2 Application?"},"content":{"rendered":"<p>This Article will serve as a guide to implementing Animate.css animations with Angular 2 animation system.\u00a0Animate.css is a\u00a0popular and handy library for simple CSS Animations. We&#8217;ll apply the animation to a component and control it via a button. We will <strong>not<\/strong>\u00a0use ngClass but convert the Animate.css to fit Angular 2 Animate.<\/p>\n<p><strong>Final Result:<\/strong><\/p>\n<div style=\"position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden;\">\n<p><iframe loading=\"lazy\" width=\"300\" height=\"150\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/cankattwinkel.github.io\/anuglar-2-animate.css-example\/\">&nbsp;<\/p>\n<p><\/iframe><\/p>\n<\/div>\n<p><strong>Git Commits as Diff:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/CanKattwinkel\/anuglar-2-animate.css-example\/commit\/2f78f5023e0cf2629b978d7bc34e5415e9734bd5\" target=\"_blank\" rel=\"noopener\">Step 1<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/CanKattwinkel\/anuglar-2-animate.css-example\/commit\/e858635a1deaf9ba7923d40857b9585abfe34ef0\" target=\"_blank\" rel=\"noopener\">Step 2<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/CanKattwinkel\/anuglar-2-animate.css-example\/commit\/97c18f7f305fc8b951f39ca32dbe26bb5a827315\" target=\"_blank\" rel=\"noopener\">Step 3<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/CanKattwinkel\/anuglar-2-animate.css-example\/commit\/deb14f5afab5ff4325200d6caefaf729cf6f9ad0\" target=\"_blank\" rel=\"noopener\">Step 4<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/CanKattwinkel\/anuglar-2-animate.css-example\/commit\/8cf6c646c3572f3c757a3c9cb7bbb11174a9076f\" target=\"_blank\" rel=\"noopener\">Step 5<\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/github.com\/CanKattwinkel\/anuglar-2-animate.css-example\" target=\"_blank\" rel=\"noopener\">Github Repository\u00a0<\/a><br \/>\n<a href=\"https:\/\/cankattwinkel.github.io\/anuglar-2-animate.css-example\/\" target=\"_blank\" rel=\"noopener\">Final Result<\/a><\/p>\n<p><strong>Full Tutorial:<\/strong><\/p>\n<p>First of all, lets start a new project. We will use Angular Cli for that.<\/p>\n<pre class=\"lang:default decode:true\" title=\"Start a fresh project with Cli\">ng new animation-example\r\ncd animation-example\r\nng serve<\/pre>\n<p><strong>Step 1:\u00a0Add Component and Markup:<\/strong><\/p>\n<p>Create a new component as the target of our animation:<\/p>\n<pre class=\"lang:default decode:true\">ng g component animation-target<\/pre>\n<p>Now include the component in your app.component.html<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.html\">&lt;h1&gt;\r\n  {{title}}\r\n&lt;\/h1&gt;\r\n\r\n&lt;app-animation-target&gt;&lt;\/app-animation-target&gt;\r\n<\/pre>\n<p>And add a button responsible for the animation triggering<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.html\">&lt;h1&gt;\r\n  {{title}}\r\n&lt;\/h1&gt;\r\n\r\n&lt;app-animation-target&gt;&lt;\/app-animation-target&gt;\r\n\r\n&lt;button (click)=\"triggerAnimation()\"&gt;Click to Trigger the Animation&lt;\/button&gt;<\/pre>\n<p>Now go ahead and create the\u00a0triggerAnimation method in your app component. We also need a method to reset our trigger when the animation is done.<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.ts\">import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.scss']\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n  triggerAnimation(){\r\n    \r\n  }\r\n\r\n  reset(){\r\n  }\r\n\r\n}\r\n<\/pre>\n<p>Since Animations are state based in Angular 2 we need a variable that holds the current state as a string. Since we will implement the Wobble Animation from Animate.css we call our state the wobbleState.<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.ts\">import {Component} from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.sass']\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n  public wobbleState: string;\r\n\r\n  triggerAnimation() {\r\n\r\n  }\r\n\r\n  reset() {\r\n  }\r\n\r\n}<\/pre>\n<p><strong>Step 2: Add some Styles to our Application:<\/strong><\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/styles.scss\">body, * {\r\n  font-family: 'Roboto', sans-serif;\r\n  font-weight: lighter;\r\n}\r\n<\/pre>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.scss\">:host {\r\n  padding: 50px;\r\n  width: 500px;\r\n  display: block;\r\n  margin:auto;\r\n}\r\n\r\nbutton {\r\n  border:none;\r\n  padding: 25px;\r\n  background: #181d69;\r\n  color: #fff;\r\n  font-size: 26px;\r\n  width: 500px;\r\n  font-weight: lighter;\r\n\r\n  &amp;:hover {\r\n    background: #1a2580;\r\n  }\r\n}\r\n<\/pre>\n<pre class=\"lang:default decode:true \" title=\"src\/app\/animation-target\/animation-target.component.scss\">:host {\r\n  width: 500px;\r\n  height: 200px;\r\n  background: #ADFF2F;\r\n  color: #1a2580;\r\n  font-size: 40px;\r\n  line-height: 200px;\r\n  display: block;\r\n  text-align: center;\r\n  margin: 50px 0;\r\n}\r\n<\/pre>\n<p><strong>Step 3: Chose a Animation and prepare\u00a0it to fit Angular 2 Syntax\u00a0<\/strong><\/p>\n<p>We will go with the wobble animation from Animate.css. It is keyframe based and can simply be converted to a Angular 2 Animation. Here is the original CSS Code taken from Animate.css:<\/p>\n<pre class=\"lang:default decode:true\" title=\"https:\/\/github.com\/daneden\/animate.css\/blob\/master\/animate.css\">@keyframes wobble {\r\n  from {\r\n    -webkit-transform: none;\r\n    transform: none;\r\n  }\r\n\r\n  15% {\r\n    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\r\n    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\r\n  }\r\n\r\n  30% {\r\n    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\r\n    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\r\n  }\r\n\r\n  45% {\r\n    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\r\n    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\r\n  }\r\n\r\n  60% {\r\n    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\r\n    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\r\n  }\r\n\r\n  75% {\r\n    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\r\n    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\r\n  }\r\n\r\n  to {\r\n    -webkit-transform: none;\r\n    transform: none;\r\n  }\r\n}\r\n\r\n.wobble {\r\n  -webkit-animation-name: wobble;\r\n  animation-name: wobble;\r\n}\r\n<\/pre>\n<p>We will only need the Keyframes and we can remove the -webkit prefixes. Just keep it somewhere for now. We will make use of it in Step 4. Plain Animation looks like this:<\/p>\n<pre class=\"lang:default decode:true \">@keyframes wobble {\r\n  from {\r\n    transform: none;\r\n  }\r\n\r\n  15% {\r\n    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\r\n  }\r\n\r\n  30% {\r\n    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\r\n  }\r\n\r\n  45% {\r\n    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\r\n  }\r\n\r\n  60% {\r\n    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\r\n  }\r\n\r\n  75% {\r\n    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\r\n  }\r\n\r\n  to {\r\n    transform: none;\r\n  }\r\n}<\/pre>\n<p>Now add the animation to the component annotation in our app.component.ts. Make sure to copy all imports.<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.ts\">import {Component, trigger, keyframes, animate, transition} from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.scss'],\r\n  animations: [\r\n    trigger('wobble', [\r\n      transition('inactive =&gt; active', animate(1000, keyframes([\r\n      ]))),\r\n    ])\r\n  ]\r\n\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n  public wobbleState: string;\r\n\r\n  triggerAnimation() {\r\n\r\n  }\r\n\r\n  reset() {\r\n  }\r\n\r\n}\r\n<\/pre>\n<p><strong>Step 4: Translate the animation and add Keyframes<\/strong><\/p>\n<p>Now we can &#8218;translate&#8216; the animation to fit Angulars needs. You can see that the keyframes have a percentage value that describes the current state of the animation. In Angular this will be called the offset. Instead of using percentage value use values between 0 and 1.\u00a0Add the keyframes like this:<\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.ts\">import {Component, trigger, keyframes, animate, transition, style} from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.scss'],\r\n  animations: [\r\n    trigger('wobble', [\r\n      transition('inactive =&gt; active', animate(1000, keyframes([\r\n        style({transform: 'translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)', offset: .15}),\r\n        style({transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)', offset: .30}),\r\n        style({transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)', offset: .45}),\r\n        style({transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)', offset: .60}),\r\n        style({transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)', offset: .75}),\r\n        style({transform: 'none', offset: 1}),\r\n      ]))),\r\n    ])\r\n  ]\r\n\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n  public wobbleState: string;\r\n\r\n  triggerAnimation() {\r\n\r\n  }\r\n\r\n  reset() {\r\n  }\r\n\r\n}<\/pre>\n<p><strong>Step 5: Finalize Animation Trigger<\/strong><\/p>\n<pre class=\"lang:default decode:true\" title=\"src\/app\/app.component.ts\">import {Component, trigger, keyframes, animate, transition, style, NgZone} from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.scss'],\r\n  animations: [\r\n    trigger('wobble', [\r\n      transition('inactive =&gt; active', animate(1000, keyframes([\r\n        style({transform: 'translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)', offset: .15}),\r\n        style({transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)', offset: .30}),\r\n        style({transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)', offset: .45}),\r\n        style({transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)', offset: .60}),\r\n        style({transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)', offset: .75}),\r\n        style({transform: 'none', offset: 1}),\r\n      ]))),\r\n    ])\r\n  ]\r\n\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n  public wobbleState: string;\r\n\r\n  constructor(public zone: NgZone) {\r\n  }\r\n\r\n  triggerAnimation() {\r\n    this.wobbleState = \"active\";\r\n  }\r\n\r\n  reset() {\r\n    this.zone.run(() =&gt; {\r\n      this.wobbleState = \"inactive\";\r\n    });\r\n  }\r\n\r\n}\r\n<\/pre>\n<pre class=\"lang:default decode:true \" title=\"src\/app\/app.component.html\">&lt;h1&gt;\r\n  {{title}}\r\n&lt;\/h1&gt;\r\n\r\n&lt;app-animation-target [@wobble]=\"wobbleState\" (@wobble.done)=\"reset()\"&gt;&lt;\/app-animation-target&gt;\r\n\r\n&lt;button (click)=\"triggerAnimation()\"&gt;Click to Trigger the Animation&lt;\/button&gt;\r\n<\/pre>\n<p>We need to use ngZone in order to tell the view that our value is updated. Thats it. You can apply this probably to all animations from Animate.css. Show us your results in the comments. If you have any issues, the code diffs on GitHub could be helpful to you.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This Article will serve as a guide to implementing Animate.css animations with Angular 2 animation system.\u00a0Animate.css is a\u00a0popular and handy library for simple CSS Animations. We&#8217;ll apply the animation to a component and control it via a button. We will not\u00a0use ngClass but convert the Animate.css to fit Angular 2 Animate. Final Result: &nbsp; Git [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/\"> READ MORE<\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,2,60],"tags":[],"class_list":["post-1059","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript","category-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular 2 Animate.css Tutorial - How to use Animate.CSS in NG2 Application? - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Elevate Angular 2 with CSS animation! Dive into our tutorial for seamless integration of Animate.css. Transform your NG2 app with style and motion.\" \/>\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.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 2 Animate.css Tutorial - How to use Animate.CSS in NG2 Application? - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Elevate Angular 2 with CSS animation! Dive into our tutorial for seamless integration of Animate.css. Transform your NG2 app with style and motion.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-07T09:32:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-20T19:32:37+00:00\" \/>\n<meta name=\"author\" content=\"theCodeCampus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"theCodeCampus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\\\/\"},\"author\":{\"name\":\"theCodeCampus\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\"},\"headline\":\"Angular 2 Animate.css Tutorial &#8211; How to use Animate.CSS in NG2 Application?\",\"datePublished\":\"2016-10-07T09:32:46+00:00\",\"dateModified\":\"2023-12-20T19:32:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\\\/\"},\"wordCount\":411,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"articleSection\":[\"Angular\",\"JavaScript\",\"TypeScript\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\\\/\",\"name\":\"Angular 2 Animate.css Tutorial - How to use Animate.CSS in NG2 Application? - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"datePublished\":\"2016-10-07T09:32:46+00:00\",\"dateModified\":\"2023-12-20T19:32:37+00:00\",\"description\":\"Elevate Angular 2 with CSS animation! Dive into our tutorial for seamless integration of Animate.css. Transform your NG2 app with style and motion.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 2 Animate.css Tutorial &#8211; How to use Animate.CSS in NG2 Application?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/276bbda2f8da73154f22fb652201cfbc\",\"name\":\"theCodeCampus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg\",\"caption\":\"theCodeCampus\"},\"description\":\"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/thecodecampus\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular 2 Animate.css Tutorial - How to use Animate.CSS in NG2 Application? - Web Development Blog","description":"Elevate Angular 2 with CSS animation! Dive into our tutorial for seamless integration of Animate.css. Transform your NG2 app with style and motion.","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.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/","og_locale":"de_DE","og_type":"article","og_title":"Angular 2 Animate.css Tutorial - How to use Animate.CSS in NG2 Application? - Web Development Blog","og_description":"Elevate Angular 2 with CSS animation! Dive into our tutorial for seamless integration of Animate.css. Transform your NG2 app with style and motion.","og_url":"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2016-10-07T09:32:46+00:00","article_modified_time":"2023-12-20T19:32:37+00:00","author":"theCodeCampus","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"theCodeCampus","Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/"},"author":{"name":"theCodeCampus","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc"},"headline":"Angular 2 Animate.css Tutorial &#8211; How to use Animate.CSS in NG2 Application?","datePublished":"2016-10-07T09:32:46+00:00","dateModified":"2023-12-20T19:32:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/"},"wordCount":411,"commentCount":4,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"articleSection":["Angular","JavaScript","TypeScript"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/","url":"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/","name":"Angular 2 Animate.css Tutorial - How to use Animate.CSS in NG2 Application? - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"datePublished":"2016-10-07T09:32:46+00:00","dateModified":"2023-12-20T19:32:37+00:00","description":"Elevate Angular 2 with CSS animation! Dive into our tutorial for seamless integration of Animate.css. Transform your NG2 app with style and motion.","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-css-tutorial-use-animate-css-ng2-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular 2 Animate.css Tutorial &#8211; How to use Animate.CSS in NG2 Application?"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/276bbda2f8da73154f22fb652201cfbc","name":"theCodeCampus","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch-96x96.jpg","caption":"theCodeCampus"},"description":"Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.","sameAs":["https:\/\/www.linkedin.com\/showcase\/thecodecampus\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=1059"}],"version-history":[{"count":10,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1059\/revisions"}],"predecessor-version":[{"id":2734,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/1059\/revisions\/2734"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=1059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=1059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=1059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}