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. linux上的常用的进程与内存优化命令

    进程 ps命令 f 以树状结构显示 u 显示详细信息 a 显示所有进程 -A 显示所有进程 -u 用户名 是显示该用户下的进程 -l 更多进程详细信息 例子1. 以树状结构显示root用户下进程的详细 ...

  2. 4KM

    ip addr add 10.9.8.100/24 broadcast + dev eth0 /etc/sysconfig/network-scripts/ifcfg-eth0 ifdown eth0 ...

  3. （转）Shell分析服务器日志

    一.目录 转载链接:https://mp.weixin.qq.com/s/W1ekSiHgbGInqQ9HmZaJDA 自己的小网站跑在阿里云的ECS上面,偶尔也去分析分析自己网站服务器日志,看看网站 ...

  4. js获取窗口宽度、高度

    1.获取屏幕的高度和宽度(屏幕分辨率): window.screen.height window.screen.width 2.获取屏幕工作区域的高度和宽度(去掉状态栏): window.screen ...

  5. es第十篇：Elasticsearch for Apache Hadoop

    es for apache hadoop(elasticsearch-hadoop.jar)允许hadoop作业(mapreduce.hive.pig.cascading.spark)与es交互. A ...

  6. How to remove constantly launching services on Mac OS X

    Even after you uninstall it, some Mac OS X software just won’t quit nagging you or notifying you of ...

  7. AngularJs学习笔记--Injecting Services Into Controllers

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers 把service当作被依赖的资源加载到con ...

  8. Mysql远程连接配置

    Mysql远程连接配置 环境:unbuntu 16.04 最新版本的Mysql在远程连接的配置上与老版本有了一些出入,照原先的配置已经不行了,所以在这里记录一下遇到的所有新问题. 配置远程连接的步骤如 ...

  9. Azure SQL Federation(联合)

    说Federation(联合)之前,先说下,表的垂直分割 和 水平分割----------------------------------------------------------------- ...

  10. 批量插入Oracle，遇到CLob字段慢的解决办法

    在一次执行批量插入到Oracle表,其他一个字段设置为CLOB,但没有内容,在插入时,在代码指定为CLOB类型,插入相当慢,后来改为VarChar2,速度就上去了,经测试,插入一个65535个字符,没 ...