css动画

从右进向左平滑出去

.notice {
  background: rgba(0, 0, 0, 0.55);
  border-radius: 20rpx;
  padding: 3rpx 10rpx;
  animation: heart 8s linear infinite;
}
@keyframes heart {
  from {
    transform: translate(150%, 0);
  }
  to {
    transform: translate(-150%, 0);
  }
}

上下浮动

.heart{
	animation: heart 1.3s ease-in-out 2.7s infinite alternate;
}
//用transform就流畅了
@keyframes heart{
	from{transform:translate(0,0)}
	to{transform:translate(0,6px)}
}

放大缩小

.submit {
  animation: share 1s ease-out infinite;
}
@keyframes share {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

左右摇摆

.get-goods {
  animation: goods 1s ease-out infinite;
}
@keyframes goods {
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,
  100% {
    transform: rotate(0deg);
  }
}