CSS 3在原来的基础上新增了变形和动画相关的属性,通过这些属性可以实现以前需要大段JavaScript才能实现的功能。css 3的变形功能可以对HTML元素执行位移、旋转、缩放、倾斜4种几何变换,借助于这几种几何变换,css 3提供了Transition动画。Transition动画可以控制HTML元素的某个属性发生改变时会经历一段时间、以平滑渐变的方式发生改变,这就产生了动画效果。

  Transition动画通过transition属性来指定。transition属性的值包括如下4个部分:

  • transition-property:指定对HTML元素的哪个属性进行平滑渐变处理。该属性可以指定background-color、width、height等各种标准的css属性。
  • transition-duration:指定属性平滑渐变的持续时间。
  • transition-timing-function:指定渐变的速度,支持如下几个属性值:
    • ease:动画开始时较慢,然后速度加快,到达最大速度后再减慢速度(相当于cubic-bezier(0.25,0.1,0.25,1.0))
    • linear:线性速度。动画开始时的速度到结束时的速度保持不变(相当于cubic-bezier(0.0,0.0,1.0,1.0))
    • ease-in:动画开始时速度较慢,然后速度加快(相当于cubic-bezier(0.42,0,1.0,1.0))
    • ease-out:动画开始时速度很快,然后速度减慢。(相当于cubic-bezier(0,0,0.58,1.0))
    • ease-in-out:动画开始时速度较慢,然后速度加快,到达最大速度后再减慢速度。(相当于cubic-bezier(0.42,0,0.58,1.0))
    • cubic-bezier(x1,y1,x2,y2):通过贝塞尔曲线来控制动画的速度。
  • transition-delay:指定延迟时间,也就是指定经过多长时间的延迟才会开始执行平滑渐变。

 

   通过多个属性同时渐变可以非常方便地开发出动画效果。假如希望实现一个在页面上随鼠标漂移的气球——控制气球移动主要主要是修改气球图片的left、top两个属性值,让这两个属性值等于鼠标按下的X、Y坐标即可。再通过设置气球图片的left、top属性以平滑渐变的方式来进行,就可以看到气球随鼠标移动的动画效果了。页面代码如下:

 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 漂浮的气球 </title>
    <style type="text/css">
        img#target {
            position: absolute;
            /* 指定气球图片的left、top属性会采用平滑渐变的方式来改变 */
            transition: left 5s linear , top 5s linear;
        }
    </style>
</head>
<body>
<img id="target" src="balloon.gif" alt="气球"/>
<script type="text/javascript">
    var target = document.getElementById("target");
    target.style.left = "0px";
    target.style.top = "0px";
    // 为鼠标按下事件绑定监听器
    document.onmousedown = function(evt)
    {
        // 将鼠标事件的X、Y坐标赋给气球图片的left、top。
        target.style.left = evt.pageX + "px";
        target.style.top = evt.pageY + "px";
    }
</script>
</body>

 

上面标记出来的代码指定了气球图片的left、top两个css属性会以平滑渐变的方式发生改变,这样每次按下鼠标时,我们可以看到这个气球慢慢地漂浮过来的效果。

 

  Transition动画比较简单,只要指定HTML元素的哪些CSS属性需要使用动画效果来执行变化,并指定动画的持续时间,就可以保证HTML元素按指定规则播放动画。比Transition动画功能更加强大的是Animation动画,它与transition动画一样,可以与位移、旋转、缩放、倾斜4种几何变换结合,但Animation动画可以指定多个关键帧,从而允许定义功能更丰富的自定义动画。

  CSS3为Animation动画提供了如下几个属性

  • animation-name:指定动画的名称。该属性指定一个已有的关键帧定义。
  • animation-duration:指定动画的持续时间
  • animation-timing-function:指定动画的变换速度
  • animation-delay:指定动画延迟多长时间才开始执行
  • animation-iteration-count:指定动画的循环执行次数。
  • animation:以上属性的集合,是一个复合属性。其属性的格式排列顺序与以上几个属性的顺序一致。

上述关键帧的定义格式如下:

@keyframes 关键帧名称{
from|to|百分比{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
...
}

 

以上格式中,from|to|百分比用于定义关键帧的位置,from代表开始处;to代表动画结束帧;百分比指定关键帧的出现位置,例如,20%代表关键帧出现在动画进行了1/5时间处。一个关键帧定义可以包含多个关键帧。通过指定关键帧,我们可以实现图片的无缝滚动。

  纯CSS动画实现图片的无缝滚动效果实现思路如下(HTML元素选择为我个人习惯):设置一个div用于显示图片,并为该div设置宽、高以及overflow:hidden;属性,让超出容器部分无法显示;另外设置一个ol或ul,其宽度设置百分比(数值大小为图片张数*100),图片按顺序依次存放在li元素中,并根据滚动方向设置li元素排列方式(竖直向下排列或水平排列);为ol或ul元素设置animation动画属性,并为关键帧定义指定关键帧,需要注意浏览器的兼容问题。