css3中的动画功能分为transitions功能和animations功能，这两种功能都可以通过改变css属性值来产生动画效果。今天带大家一起来看看css3动画功能中的transitions的用法。
transitions用法：
transition: property duration timing-function
其中property表示对哪个属性进行平滑过渡，duration表示在多长时间内完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡其中包括：
linear[规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）]；
ease[规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）]；
ease-in[规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）]；
ease-out[规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）]；
ease-in-out[规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）]；
cubic-bezier(n,n,n)[ 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值]。
Transitions示例：
背景颜色变化

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>css3动画</title>

    <style>

        div{

            background-color:#ffff00;

            -webkit-transition:background-color 1s linear;

            -moz-transition:background-color 1s linear;

            -o-transition:background-color 1s linear;

        }

        div:hover{

            background-color:#00ffff;

        }

    </style>

</head>

<body>

    <div>示例文字</div>

</body>

</html>

效果代码：

<style>

        #transition{

            background-color:#ffff00;

            -webkit-transition:background-color 1s linear;

            -moz-transition:background-color 1s linear;

            -o-transition:background-color 1s linear;

        }

        #transition:hover{

            background-color:#00ffff;

        }

    </style>

<div id="transition">示例文字</div>

使用transitions功能时同时平滑过渡多个属性值：

<style>

        #tmore{

            background-color:#ffff00;

            height:50px;

            -webkit-transition:background-color 1s linear,color 1s linear,height 1s linear;

            -moz-transition:background-color 1s linear,color 1s linear,height 1s linear;

            -o-transition:background-color 1s linear,color 1s linear,height 1s linear;

        }

        #tmore:hover{

            background-color:#00ffff;

            height:100px;

        }

    </style>

<div id="tmore">示例文字</div>

在展示一个示例，将下面的文字换成图片效果会更好：

<style>

        #imgtr{

            position:absolute;

            left:0;

            background-color:#ffff00;

            -webkit-transform:rotate(0deg);

            -webkit-transition:left 1s linear,-webkit-transform 1s linear,height 1s linear;

            -moz-transform:rotate(0deg);

            -moz-transition:left 1s linear,-moz-transform 1s linear,height 1s linear;

            -o-transform:rotate(0deg);

            -o-transition:left 1s linear,-o-transform 1s linear,height 1s linear;

        }

        #imgtr:hover{

            position:absolute;

            left:30px;

            -webkit-transform:rotate(720deg);

            -moz-transform:rotate(720deg);

            -o-transform:rotate(720deg);

        }

    </style>

<div id="imgtr">示李文忠</div>

关于css3中的动画，今天就写这些，还有一个动画下次在说了，亲记得关注哦。

CSS3中的动画功能（一）的更多相关文章

  1. css3中的动画功能

    直接用我的一段代码演示下css3中实现动画效果的事例,让一个div自动旋转起来 代码如下: <!doctype html> <html lang="en"> ...

  2. CSS3中的动画功能（二）

    上一篇文章讲解了css3动画中的一个即transitions,那么今天来说说另外一个animations.和transitions不同的是animations可以定义多个关键帧以及每个关键帧中元素的属 ...

  3. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

  4. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  6. CSS3中的动画效果-------Day72

    还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...

  7. CSS3的transition动画功能

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 学习css3中的动画

    css animations 主要有两块构成,那么是哪两块呢? keyframes : 定义了什么阶段展示什么样的动画 animation 属性 :把动画挂载到一个具体的dom上,并且定义如何动起来: ...

  9. 第100天：CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

随机推荐

  1. Android 上实现像微信一样的用Fragment来实现的Tab切页效果 提供源码下载

    网有不少的例子,但是要么是像微信一样可是没有使用Fragment实现,要么是只实现了一个很简单的切换,没有下面的菜单页.这个例子有实现了,我觉得暂时够我用了##实现类:+ MainTabFragmen ...

  2. js中取得当前加载的js的src地址

    在很多js框架中看到过,如果要动态加载框架内部的其他js,加载的时候加载的地址经常是一个相对的地址,只能是这样了哦,因为框架根本不知道用此框架的用户,将框架js文件放的具体目录,所以框架中一般会采用如 ...

  3. ipv4理论知识2-分类编址、ip分类、网络标识、主机标识、地址类、地址块

    分类编址 ipv4的体系结构中有分类编址和无分类编址(后续会介绍到),在分类编址时,ipv4地址分为A.B.C.D.E这5类.每类占用的IP比例和个数如下图: ipv4分类识别 计算机以二进制方式存储 ...

  4. ipv4理论知识1-ipv4介绍,ipv4记法,地址段个数算法

    定义 在TCP/IP协议中,用于在IP层识别连接到因特网设备的标识符称为因特网地址或IP地址.IPv4地址是一个32位的地址. 地址空间 像IPv4这种定义了地址的协议都有一个地址空间.地址空间就是协 ...

  5. 《Single Image Haze Removal Using Dark Channel Prior》一文中图像去雾算法的原理、实现、效果（速度可实时）

    最新的效果见 :http://video.sina.com.cn/v/b/124538950-1254492273.html 可处理视频的示例:视频去雾效果 在图像去雾这个领域,几乎没有人不知道< ...

  6. C#学习笔记-KeyDown、KeyPress、KeyUp事件以及KeyCode、KeyData、KeyValue、KeyChar属性

    本来没打算单独写的,但是在自己弄测试小程序的时候,越写发现不清楚的东西越多,所以实践又一次证明:纸上得来终觉浅,绝知此事要躬行! 直接贴代码了: //发生顺序:KeyDown->KeyPress ...

  7. 浅谈Tuple之C#4.0新特性那些事儿你还记得多少？

    来源:微信公众号CodeL 今天给大家分享的内容基于前几天收到的一条留言信息,留言内容是这样的: 看了这位网友的留言相信有不少刚接触开发的童鞋们也会有同样的困惑,除了用新建类作为桥梁之外还有什么好的办 ...

  8. hibernate中HQL练习时候一个小小的错误导致语法异常

    package cn.db.po.test; import java.util.List; import cn.db.po.User; import cn.db.po.biz.UserBiz; pub ...

  9. app端微信支付（二） - 生成预付单

    ​前一篇文章的时序图中说了,app端调用微信支付必须先由后台调用微信后台生成预付单,再构建参数给手机端,而数据的构建要以xml形式,那么看看代码具体实现吧,代码已经精简过了,自己的业务已经除去,精简的 ...

  10. Java 读写文件方案

    一.获得控制台用户输入的信息     public String getInputMessage() throws IOException...{         System.out.println ...