css3动画探秘1

百度地图动画研究

今天在百度地图上看到了一个动画效果，遂找了下他的源码研究一下：

1
2
3

.poidetail-widget-generalInfo .generalInfo-function-buttons .generalInfo-function-buttons-fav:hover{cursor:pointer}
.poidetail-widget-generalInfo .generalInfo-function-buttons .generalInfo-function-buttons-fav:hover .buttons-fav-icon{-webkit-animation-name:bigsmall;animation-name:bigsmall;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
@keyframes bigsmall{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(1.3);transform:scale(1.3)}60%{-webkit-transform:scale(0.7);transform:scale(0.7)}85%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}

主要就是定义animation-name,和@keyframes

参考资料：
CSS3 animation-name 属性
 CSS3 @keyframes 规则