CSS3 animation效果不错

在这之前要在网页中实现动画，基本都是Flash，这Flash老大的位置一直到CSS3出现以后开始发生变化了，主流浏览器支持CSS3特性。

它的属性特别多，具体的可以看看教程，下面给出一些简单例子

【国内直连ChatGPT 29元起】
国内直连ChatGPT，Plus会员每月29元起，支持最新o1模型探索更多领域，无需注册OpenAI账号。

例子1

html

<div class="box">
  <span class="a1">从左边渐渐飘入</span>
  <span class="a2">从中间淡入闪动两下，然后淡出</span>
  <span class="a3">从右边渐渐飘入</span>
  <hr  />
  <span class="a4">这个一直永久重复飘动</span>
  <hr />
  <span class="a5">从小变大, 颜色从红变到绿</span>
</div>

css

.box { 
  width: 500px; 
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border: 3px solid #eee;
  background: #e0e0e0;
  overflow: hidden;
}
 
span{
  opacity: 0;
  display: block;
  height: 50px;
  font: bold 14px/50px "宋体";
}
 
.a1{
  transform: translate(55px);
  -webkit-animation: animations 2s ease-out;
  animation: animations 2s ease-out;
}
 
@-webkit-keyframes animations {
  0% { -webkit-transform: translate(0); opacity: 0; }
  50% { -webkit-transform: translate(30px); opacity: 1; }
  70% { -webkit-transform: translate(35px); opacity: 1; }
  100% { -webkit-transform: translate(60px); opacity: 0; }      
}
 
@keyframes animations {
  0% { transform: translate(0); opacity: 0; }
  50% { transform: translate(30px); opacity: 1; }
  70% { transform: translate(35px); opacity: 1; }
  100% { transform: translate(60px); opacity: 0; }
}
 
.a2 {
  text-align: center;
  font-size: 26px;
  -webkit-animation: animations2 5s ease-in-out 2s;
  animation: animations2 5s ease-in-out 2s;
}
 
@-webkit-keyframes animations2 {
  0% { opacity: 0; }
  40% { opacity: .8; }
  45% { opacity: .3; }
  50% { opacity: .8; }
  55% { opacity: .3; }
  60% { opacity: .8; }
  100% { opacity: 0; }
}
 
@keyframes animations2 {
  0% { opacity: 0; }
  40% { opacity: .8; }
  45% { opacity: .3; }
  50% { opacity:.8; }
  55% { opacity: .3; }
  60% { opacity: .8; }
  100% { opacity: 0; }
}
 
.a3 {
  transform: translate(360px);
  -webkit-animation: animations3 2s ease-out 2s;
  animation: animations3 2s ease-out 2s;
}
 
@-webkit-keyframes animations3 {
  0% { -webkit-transform: translate(360px); opacity: 0; }
  50% { -webkit-transform: translate(330px); opacity: 1; }
  70% { -webkit-transform: translate(325px); opacity: 1; }
  100% { -webkit-transform: translate(300px); opacity: 0; }
}

@keyframes animations3 {
  0% { transform: translate(360px); opacity: 0; }
  50% { transform: translate(330px); opacity: 1; }
  70% { transform: translate(325px); opacity: 1; }
  100% { transform: translate(300px); opacity: 0; }
}
 
.a4 {
  transform: translate(0);
  opacity: 1;
  color: blue;
  /* infinite 永久重复 */
  -webkit-animation: animations4 5s linear infinite;
  animation: animations4 5s linear infinite;       
}
 
@-webkit-keyframes animations4 {
  0% { -webkit-transform: translate(0px); }
  100% { -webkit-transform: translate(500px); }
}
 
@keyframes animations4 {
  0% { transform: translate(0px); }
  100% { transform: translate(500px); }
}
 
.a5 {
  transform: translate(0);
  opacity: 1;
  -webkit-animation: animations5 8s linear infinite;
  animation: animations5 8s linear infinite;       
}
 
@keyframes animations5 {
  0% {
    transform: translate(0px);
    width: 10%; 
    height: 10%;
    background: red;
  }
  100% {
    transform: translate(400px);
    width: 50%;
    height: 50%;
    background: blue;
  }
}
 
@-webkit-keyframes animations5 {
  0% {
    -webkit-transform: translate(0px);
    width: 10%;
    height: 10%;
    background: red;
  }
  100% {
    -webkit-transform: translate(400px);
    width: 50%;
    height: 50%;
    background: blue;
  }
}

点这里看在线效果

惊奇吧！一句js代码都不用写，动画效果都是靠css3去实现。以上样式其中有经常有一段@keyframes animations*，这个就是定义动画的地方。如果你玩过Flash，那么这个应该最熟悉不过了，Flash要实现动画其实就是定义关键帧，然后靠系统自动运算出每两个关键帧之间的动画，不过这运行只能是一个方向上的。

关键帧

比如，你想让一个球从左边移动到右边，可以这么定义关键帧

div {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  animation: moveCell 3s;
}

@keyframes moveCell {
  from { left:0; }
  to { left:500px; }
}

就是有两个关键帧，from开始left=0到to结束left=500px，这就完成了一个非常简单的动画。

点这里看在线效果

如果，你想让这个div不按直线跑，可以多加一个关键，多个关键帧就需要百分比来描述具体位置了，如:

div {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  animation: moveCell 3s;
}

@keyframes moveCell {
  0% { left:0; top: 0; }
  25% { left:0; top:300px; }
  50% { left:500px; top:300px; }
  100% { left:500px; top:0; }
}

点这里看在线效果

animation: moveCell 3s这里的3s值的是运行动画的时间，这个也类似于Flash的时间轴，我们让它从0px到500px需要3秒跑完，就这么写，这个时间越小速度越快，时间越大速度越慢

我们也可以让它重复n次或者永久重复，在animation: moveCell 3s后面加上n次或者永久重复infinite

/* 重复6次 */
animation: moveCell 3s 6;

/* 永久重复 */
animation: moveCell 3s infinite;

点这里看在线效果

我们不仅可以让它跑过去，还能让它原路返回，这很牛叉，alternate属性

animation: moveCell 3s infinite alternate;

点这里看在线效果

具体更多的大家看手册吧。

最后

点这里看在线效果

优点 动画的基本特征无非就是移动、色变、形变和速度，而这几个特征在animation里都能轻松实现，关键帧也都能轻松实现，也能实现多个动画同时play已经各自的出场时间，配合SVG矢量结合这些动作就能搞定大部分动画，并且各大浏览器都能轻松实现。

缺点 复杂的动画需要写大量Code，虽然只是写CSS，还有一个致命的缺点就是动画play结束以后它会还原，比如有开场我让一个div从左跑到右，完了就让它停在哪，结果跑完以后它又复位到左边了。