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的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
随机推荐
- hibernate-cache
hibernate缓存分:一级缓存.二级缓存.三级缓存 一级缓存:Session内的缓存 实例: /*一级缓存: * session内的缓存 * */ @Test public void test1( ...
- Python的方法解析顺序(MRO)[转]
本文转载自: http://hanjianwei.com/2013/07/25/python-mro/ 对于支持继承的编程语言来说,其方法(属性)可能定义在当前类,也可能来自于基类,所以在方法调用时就 ...
- JavaScript把客户端时间转换为北京时间
写在前面 写了一遍又一遍,网页老卡住,没保存下来,不写了. 时间转换代码 //获得北京时间 Date.prototype.getBJDate = function () { //获得当前运行环境时间 ...
- 11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- Mac Sublime Text complie python .py error /bin/bash: shell_session_update: command not found
1.get the rvm version rvm -v 2.make sure the version at least 1.26 above. 3.then go ahead rvm get he ...
- Coding编译连接过程中遇到的问题及解决方法(iOS)
Coding 上下载地址:https://coding.net/u/coding/p/Coding-iOS/git Github源码下载地址:https://github.com/Coding/Cod ...
- asp.net中套用母版页之后的findcontrol
套用模板页之后,如果要在内容页中查找某个控件,需要先找到模板页中的ContentPlaceHolder,在通过ContentPlaceHolder查找代码,如下: LinkButton btn = t ...
- iPad版微信终于来临了 微信5.4版搜索更智能 转账就是发消息
等待甚久的iPad版微信终于来临了!昨日微信iOS版本更新至5.4.0.16,新增功能包括搜索公众号.识别图中二维码.面对面收钱,同时适配iPad.(微信5.4安卓版重回ios风格 导航菜单都放底栏位 ...
- 苹果微信下载 iOS微信各版本列表
微信在不断地更新迭代,ios微信下载点击这里立即开始(手机电脑都可以,电脑端要安装iTunes),每个版本都放出一些新的功能或修复相关错误,详情可以点击下面的版本链接进行查看.(这里有Android微 ...
- sublime 编译运行C程序
{ "cmd": ["gcc", "${file}", "-o","${file_path}/${file_b ...