[游戏开发]常用的css3动画(不定时更新)

平时项目中常用的animate.css即可满足需求

方便我平时使用，写几个常用：

/* 放大缩小 */

.scalebigbig {
	animation: scalebigbig 3s infinite ease;
}

@keyframes scalebigbig {
	0% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}

	50% {
		transform: scale(1.2);
		-webkit-transform: scale(1.2);
	}

	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

/* 手指头移动动画 */

.anim_hand {
	animation: anim_hand 3s infinite ease;
	animation-delay: 1s;
}

@keyframes anim_hand {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		opacity: 0.5
	}

	50% {
		-webkit-transform: translate(-0.3rem, -0.3rem);
		transform: translate(-0.3rem, -0.3rem);
		opacity: 1
	}

	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		opacity: 0.5
	}
}

/* 瓶子抖动 */

.shake {
	-webkit-animation: shake 0.2s infinite;
	animation: shake 0.2s infinite;
}

@keyframes shake {
	0% {
		-webkit-transform: translate(2rpx, 2rpx);
		transform: translate(2rpx, 2rpx);
	}

	25% {
		-webkit-transform: translate(-2rpx, -2rpx);
		transform: translate(-2rpx, -2rpx);
	}

	50% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
	}

	75% {
		-webkit-transform: translate(2rpx, -2rpx);
		transform: translate(2rpx, -2rpx);
	}

	100% {
		-webkit-transform: translate(-2rpx, 2rpx);
		transform: translate(-2rpx, 2rpx);
	}
}

/* 砸金蛋锤子 */?

/* 砸金蛋锤子 */
.animate-cuizi {
	animation: animate-cuizi 1s ease;
	transform-origin: 100% 100%;
}

@keyframes animate-cuizi {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	50% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}

	100% {
		-webkit-transform:  rotate(0);
		transform:  rotate(0);
	}
}

/* 文字向上滚动 */

/* 文字向上滚动 */
.rowup{
      -webkit-animation: 20s rowup linear infinite normal;
      animation: 20s rowup linear infinite normal;
      position: relative;
  }
@-webkit-keyframes rowup {
      0% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
      }
      100% {
          -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
      }
  }
  @keyframes rowup {
      0% {
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
      }
      100% {
          -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
      }
  }