过渡效果中有：

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. mysql中bit_count和bit_or函数的含义

    翻阅mysql手册时,看到有个示例使用了bit_or方法来去除重复的数据,一开始没看明白,后来看明白之后感觉非常巧妙.示例要实现的功能就是计算每月有几天有访问,先把示例摘录在这里. 1 2 3 4 5 ...

  2. WinForm------GridControl添加底部合计框

    1.在GridView属性中找到"OptionsView" => "ShowFooter" = true 2.打开编辑器,如图 . 3.获取统计数据(注意 ...

  3. 逆向工程学习第三天--另外一个ShellCode

    上周自己打造的添加用户的shellcode太长,不过当时主要目的是为了锻炼手动asm,熟悉一些复杂的参数类型如何手动进行构造,然后通过堆栈传递. 接下来就打造一个弹计算器的shellcode来进行接下 ...

  4. 硕士研究生入学考试复试试卷答案.tex

    %该模板用于数学答题 \documentclass[UTF8]{ctexart}%[中文编码 UTF8] \usepackage{fancyhdr}%{页眉页脚页码} \pagestyle{fancy ...

  5. G-FAQ – Why is Bit Depth Important?

    直接抄: https://apollomapping.com/2012/August/article15.html For this month’s Geospatial Frequently Ask ...

  6. UITabBarController 、TabBar背景颜色设置，UITabBarItem的文字样式（颜色和大小）UITabBarItem的位置调整

    改变UITabBarController的颜色 UIView*mView=[[UIView alloc]initWithFrame:CGRectMake(0,0,320,48)];//这是部分tabb ...

  7. html5中常见的全局属性

    1.contentEditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 该元素还隐藏一个inherit状态  也是 ...

  8. [译] 你该知道的javascript作用域 (javascript scope)(转)

    javascript有一些对于初学者甚至是有经验的开发者都难以理解的概念. 这个部分是针对那些听到 : 作用域, 闭包, this, 命名空间, 函数作用域, 函数作用域, 全局作用域, 变量作用域( ...

  9. JS中数组Array的用法{转载}

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^var arr = new Array();arr[0] = "aaa";arr[1] ...

  10. multiple merge document

    http://www.aspose.com/docs/display/wordsnet/How+to++produce+multiple+documents+during+mail+merge