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;
}