css3 transition
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| .trans1{ | |
| -webkit-transition:0.5s ease; | |
| -moz-transition:0.5s ease; | |
| -webkit-transition-property:all; | |
| -moz-transition-property:all; | |
| position:absolute; | |
| left:10px; | |
| top:50px; | |
| height:100px; | |
| width:100px; | |
| background:#ef4900; | |
| color:white; | |
| } | |
| .trans2{ | |
| -webkit-transition:0.5s ease-in-out; | |
| -moz-transition:0.5s ease-in-out; | |
| -webkit-transition-property:width; | |
| -moz-transition-property:width; | |
| position:absolute; | |
| left:350px; | |
| top:50px; | |
| height:100px; | |
| width:100px; | |
| background:blue; | |
| color:yellow; | |
| } | |
| .trans3{ | |
| -webkit-transition:0.5s ease; | |
| -moz-transition:0.5s ease; | |
| -webkit-transition-property:height; | |
| -moz-transition-property:height; | |
| width:100px; | |
| height:100px; | |
| background:green; | |
| color:#ccc; | |
| position:absolute; | |
| left:780px; | |
| top:50px; | |
| } | |
| .trans1:hover{ | |
| width:300px; | |
| height:300px; | |
| } | |
| .trans2:hover{ | |
| width:300px; | |
| } | |
| .trans3:hover{ | |
| height:300px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="trans1">变换所有s属性</div> | |
| <div class="trans2">变换宽度属性</div> | |
| <div class="trans3">变换高度属性</div> | |
| <!-- transform呈现是一种变形结果，而transition呈现是一种过渡，通俗一点就是一种动画转化过程，如渐显，减弱、动画快慢等，transform，和transition是两种不同动画模型； | |
| 1、transition的过渡属性： | |
| transition属性是一个间歇属性，用于设置四个过渡属性； | |
| 语法 | |
| transition：property duration timing-function delay； | |
| 值描述transition-property规定设置过渡效果的css属性名称。 | |
| transition-duration规定完成过渡效果需要的时间秒，或毫秒； | |
| transition-timing-function规定速度效果的速度曲线。 | |
| transition-delay定义过渡效果何时开始 | |
| transition-property； | |
| 值： | |
| all：显示指对所有元素； | |
| none:表示没有元素； | |
| ident:制定css属性列表； | |
| 注：请始终设置transition-duration属性，否则时长为0；就不会产生过渡效果，transform与transition此时效果一样 | |
| transition：过渡属性名称 过渡时间 过度模式 ； | |
| transition-timing-function的五种值； | |
| 1：ease逐渐变慢； | |
| 2：liner：匀速； | |
| 3：ease-in:缓慢开始（加速）； | |
| 4：ease-out：缓慢结束（减速）； | |
| 5：ease-in-out：缓慢开始，缓慢结束（先加速，或减速）； | |
| 6：cubic-bezier 贝赛尔曲线（mathewlein.com/easer）;--> | |
| </body> | |
|
</html> |
css3 transition的更多相关文章
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
- 【转】CSS3 transition规范的实际使用经验
原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...
- CSS3 transition规范的实际使用经验
本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...
- css3 Transition动画执行时有可能会出现闪烁的bug
css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...
- CSS3 transition 属性过渡效果 详解
CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...
- CSS3 & transition & animation
CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...
- css3 transition动画
CSS3: 一.transition: <property> <duration> <animation type> <delay> eg: .div{ ...
- css3 transition effect(其它效果)
http://blog.csdn.net/jerryvon/article/details/8755548 整理了一些其它动画,用的模板为flip模板,只不过CSS3不同 /************* ...
- 制作动画平滑过渡效果：《CSS3 Transition》
W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
随机推荐
- PHPExcel读取excel文件
<?php set_time_limit(0); $dir = dirname(__FILE__);//当前脚本所在路径 require $dir."/PHPExcel_1.8.0/C ...
- download ncRNA sequences form NCBI
#!/bin/bash usage() { echo;echo "Usage: ./`basename $0` [gi number list] [number of cpu]"; ...
- POJ2396 Budget
Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 7401 Accepted: 2764 Special Judge D ...
- Git初级实践教程（图文）
关于Git Git的由来 Linux 的创始人 Linus Torvalds 在 2005 年开发了 Git 的原型程序.当时,由于在 Linux 内核开发中使用的既有版本管理系统的开发方许可证发生了 ...
- 项目中CKEditor修改宽度为自适应
项目中用到CKEditor,在config.js中直接定义config.width使得宽度无法自适应,尝试了好多次后发现了一种方法: 放弃在config.js中配置宽度 在页面检查元素,找到id为ck ...
- 【CityHunter】游戏流程设计及技术要点
目前CityHunter的核心玩法和主要的技术实现点已经全部到位,但是本人并未真正设计过整个游戏系统,所以只能循规蹈矩的先从最基本的流程图开始规划. 以上的流程是打开游戏直到控制台,接下来,是从控制台 ...
- eclipse中SSH三大框架环境搭建<三>
相关链接: eclipse中SSH三大框架环境搭建<一> eclipse中SSH三大框架环境搭建<二> 引言:通过上两篇文章我们已经可以掌握struts2和spring的环境的 ...
- 迭代器学习之一：使用IEnumerable和IEnumerator接口
写博客是检验我学习的成果之一以及自我总结的一种方式,以后会经常利用这种方式进行技术交流和自我总结,其中认识不深难免会有错误,但是一直懂得不懂就问,不懂就学的道理! 1.首先看一个简单的列子 , , , ...
- Emgu.CV/opencv 绘图 线面文字包括中文
绘图很简单 Emgu.CV.Image<Bgr, Byte> image; 使用image.Draw可以画各种图形和文字包括英文及数字,不支持中文 CircleF circle = ...
- NodeJs框架
Node.js非常适用于Web开发,但是现在无论是一个网站,还是Web App都已经成为包括很多不同部分,如前端.数据库.业务模块.功能模块等等的大型项目,使用Node.js从零开始进行Web开发,也 ...