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动画属性，并为关键帧定义指定关键帧，需要注意浏览器的兼容问题。

CSS 3动画的更多相关文章

  1. 第四十二课：基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  2. Effeckt.css项目：CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...

  3. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  4. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  5. CSS波纹动画

    波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...

  6. css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层，正常是 里外层 鼠标上来 外层有hover，如果就想到里层hover触发外层hover，要用外层position 定义绝对定位，内层的hover跳出外层的div，这样视觉上就是两个单独的div，进行内外层联动。

    css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...

  7. CSS变形动画

    CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...

  8. CSS帧动画

    CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...

  9. css keyframes动画属性设置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. css 3 动画

    1.transition,其作用是:平滑的改变CSS的值.无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画. transition 属性介绍: transition-p ...

随机推荐

  1. P4173 残缺的字符串

    题目链接 题意分析 啥 ? ? ? \(FFT\)做字符串匹配 可是就是这样 我们定义匹配函数 我们定义\(A\)是匹配串 \(B\)是被匹配串 我们当前到达\(B\)串的\(x\)位置 \[P(x) ...

  2. 为什么sudo执行命令还是会提示权限不够

    安装openstack 的过程中需要执行以下命令,虽然使用了sudo,但是依然提示权限不够 $ sudo echo "deb http://ubuntu-cloud.archive.cano ...

  3. 时间超限问题处理（c++）

    c++中 如果时间超上限 做题上: 考虑关于二进制的方法 比如说 find your present (2) 这道题 可以用异或运算 来发现不重复数 对于动态规划 状态压缩发面 方面应用更多 比如说p ...

  4. Monkey基本使用（转载）

    什么是 Monkey Monkey 是一个 Android 自动化测试小工具.主要用于Android 的压力测试, 主要目的就是为了测试app 是否会Crash. Monkey 特点 顾名思义,Mon ...

  5. 在浏览器中输入URL后，执行的全部过程。（一次完整的http请求过程）

    整个流程如下: 域名解析 为了将消息从你的PC上传到服务器 上.需要用到1P协议.ARP协议和0SPF协议 发起TCP的3次握手 建立TCP连接后发起http请求 服务器响应htp请求 浏览器解析ht ...

  6. 腾讯地图添加多个Marker

    //重置地图 init(){ var self = this; this.wSize = { wHeight: window.innerHeight-, wWidth: window.innerWid ...

  7. 在循环中使用continue语句

    continue;//表示继续,当遇到continue语句时,则结束当次循环继续执行下一次循环  例子: class For09{ public static void main(String[ ]a ...

  8. vue element 常见问题

    1. vue2.0 给data对象新增属性,并触发视图更新  $set this.$set(this.ossData, "signature", 222) // 正确用法 // 数 ...

  9. Android中调用高德导航（组件）

    btn_.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //调用 ...

  10. github创建本地库后关联远程库

    在进行新项目开发时,有时候并不一定先创建远程库,而是先在本地将项目创建,到一定阶段后再与远程库关联.下面步骤解决本地库与远程库在这种情形. 1. 初始化本地库,既然项目已经创建了,相信这个也已经知道了 ...