Issues with angular animations malfunctioning

I am a beginner in AngularJS and I am struggling to add animations to my text and button. There are no errors showing up in the console, but I can't figure out what I am doing wrong. I want to use different animations for my text and button. I have included the CSS animation links in the HTML. Below is a snippet of my HTML code. Please help me understand if I am applying the animations correctly.

<!doctype html>
<html ng-app="MyApp" >
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bounceOut.css">
<link rel="stylesheet" href="zoomIn.css">
</head>
<body ng-controller="MyCtrl">
<h3 class="bounceOut">I am</h3> </div>
<button type="submit" class="OptionButton zoomIn">
Submit
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
<script> 
var app = angular.module("MyApp", ["ngAnimate"]);
  app.controller('MyCtrl', function($scope) {
  });
</script>
</body>
</html>

Here is the CSS code for my bounceOut animation:

@keyframes bounceOut {
  20% {
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}
.bounceOut {
  animation-name: bounceOut;
}

And here is the CSS code for my zoomIn animation:

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}
.zoomIn {
  animation-name: zoomIn;
}

Answer №1

It appears that you are using CSS3 animation instead of AngularJS animation. If I am mistaken, please let me know, but this code should work as expected.

/* Your styles will go here */

.zoomIn {
  animation: zoomInf 5s infinite;
  -webkit-animation: zoomInf 5s infinite;
}

@keyframes zoomInf {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes zoomInf {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
    -webkit-transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes bounceOutf {
  20% {
    transform: scale3d(.9, .9, .9);
  }
  50%,
  55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}

@-webkit-keyframes  bounceOutf {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  animation: bounceOutf 5s infinite;
  -webkit-animation: bounceOutf 5s infinite;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sharing the directive scope with transcluded elements is crucial for enabling seamless communication

I've been working on a reusable modal directive, but I'm facing an issue with the transcluded elements creating their own scope. You can see the problem in action on this JSFIDDLE. Here is how it currently functions. <button ng-click="show=!s ...

AngularJS html tags are displaying instead of processing

One of my variables looks like this: $scope.someVar= "Some<br>text<br>here"; When I display it in my HTML file using {{ someVar }}, it shows up like this: Some<br>text<br>here But I really want it to look like this: Some t ...

How can I set up multiselect values in AngularJS ui-select?

Solution: Success! I managed to resolve the issue by implementing this solution and creating a customized build of the ui-select. Hopefully, this fix will be incorporated into the official master branch soon! Issue Is there a way to set up a select elem ...

Ways to split JSON information into several pages?

I am currently facing an issue with my HTML code. It works perfectly fine for a small JSON file, displaying the data in an HTML table as expected. However, when I try to load a larger JSON file with around 15,000 rows of data, my page becomes unresponsiv ...

Changing the text on the navbar in real-time

In the process of developing a hybrid app for both iOS and Android, I encountered a requirement to display the current day in Spanish. For example, if the app is accessed on a Tuesday, it should show "Martes," which means Tuesday. Instead of manually input ...

Resizing Your WordPress Header Logo

Hi there! I am struggling to resize the logo in the header of my website www.cookingvinyls.com. Despite my efforts, I can't seem to override the hardcoded version. I attempted to modify the width and height lines in header.php, but unfortunately, it ...

Error encountered when attempting to upload an attachment in Sharepoint, resulting in a

Whenever I attempt to upload multiple attachments to my list, I encounter a 'save conflict' error. It seems that Sharepoint is still processing the previous attachment when a new one is submitted. I believe that introducing a delay before sendin ...

Sign in with Google / External authentication service

Currently working on an AngularJS application that includes Google login functionality. To implement this feature, I found a useful guide at the following link: . Additionally, there is a script that is called when the page loads: <script type="text/j ...

Customizing background images for individual web pages

Having some trouble changing the background image on my Squarespace website homepage. After exploring forums and inspecting my website's source code, I tried using the id #collection-51648018e4b0d7daf0a7cece to target just the homepage background but ...

Unique CSS shadow design & alternative solutions

I'm currently working on some HTML/CSS code and I am looking to implement a unique shadow effect with a custom width and height around a div element. https://i.sstatic.net/3SnXV.png Could anyone provide guidance on the most effective method to ach ...

Tips for creating responsive images when using two images stacked on top of each other:

One of my challenges with using Bootstrap is trying to place an image on top of another image. Here's the HTML code I currently have: <section id="test"> <div class="row"> <div class="imgbg"><img src="img/bg_pres.png ...

The overflow issue arising from the off-canvas menu is causing a clash with the par

I am currently working on a website project and have encountered a peculiar issue. I am using parallax for background images in two sections of the site. The parallax effect works fine without setting an overflow rule, but when I add it, the parallax effec ...

Mastering AngularJS Charts: Successfully Loading External JSON Data without Errors

Greetings! Allow me to apologize for what might seem like a basic question. I've recently delved into the realm of java, JSON, and all that jazz, and it's rather uncharted territory for me. I've scoured high and low but simply can't pin ...

The JQuery mmenu breaks free from its constraints within a Bootstrap 4 design

Whenever I zoom in on my page or view it in responsinator.com, particularly in landscape view, the menu fails to collapse into the mobile version. I have implemented the jquery mmenu plugin alongside bootstrap 4 justified nav. After attempting to remove ...

Display and conceal different sections using hyperlinks

Hey there, I'm back with another issue related to this code snippet on jsfiddle: https://jsfiddle.net/4qq6xnfr/9/. The problem I'm facing is that when I click on one of the 5 links in the first column, a second div appears with 3 links. Upon clic ...

Struggling to develop a Singleton AngularJS Service?

I am in the process of creating a Singleton AngularJS service using the 4th method. The structure of my service is as follows: provider('SocketService', { socket: null, // methods used within the config() of a module connect: functi ...

Sharing scope variables between multiple dynamically created directives

Find my Plunkr example here: http://plnkr.co/edit/9LcYbn1468miu5McgPqR?p=preview I successfully added the form to the variable inside the options parameter, but I am looking to bind it to a different location outside of the options parameter. I have a cu ...

AngularJS Service failing to appear on screen

I am trying to access my Github information using Github's API. I can see the correct information when I log my http request, but for some reason it is not showing up on the page. There are no errors being thrown, but the requested data is not display ...

Learn how to transform a raw readme file into an HTML formatted document using AngularJS, after retrieving it from GitHub

Can someone help me figure out how to format each line of the README.MD raw file into an HTML document using the controller below? angular.module('ExampleApp', []) .controller('ExampleController', function($scope, Slim,$sce) { ...

Issue with alignment on the printed version of an HTML document

While attempting to print an auto-generated HTML page through my Thermal POS printer, I encountered a large left margin issue. The application is developed using PyQt5, and I had to resort to a python script to generate the HTML code. Unfortunately, in the ...