1.transition功能

transition属性的使用方法：transition:property duration timing-function;

其中property表示对哪个属性进行平滑过渡，duration表示多长时间完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡。

多平滑过渡示例：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta http-equiv="content-type" content="text/html; charset=utf-8">

     <meta http-equiv="x-ua-compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <title>测试</title>

 </head>

 <body>

 <div id="test"></div>

 <style>

     #test{

         width: 500px;

         height: 500px;

         background-color: yellow;

         /*css动画*/

         transform: rotate(0);

         -webkit-transition: transform 0.5s linear, width 0.5s linear;

         -moz-transition: transform 0.5s linear, width 0.5s linear;

         -ms-transition: transform 0.5s linear, width 0.5s linear;

         -o-transition: transform 0.5s linear, width 0.5s linear;

         transition: transform 0.5s linear, width 0.5s linear;

     }

     #test:hover{

         width: 200px;

         transform: rotate(180deg);

     }

 </style>

 </body>

 </html>

2.animation功能

使用示例：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta http-equiv="content-type" content="text/html; charset=utf-8">

     <meta http-equiv="x-ua-compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <title>测试</title>

 </head>

 <body>

 <div id="test"></div>

 <style>

 /*animation动画*/

     @-webkit-keyframes colorChange {

         0%{

             background-color: deepskyblue;

         }

         50%{

             background-color: red;

         }

         100%{

             background-color: deepskyblue;

         }

     }

     #test{

         width:500px;

         height: 500px;

         background-color: deepskyblue;

     }

     #test:hover{

         animation-name: colorChange;

         animation-duration: 1s;

         animation-timing-function: linear;

     }

 </style>

 </body>

 </html>

实现动画的方法：

方法 属性值的变化速度
linear 在动画开始时与结束时以同样的速度进行变化
ease-in 动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out 动画开始时速度很快，然后速度沿曲线值进行放慢
ease 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢

CSS3动画功能的更多相关文章

  1. css3动画功能介绍

    一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性 ...

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

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  3. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  4. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  5. CSS3动画变形Animations

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

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

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

  7. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  8. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  9. CSS3 动画一瞥

    伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来,而在这之前,一提到动画我们可能会想到JavaScript,Flash,Java插件等.如果是用JavaScript那倒 ...

随机推荐

  1. threejs的学习笔记

    很多时候,我们在开发3d效果的时候,容易搞不清楚x,y,z坐标分别指示哪个方向 在开发threejs的时候可以先把坐标系添加到场景中,起到一个启示作用. js // show axes in the ...

  2. Java函数的联级调用

    String类的方法可以连续调用: String str="abc"; String result=str.trim().toUpperCase().concat("de ...

  3. 面试笔试（C++部分)

    1.define 和const,inline的区别 define的缺点: 1.边界效应(必须加括号,才能避免边界效应) #define MUL(A,B) A*B 而在使用的时候,这样的调用: ,b=, ...

  4. 3、TensorFlow基础（一） 设计思想与编程模型

    1.TensorFlow系统架构 如图为TensorFlow的系统架构图: TensorFlow的系统架构图,自底向上分为设备层和网络层.数据操作层.图计算层.API层.应用层,其中设备层和网络层,数 ...

  5. 关于dedecms数据量大以后生成目录缓慢的问题解决

    四月份的时候博客被封.我不知情.因为一直很忙,没有来得及看.前两天来看以后,发现居然被封,吓傻了我. 赶紧找原因,原来是转载了某个人的博文,被他举报了,然后就被封了. 觉得很伤心,毕竟这个博客陪伴了我 ...

  6. Kong在windows10的hyperV CentOS上安装

    1.启用hyperV manager 2.下载CentOS 3.给CentOS共享网络,添加Legacy NetWork Adapter 4.启动CentOS后安装kong(官网可查) 5.安装Pos ...

  7. UNIX SHELL基础知识总结(二)

    1. vim,vi及ex的关系 vim不需要安装,vi为ex的“Visual Mode”,Vim是vi的高级版本: 2. Unix Shell 快捷键 Ctrl+a/e将光标定位到 命令的头/尾 Ct ...

  8. selenium+Python(事件)

    1.操作测试对象前面讲到了不少知识都是定位元素,定位只是第一步,定位之后需要对这个元素进行操作.鼠标点击或者键盘输入,这要取决于我们定位的是按钮还输入框.一般来说,webdriver 中比较常用的操作 ...

  9. MySQL移动数据目录出现权限问题

    MySQL移动数据目录出现权限问题 环境: ubuntu 14.04.4 LTS 现象 今天把/var/lib/mysql下的数据文件移动到其他目录下,之后发现启动mysql报错,并且mysql无法运 ...

  10. git忽略ssl认证

    问题 在是用git克隆仓库的时候,报错如下: fatal: unable to access ‘https://github.com/........../‘: OpenSSL SSL_connect ...