css animation

.blue {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: darkturquoise;
				/*steps实现逐帧动画*/
				/*1s  animation-duration 是一个周期的时间   0%-100%* 整个动画的执行时间是 动画的次数乘以 周期时间 */
				/*3   animation-iteration-count   是动画的播放次数  默认1次  infinite：无数次*/
				/*linear   animation-timing-function 速度曲线   可以用cubic-bezier灵活设置动画速度！ */
				/*alternate   animation-direction 是是否反向播放动画 */
				/*forwards    动画结束后停留在最后一帧*/
				-webkit-animation: showgift 1s 3 linear alternate forwards;
				animation: showgift 1s 3 linear alternate forwards;
			}
			.blue:hover{
				/*控制动画暂停*/
				animation-play-state:paused;
			}
			@keyframes showgift {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(200px);
				}
			}
			

参考链接：https://juejin.im/post/5cdd178ee51d456e811d279b