css3有哪些动画效果

1. 淡入淡出

.fade-in-out {
      animation: fadeInOut 3s infinite;
}
@keyframes fadeInOut {
  0% {
     opacity: 0;
 }
  50% {
     opacity: 1;
 }
  100% {
     opacity: 0;
 }
}
 

2. 旋转

.rotate {
      animation: rotate 1s infinite linear;
}
@keyframes rotate {
  0% {
     transform: rotate(0deg);
 }
  100% {
     transform: rotate(360deg);
 }
}
 

3. 放大缩小

.zoom {
      animation: zoom 1s infinite;
}
@keyframes zoom {
  0% {
     transform: scale(1);
 }
  50% {
     transform: scale(1.5);
 }
  100% {
     transform: scale(1);
 }
}
 

4. 上下滑动

.slide-up-down {
      animation: slideUpDown 2s infinite;
}
@keyframes slideUpDown {
  0% {
     transform: translateY(0);
 }
  50% {
     transform: translateY(50px);
 }
  100% {
     transform: translateY(0);
 }
}
 

5. 左右滑动

.slide-left-right {
      animation: slideLeftRight 2s infinite;
}
@keyframes slideLeftRight {
  0% {
     transform: translateX(0);
 }
  50% {
     transform: translateX(50px);
 }
  100% {
     transform: translateX(0);
 }
}
 

6. 翻转

.flip {
      animation: flip 1s infinite;
      transform-style: preserve-3d;
}
@keyframes flip {
  0% {
     transform: perspective(400px) rotateY(0);
 }
  50% {
     transform: perspective(400px) rotateY(180deg);
 }
  100% {
     transform: perspective(400px) rotateY(360deg);
 }
}
     

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！