在Angular 2 / Ionic 2中设置边框动画

Question

我正在尝试为个人资料照片周围的边框设置动画，因此看起来边框越来越大而且越来越小，好像图像像无线电信号/波一样放射。但动画似乎没有生效......

CSS

   .Pic {
      width: 200px;
      height: 200px;
      background: rgba(215, 255, 255, 0.3);;
      position: relative;
      border: 25px solid rgba(215, 255, 255, 0.3);;  
      margin: 4px;
      border-radius: 50%;
      padding: 1.1em 
    }
    .Pic:after {
      content: '';
      position: absolute;
      top: -15px;
      left: -15px;
      right: -15px;
      bottom: -15px;
      background: #ddd;
      z-index: -1;
      padding: 1.1em
    }

角

animations: [
  trigger('pictrigger', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

HTML

< img src="pic1.jpg" [@pictrigger]  >