过渡效果中有：

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. kail linux安装软件提示“无法定位软件包”解决方法

    主要是更新源的问题,我安装ibus-pinyin老是提示"无法定位软件包" 最后我用的是163的源: # 源 deb http://mirrors.163.com/debian w ...

  2. U盘启动盘的制作--用U盘硬装Windows系统、或是重装Windows系统

    借助IT天空的优启通U盘启动盘的制作--用U盘装Windows系统.或是重装Windows系统之U盘启动盘的制作 1.==================================== 2.== ...

  3. XML编码utf-8有中文无法解析或乱码 C#

    XML的encoding="UTF-8" ,含有中文的话(部分)会出现乱码. 网上还是很多这类问题跟解决办法的. 表现为用ie或者infopath之类的xml软件打不开这个xml, ...

  4. Java数据结构——字典树TRIE

    又称单词查找树,Trie树,是一种树形结构,是一种哈希树的变种. 典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计. 它的优点是:利用字符串的公共 ...

  5. 将C#文档注释生成.chm帮助文档

    由于最近需要把以前的一个项目写一个文档,但一时又不知道写成怎样的,又恰好发现了可以生成chm的工具,于是乎我就研究了下,感觉还不错,所以也给大家分享下.好了,不多废话,下面就来实现一下吧. 生成前的准 ...

  6. 脑筋急转弯——Google 面试

    1. 村子里有100对夫妻,其中每个丈夫都瞒着自己的妻子偷情...村里的每个妻子都能立即发现除自己丈夫之外的其他男人是否偷情,唯独不知道她自己的丈夫到底有没有偷情.村里的规矩不容忍通奸.任何一个妻子, ...

  7. print、sp_helptext的限制与扩展

    在SQL中,使用动态SQL是很常见的.有些复杂的计算,或是存储过程,代码很长,中间可能有多次执行SQL语句.而调试拼串的SQL语句却是件痛苦的事,很难看出来运行的语句是什么.所以我会经常使用print ...

  8. [Python] 网络爬虫和正则表达式学习总结

    以前在学校做科研都是直接利用网上共享的一些数据,就像我们经常说的dataset.beachmark等等.但是,对于实际的工业需求来说,爬取网络的数据是必须的并且是首要的.最近在国内一家互联网公司实习, ...

  9. CSS透明代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...

  10. HDOJ 4652 Dice

      期望DP +数学推导 Dice Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...