css动画放大缩小效果

1.实现星星变大变小忽闪的感觉

html：

<div class="xing_one my_xing"><img src="~@/static/images/maskscroll/maskscroll_xing.png" class="img100"></div>

css：

@keyframes xing {0% {transform: scale(1);}25% {transform: scale(1.8);}50% {transform: scale(1);}75% {transform: scale(1.8);}}.my_xing {-webkit-animation-name: xing;-webkit-animation-timing-function: ease-in-out;-webkit-animation-iteration-count: infinite;-webkit-animation-duration: 2s;}

2.图片由小变大

@keyframes xing {0% {-webkit-transform: scale(0.5);opacity: 0}100% {-webkit-transform: scale(1);opacity: 1}}.my_xing {-webkit-animation: xing 0.5s linear;}