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示例：
背景颜色变化

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>css3动画</title>
  6.     <style>
  7.         div{
  8.             background-color:#ffff00;
  9.             -webkit-transition:background-color 1s linear;
  10.             -moz-transition:background-color 1s linear;
  11.             -o-transition:background-color 1s linear;
  12.         }
  13.         div:hover{
  14.             background-color:#00ffff;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div>示例文字</div>
  20. </body>
  21. </html>

效果代码：

  1. <style>
  2.         #transition{
  3.             background-color:#ffff00;
  4.             -webkit-transition:background-color 1s linear;
  5.             -moz-transition:background-color 1s linear;
  6.             -o-transition:background-color 1s linear;
  7.         }
  8.         #transition:hover{
  9.             background-color:#00ffff;
  10.         }
  11.     </style>
  12. <div id="transition">示例文字</div>

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

  1. <style>
  2.         #tmore{
  3.             background-color:#ffff00;
  4.             height:50px;
  5.             -webkit-transition:background-color 1s linear,color 1s linear,height 1s linear;
  6.             -moz-transition:background-color 1s linear,color 1s linear,height 1s linear;
  7.             -o-transition:background-color 1s linear,color 1s linear,height 1s linear;
  8.         }
  9.         #tmore:hover{
  10.             background-color:#00ffff;
  11.             height:100px;
  12.         }
  13.     </style>
  14. <div id="tmore">示例文字</div>

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

  1. <style>
  2.         #imgtr{
  3.             position:absolute;
  4.             left:0;
  5.             background-color:#ffff00;
  6.             -webkit-transform:rotate(0deg);
  7.             -webkit-transition:left 1s linear,-webkit-transform 1s linear,height 1s linear;
  8.             -moz-transform:rotate(0deg);
  9.             -moz-transition:left 1s linear,-moz-transform 1s linear,height 1s linear;
  10.             -o-transform:rotate(0deg);
  11.             -o-transition:left 1s linear,-o-transform 1s linear,height 1s linear;
  12.         }
  13.         #imgtr:hover{
  14.             position:absolute;
  15.             left:30px;
  16.             -webkit-transform:rotate(720deg);
  17.             -moz-transform:rotate(720deg);
  18.             -o-transform:rotate(720deg);
  19.         }
  20.     </style>
  21. <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. iOS AppIcon尺寸和上传ITunes构建版本尺寸

    避免忘记. 记录一下 App Icon: 29X2940X4058X5876X7687X8780X80120X120152X152167X167180X180 ITunes构建版本: 1242 x 2 ...

  2. Mysql主从复制，读写分离(mysql-proxy)，双主结构完整构建过程

    下面介绍MySQL主从复制,读写分离,双主结构完整构建过程,不涉及过多理论,只有实验和配置的过程. Mysql主从复制(转载请注明出处,博文地址:) 原理是master将改变记录到二进制日志(bina ...

  3. 012.对netmap API的解读

    一.简要说明: 1.netmap API主要为两个头文件netmap.h 和netmap_user.h ,当解压下载好的netmap程序后,在./netmap/sys/net/目录下,本文主要对这两个 ...

  4. Mysql 主从热备份

    工作原理 首先锁定并备份主服务器数据库,从服务器导入备份的数据库,实现两个数据库的初态一样.然后把主服务器上执行过的sql语句都记录到二进制日志 Binarylog 中,从服务器会来读取这个log, ...

  5. [bootsrap]模态框使用例

    <a href="#modal1" role="button" class="btn btn-primary btn-sm" data ...

  6. 在 KVM 上安装 Win7 虚拟机

    之前都是在用Linux 虚机,现在有需要用到Win7 虚机,才发现在 KVM 上安装 Win7 的过程远比想象中的复杂.本文就把其过程做个简单总结. 1. 在 Virtual Machine Mana ...

  7. Markdown 完全指南

    概述 Markdown 是一种用于网络文本书写的轻量级标记语言,广泛用于个人 blog.github.wiki 中.其实浏览器并不能识别 Markdown 的语法,但许多 blog.wiki 平台以及 ...

  8. 骨骼蒙皮动画算法（Linear Blending Skinning）

    交互式变形是编辑几何模型的重要手段,目前出现了许多实时.直观的交互式变形方法.本文介绍一种利用线性混合蒙皮(Linear Blending Skinning,LBS)技术来实现网格变形的方法,线性混合 ...

  9. 【swift学习笔记】三.使用xib自定义UITableViewCell

    使用xib自定义tableviewCell看一下效果图 1.自定义列 新建一个xib文件 carTblCell,拖放一个UITableViewCell,再拖放一个图片和一个文本框到tableviewc ...

  10. web 前端常用组件【06】Upload 控件

    因为有万恶的IE存在,所以当Web项目初始化并进入开发阶段时. 如果是项目经理,需要知道客户将会用什么浏览器来访问系统. 明确知道限定浏览器的情况下,你才能从容的让手下的封装必要的前端组件. 本篇文章 ...