过渡效果中有：

1平滑效果

2线性过渡

3由慢到快

4由快到慢

5慢-快-慢  等等 具体参考 w3chool

例如：

<body>

　　　　<div class="out">

　　　　　　<div class="inner1">线性过渡</div>

　　　　　　<div class="inner3">由慢到快</div>

　　　　　　<div class="inner4">由快到慢</div>

　　　　　　<div class="inner2">平滑过渡</div>

　　　　　　<div class="inner5">由慢到快再到慢</div>

　　　　</div>

</body>

CSS:

.out {
  width: 800px;
  padding: 1px;
  background-color: #999999;
  }
   
  .out div {
  width: 100px;
  height: 100px;
  margin: 25px;
  background-color: #21bbca;
  font-size: 12px;
  text-align: center;
  line-height: 100px;
  }
   
  .inner1 {
  -webkit-transition: all 4s linear;
  }
  .inner2 {
  -webkit-transition: all 4s ease;
  }
  .inner3 {
  -webkit-transition: all 4s ease-in;
  }
  .inner4 {
  -webkit-transition: all 4s ease-out;
  }
  .inner5 {
  -webkit-transition: all 4s ease-in-out;
  }
   
  .out:hover div {
  margin-left: 75%;
  -webkit-transform: rotate(360deg);
  border-radius: 50%;
  } 

CSS3动画里的过渡效果的更多相关文章

  1. 关于JS动画和CSS3动画的性能差异

    本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...

  2. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  3. CSS3动画--过渡效果

    CSS3动画--过渡效果 transition                               设置四个过渡属性 transition-property          过渡的名称 tr ...

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

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

  5. 【转】CSS3动画帧数科学计算法

    本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————–     华丽丽的开篇     ...

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

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

  7. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  8. css3动画和jquery动画使用中要注意的问题

    前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...

  9. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

随机推荐

  1. Alpha阶段第一次Scrum Meeting

    Scrum Meeting   Alpha 情况简述 Alpha阶段第一次Scrum Meeting 敏捷开发起始时间 2016/10/18 00:00 敏捷开发终止时间 2016/10/20 00: ...

  2. Web Service 中返回DataSet结果大小改进

    http://www.cnblogs.com/scottckt/archive/2012/11/10/2764496.html Web Service 中返回DataSet结果方法: 1)直接返回Da ...

  3. 非常提高mac生产力的一些插件归纳整理

    1.cheatsheet   快捷键提示插件,下载后按command键3秒,可以显示当前app的所有快捷键. 比如我现在在chrome的界面,按下command三秒,会弹出一个快捷键提示框. 2.Ba ...

  4. php基础之gd图像生成、缩放、logo水印和简单验证码实现

    gd库是php最常用的图片处理库之一(另外一个是imagemagick),可以生成图片.验证码.水印.缩略图等等.要使用gd库首先需要开启gd库扩展,windows系统下需要在php.ini中将ext ...

  5. Angular-Chart.js 初接触;;;

    可以先看下下面的链接,了解下, 推荐链接 准备工作 JS文件{angular.js.Chart.js.angular-chart.js} 这3个文件我的获取难易程度:Chart.js > ang ...

  6. 基于iSCSI的SQL Server 2012群集测试(一)--SQL群集安装

    一.测试需求介绍与准备 公司计划服务器迁移过程计划同时上线SQL Server2012,引入SQL Server2012群集提高高可用性,需要对SQL Server2012群集技术进行研究.测试,确保 ...

  7. Hadoop里的数据挖掘应用-Mahout——学习笔记<三>

    之前有幸在MOOC学院抽中小象学院hadoop体验课. 这是小象学院hadoop2.X的笔记 由于平时对数据挖掘做的比较多,所以优先看Mahout方向视频. Mahout有很好的扩展性与容错性(基于H ...

  8. 今天在学习NTP时发现了2个网站

    NTP 调整系统时间 一个网站是:http://chrony.tuxfamily.org/doc/1.31/manual.html  这个是专门介绍chrony的,做的很详细. 另外一个是:http: ...

  9. Codeforces#262_1002

    Codeforces#262_1002 B. Little Dima and Equation time limit per test 1 second memory limit per test 2 ...

  10. 【转】4G内存下MySQL修改配置文件以优化效率（来自discuz）

    摘要:公司网站访问量越来越大,MySQL自然成为瓶颈,因此最近我一直在研究 MySQL 的优化,第一步自然想到的是 MySQL 系统参数的优化,作为一个访问量很大的网站(日20万人次以上)的数据库. ...