代码
<!DOCTYPE html>
<html ng-app="my_app">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
</script>
<style type="text/css">
.my-animation {
position: absolute;
right: 300px;
padding: 0 10px;
line-height: 40px;
font-size: 22px;
color: red;
border: 1px solid red;
/* 动画名称 动画时长 动画运动速度 */
animation: anima 1500ms linear;
/* 设置动画播放次数: infinite-无限次执行 */
animation-iteration-count: infinite;
}
/* 动画名称 */
@keyframes anima {
0% {
transform: scale(.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(.8);
}
}
/* 动画关键帧 */
div.my-animation:hover {
/* 设置动画是否暂停*/
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="my-animation">测试</div>
</body>
</html>效果
