угловая анимация не работает

Я новый AngularJS.Я не могу применить анимацию к своему тексту и кнопке. Я не получаю никаких ошибок в консоли. я понятия не имею, где это происходит неправильно. Мне нужны разные анимации для моего текста и кнопки. Я предоставил ссылку css анимации в html. вот моя html-страница. пожалуйста, помогите мне узнать, правильно ли я применяю анимацию.угловая анимация не работает

<!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>

вот мой bounceOut код анимации CSS

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

вот мой ZoomIn анимация код CSS

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

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

источник

2016-02-15 user5397448

Кажется, вы usgin CSS3 анимации и не angularjs анимации. Если я ошибаюсь, скажите мне, но это должно сработать,

/* Styles 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; 
}

источник

2016-02-15 10:55:10

его работая правильно, но я хочу анимацию bounceInLeft для моего текста. пожалуйста, помогите мне в этой анимации. – user5397448

Обратитесь к этому [plnkr] (http://embed.plnkr.co/74QLiEfv6mtfqeNKwjUJ/), демонстрируя это –

. Я пробовал работать с кодом. Я изменил его на bounceInRight, так как мне нужна анимация bounceInRight. Но единственная проблема с этим - это отскок назад к стартовому месту. Я хочу, чтобы он остановился в центре. – user5397448

угловая анимация не работает

ответ

Смежные вопросы