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. 10分钟教你用Python实现微信自动回复

    01 前言&&效果展示 相信大家都有忙碌的时候,不可能一直守在微信上及时回复消息.但微信又不能像QQ一样设置自动回复.无妨,今天,我们就来用Python实现微信的自动回复功能吧,并且把 ...

  2. Flink学习笔记:Operators串烧

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  3. loj #6570. 毛毛虫计数

    $ \color{#0066ff}{ 题目描述 }$ hsezoi 巨佬 olinr 喜欢 van 毛毛虫,他定义毛毛虫是一棵树,满足树上存在一条树链,使得树上所有点到这条树链的距离最多为 1. 给定 ...

  4. POJ2299 Ultra-QuickSort (JAVA)

    思路是分治,和归并排序一模一样,只是在归并的过程中,顺便统计后半部分序列比前半部分序列小的有多少个 但一直WA,最后是结果数量比较大,会超过int,用long就ac了..做题真坎坷 贴AC代码 imp ...

  5. python爬虫之urllib库（一）

    python爬虫之urllib库(一) urllib库 urllib库是python提供的一种用于操作URL的模块,python2中是urllib和urllib2两个库文件,python3中整合在了u ...

  6. flutter 导入 http 库 import 'package:http/http.dart' as http;

    1,查看最新 http 版本 https://pub.dartlang.org/packages/http#-installing-tab- 1. Depend on it 在项目中找到 pubspe ...

  7. Python——内部参数对外部实参的影响

    无论函数传递的参数的可变还是不可变,只要针对参数使用赋值语句,会在函数内部修改局部变量的引用,不会影响到外部变量的引用,而如果传递的参数是可变类型,在函数内部使用方法修改了数据的内容,同样会影响到外部 ...

  8. python迭代、可迭代对象、迭代器及生成器

    迭代 通常意义上的迭代是指:重复执行一系列运算,从前面的量依次推出后面的量的过程,每一次迭代的结果,会作为下一次迭代的初始值. 在c.c++.java等编程语言中的for循环语句,就是一个迭代过程,例 ...

  9. 《The One 团队》第二次作业：团队项目选题

    项目 内容 作业所属课程 http://www.cnblogs.com/nwnu-daizh/ 作业要求 https://www.cnblogs.com/nwnu-daizh/p/10726884.h ...

  10. 使用Hive Rest API 连接HDInsight

    以下连接是微软最新的关于HDInsight中Hive命令的RestAPI示例地址.. 使用 HDInsight .NET SDK 运行 Hive 查询 请使用接口有异常的同学检查是否使用的是下面地址中 ...