CSS3动画里的过渡效果
过渡效果中有：
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动画里的过渡效果的更多相关文章
- 关于JS动画和CSS3动画的性能差异
本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...
- 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的
这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...
- CSS3动画--过渡效果
CSS3动画--过渡效果 transition 设置四个过渡属性 transition-property 过渡的名称 tr ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 【转】CSS3动画帧数科学计算法
本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————– 华丽丽的开篇 ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...
- 转: css3动画简介以及动画库animate.css的使用
~~~ transition animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
随机推荐
- C语言常见类型占用字节数
前言 最近笔试经常遇到c语言各类型变量所占字节数的问题,这里做一个总结好了. 类型 常见的有char.int.long.short.float.double及指针等. 字符类型 这里单只char,ch ...
- Apache与Tomcat服务器
Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一.在Apache基金会里面Apache S ...
- logo新
- Linux lsof命令 以及 恢复删除的文件
1.简介 lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传 ...
- 关于Hibernate5.x的那点事
1.如果采用程序建表: 4.x版本: Configuration cfg = new Configuration().configure(); SchemaExport se = new Schema ...
- git版本控制管理实践-3
git -m 和git -a -m(-am) . 的区别? usally two steps to commit files to respository: first, git add somefi ...
- 脑筋急转弯——Google 面试
1. 村子里有100对夫妻,其中每个丈夫都瞒着自己的妻子偷情...村里的每个妻子都能立即发现除自己丈夫之外的其他男人是否偷情,唯独不知道她自己的丈夫到底有没有偷情.村里的规矩不容忍通奸.任何一个妻子, ...
- seajs源码分析
seajs主要做了2件事 1.定义什么是模块,如何声明模块:id.deps.factory.exports ----define=function(id,deps,factory){return ex ...
- PHP正则表达式模式修饰符详解
PHP模式修饰符又叫模式修正符,是在正则表达式的定界符之外使用.主要用来调整正则表达式的解释,提扩展了正则表达式在匹配.替换等操作的某些功能,增强了正则的能力.但是有很多地方的解释都是错误的,也容易误 ...
- MySQL SQL优化
一.优化数据库的一般步骤: (A) 通过 show status 命令了解各种SQL的执行频率. (B) 定位执行效率较低的SQL语句,方法两种: 事后查询定位:慢查询日志:--log-slow-qu ...