收集常用的CSS3动画效果

无限旋转（2D旋转）

无限旋转（3D旋转）：只需要将以下代码rotate属性改为rotateY

.rotate {
  animation: rotate 4s linear infinite;
  -moz-animation: rotate 4s linear infinite;  /* Firefox */
  -webkit-animation: rotate 4s linear infinite; /* Safari 和 Chrome */
  -o-animation: rotate 4s linear infinite; /* Opera */
}
/*  值rotate改为rotateY为3D立体旋转  */
@keyframes rotate {
  0% {transform:rotate(0deg);}
  50% {transform:rotate(180deg);}
  100% {transform:rotate(360deg);}
}
@-moz-keyframes rotate { /* Firefox */
  0% {-moz-transform:rotate(0deg);}
　50% {-moz-transform:rotate(180deg);}
  100% {-moz-transform:rotate(360deg);}
}
@-webkit-keyframes rotate { /* Safari 和 Chrome */
  0% {-webkit-transform:rotate(0deg);}
　50% {-webkit-transform:rotate(180deg);}
  100% {-webkit-transform:rotate(360deg);}
}
@-o-keyframes rotate { /* Opera */
  0% {-o-transform:rotate(0deg);}
　50% {-o-transform:rotate(180deg);}
  100% {-o-transform:rotate(360deg);}
}

 

来回往复移动

从当前位置开始移动。translateX：只移动X轴，translateY：只移动Y轴。

.translate {
  animation: translate 4s linear infinite;
  -moz-animation: translate 4s linear infinite;  /* Firefox */
  -webkit-animation: translate 4s linear infinite; /* Safari 和 Chrome */
  -o-animation: translate 4s linear infinite; /* Opera */
}
@keyframes translate {
  0% {transform:translate(1rem,1rem);}
  25% {transform:translate(3rem,1rem);}
  50% {transform:translate(5rem,1rem);}
  75% {transform:translate(3rem,1rem);}
  100% {transform:translate(1rem,1rem);}
}
@-webkit-keyframes translate {
  0% {-webkit-transform:translate(1rem,1rem);}
  25% {-webkit-transform:translate(3rem,1rem);}
  50% {-webkit-transform:translate(5rem,1rem);}
  75% {-webkit-transform:translate(3rem,1rem);}
  100% {-webkit-transform:translate(1rem,1rem);}
}
@-moz-keyframes translate {
  0% {-moz-transform:translate(1rem,1rem);}
  25% {-moz-transform:translate(3rem,1rem);}
  50% {-moz-transform:translate(5rem,1rem);}
  75% {-moz-transform:translate(3rem,1rem);}
  100% {-moz-transform:translate(1rem,1rem);}
}
@-o-keyframes translate {
  0% {-o-transform:translate(1rem,1rem);}
  25% {-o-transform:translate(3rem,1rem);}
  50% {-o-transform:translate(5rem,1rem);}
  75% {-o-transform:translate(3rem,1rem);}
  100% {-o-transform:translate(1rem,1rem);}
}