☀【动画】过渡 transition
CSS3 动画系列3-transition（过渡） √
http://www.css88.com/archives/5403
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 100px;
height: 100px;
background: #F00;
transition: width 2s, height 2s, background 2s;
}
.box1:hover {
width: 200px;
height: 50px;
background: #FF0;
}
</style>
</head>
<body>
<div class="box1">如果丘处机没有路过牛家村，中国将是最发达国家</div>
</body>
</html>
手机支付宝
http://qianbao.alipay.com/index.htm
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<style>
span {
position: relative;
color: navy;
font-size: 100px;
font-family: arial;
opacity: 0;
/* transition-property transition-duration transition-timing-function transition-delay */
-webkit-transition: all .8s ease .3s;
-moz-transition: all .8s ease .3s;
transition: all .8s ease .3s;
}
.word1 {
left: -100px;
}
.word2{
left: 100px;
}
.anim-word1 {
left: 0;
opacity: 1;
}
.anim-word2 {
left: 0;
opacity: 1;
}
</style>
</head>
<body>
<span class="word1">shanghai</span>
<span class="word2">hangzhou</span>
<script>
var word = document.getElementsByTagName('span')
var word1 = word[0]
var word2 = word[1]
setTimeout(function() {
word1.className = 'word1 anim-word1'
word2.className = 'word2 anim-word2'
}, 1000)
</script>
</body>
</html>
☀【动画】过渡 transition的更多相关文章
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- transition 动画过渡
1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
- CSS3之过渡Transition
CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...
- CSS3之边框样式（动画过渡）
简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...
- css3动画（transition）属性探讨
在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- css动画过渡
css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...
- 初学vue----动画过渡transition简单部分
使用动画效果要用transition包裹,transition(<trsnsition name="xx"><div></div></tr ...
- CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...
随机推荐
- STL 常见容器
vector: 是一种在结尾处高效插入.删除的容器,本质上是一个动态数组,可以自动维护数组的空间分配.它也允许在开头和中间插入.删除数据,但是效率极低. <span style="fo ...
- 火狐flash插件
1.解压缩文件: tar -xzvf ***.tar.gz 会解出一个文件:libflashplayer.so 和一个目录 usr 2.将文件libflashplayer.so 拷贝到目录 /us ...
- MYSQL Error 2006HY000：MySQL server has gone away的解决方案
MySQL server has gone away有几种情况. 1.应用程序(比如PHP)长时间的执行批量的MYSQL语句. 最常见的就是采集或者新旧数据转化. 解决方案: 在my.cnf文件中添加 ...
- [CSS]font- 属性
所有浏览器都支持 font 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 font 简写属性在一 ...
- linux(centos)搭建svn
1.yum install subversion 2.输入rpm -ql subversion查看安装位置 输入 svn --help可以查看svn的使用方法 3.创建svn版本库目录 mkdir - ...
- CentOS 编译安装Apache2.4.10
1.准备编译环境 yum -y install gcc make cmake autoconf libtool libevent 安装apache必须的依赖包 yum -y install apr-u ...
- iis7以上版本权限控制
IIS7.5中(仅win7,win2008 SP2,win2008 R2支持),应用程序池的运行帐号,除了指定为LocalService,LocalSystem,NetWorkService这三种基本 ...
- struts2用了哪几种模式
代理模式 责任连模式 ActionVacation 迭代模式
- final, finally 和finalize的区别
final 修饰符(关键字) 如果一个类被声明为final,意味着它不能再派生新的子类,不能作为父类被继承.因此一个类不能及被声明为abstract,又被声明为final的.将变量或方法声明为fina ...
- Python元类实践--自己定义一个和collections中一样的namedtuple
大家可能很熟悉在collections模块中有一个很好用的扩展数据类型-namedtuple. 如果你还不知道这个类型,那么请翻看标准手册. 我利用元类轻松定义一个namedtuple. 先把代码贴上 ...