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. css属性详解和浮动

    一.CSS属性组成和作用 属性:属性值 1)每个css样式都必须由两部分组成:选择符和声明 注:声明又包括属性和属性值 2)css属性:属性是指定选择符具有的属性,他是css的核心,css2共有150 ...

  2. 高阶篇：4.2）DFMEA设计失效模式和失效后果分析-总章

    本章目的:了解FMEA和DFMEA的概念. 1.什么是FMEA(what) 潜在的失效模式及后果分析(Potential Failure Mode and Effects Analysis,简称FME ...

  3. .net core webapi 在原有基础上修改。

    using System; using System.Collections.Generic; using System.Data; using System.IO; using System.Lin ...

  4. erlang随笔3--OTP

    OTP最核心的概念就是行为.一个行为封装了某种常见的行为模式.可以把这些行为理解为某种应用程序框架.可以通过回调模块来 定制这些框架.OTP依靠行为引用了容错,扩容和动态代码升级等特性.所以在写回调模 ...

  5. day1-Python擅长的领域+学习内容

    Python擅长的领域 WEB开发 Django   Pyramid     Tornado       Bottle    Flask    WebPy 网络编程 Twisted        Re ...

  6. jQuery练习 | 复选框及编辑模式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. SQL数据库正在恢复 查看进度

    在使用SQL的过程中.. 开启一个事务..进行大计算量..在中间出错或者强制杀死SQL服务进程..总之事务没有提交.. 再次开启时sql会进入自动检查的过程.. 数据库小的话问题不大..会比较快.. ...

  8. React条件性渲染

    React条件性渲染的方式和Vue是不同的,之前用vue做项目时觉得vue是在是强大,通过v-if就可以选择性的渲染组件,另外,对于列表的渲染更是方便,一个v-for就可以进行快速的渲染,但是Reac ...

  9. jQuery validate 设置失去焦点就校验

    <script type="text/javascript"> $(function(){ var flag = $("#addForm").val ...

  10. git 学习之什么是版本库

    什么是版本库? 我们一般把版本库也叫仓库(repository),其实我们可以简单的把它看成一个目录,只不过目录里面的文件都会由 Git 进行管理,当我们对文件进行修改.删除.Git 都可以对其进行跟 ...