Hot For Coding

CSS3 animation效果不错

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

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

例子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从左跑到右,完了就让它停在哪,结果跑完以后它又复位到左边了。

分享

TITLE: CSS3 animation效果不错

LINK: https://www.qttc.net/398-css3-animation.html

NOTE: 原创内容,转载请注明出自琼台博客