10 个常用 CSS3 动画开箱即用代码

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.box { animation: fadeIn 0.8s ease forwards; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}
.box { animation: slideUp 0.8s ease forwards; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); }
}
.box { animation: slideDown 0.8s ease forwards; }

@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-25px); }
}
.box { animation: bounce 1s infinite ease-in-out; }

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.box { animation: rotate 3s linear infinite; }

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
.box { animation: zoomIn 0.6s ease forwards; }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.box { animation: shake 0.5s ease; }

@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.box { animation: pulse 1.5s infinite ease-in-out; }

@keyframes moveLeft {
  from { transform: translateX(-30px); }
  to { transform: translateX(30px); }
}
.box { animation: moveLeft 2s infinite alternate ease; }

.box {
  transition: all 0.3s ease;
}
.box:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px #666;
}