过渡效果中有：

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. WIN7 + IIS7 Service Unavailable HTTP Error 503. The service is unavailable.

    在win7上开启IIS功能,进行网站发布. 但是开启IIS之后,打开默认网站都打不开,显示 Service Unavailable HTTP Error 503. The service is una ...

  2. 调试使用windows堆程序遇到的问题

    今天测试我的api hook demo,中间有个单向链表,我对他进行遍历的时候,通过判断链表当前元素是否为NULL(即0)来进行循环控制,在cmd下正常运行,输出的是:,struct addr is ...

  3. Excel 转Latex 及tex表格的处理 总结

    Excel 转LaTex表格 与TeX表格的处理 总结   工具使用:一个Latex表格输入神器--Excel2Tex插件的安装过程. 首先下载插件:http://www.ctan.org/tex-a ...

  4. Linux下百度云盘报 获取bdstoken失败

    在用linux下百度云盘工具(bcloud),登录时,报获取bdstoken失败. 在网上搜了一下,解决办法如下. 找到auth.py文件 locate auth.py |grep bcloud 结果 ...

  5. 大熊君{{bb}}移动开发之旅（第一季）

    一,开篇概述 Hi,大家好!大熊君又和大家见面了,从这篇文章开始我要和大家聊聊移动开发的话题,这部分文章共8季,分别从不同角度来讲解什么是移动开发?移动开发涉及到什么方面的技术点以及移动开发中的常见问 ...

  6. Codeforces Round #262 (Div. 2) 1004

    Codeforces Round #262 (Div. 2) 1004 D. Little Victor and Set time limit per test 1 second memory lim ...

  7. 《征服 C 指针》摘录3：数组 与 指针

    一.数组 和 指针 的微妙关系 数组 是指将固定个数.相同类型的变量排列起来的对象. 正如之前说明的那样,给指针加 N,指针前进“当前指针指向的变量类型的长度 X N”. 因此,给指向数组的某个元素的 ...

  8. CentOS6.3 编译安装LAMP(1)：准备工作

    卸载yum或rpm安装的amp软件 #在编译安装lamp之前,首先先卸载已存在的rpm包. rpm -e httpd rpm -e mysql rpm -e php yum -y remove htt ...

  9. "转" CXF+JAXB处理复杂数据

    CXF简单数据类型以及类(JavaBean)都提供了较好的支持. 但是对于一些复杂类型(集合或者Map的嵌套)的处理时,就需要我们进行“”人工干预“.在网上找了一些文章,其中这篇写的最为详细,再次备注 ...

  10. CentOS7中禁用IPV6

    helps from: https://linux.cn/article-4935-1.html vi /etc/sysctl.conf net.ipv6.conf.all.disable_ipv6 ...