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的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...
随机推荐
- 51nod DP 最大子段和
#include<iostream> #include<algorithm> #include<cstdio> #define MAXN 50000 using n ...
- Django-跨站请求
//用户验证Tonken 在Html 中 设置一个Token {% csrf_token %} //在代码Views.py 中返回值添加 context_instance=RequestContext ...
- Spring+EhCache缓存实例
一.ehcahe的介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider.Ehcache是一种广泛使用的开源Java分布式 ...
- 【BZOJ-3747】Kinoman 线段树
3747: [POI2015]Kinoman Time Limit: 60 Sec Memory Limit: 128 MBSubmit: 715 Solved: 294[Submit][Stat ...
- DOSBOX 自动挂载技巧
DOSBOX下载之后,win10已经不支持debug了(win-XP虚拟机有!),所以需要单独下载,每次使用都需要挂载上去,十分不方便. 解决办法是修改属性文件,每次挂载都自动执行: 把编写好的汇编文 ...
- SqlHelper c#
using System; using System.Data; using System.Xml; using System.Data.SqlClient; using System.Collect ...
- 第四章 电商云化，4.2 集团AliDocker化双11总结(作者： 林轩、白慕、潇谦)
4.2 集团AliDocker化双11总结 前言 在基础设施方面,今年双11最大的变化是支撑双11的所有交易核心应用都跑在了Docker容器中.几十万Docker容器撑起了双11交易17.5万笔每秒的 ...
- 线程安全的无锁RingBuffer的实现
这里的线程安全,是指一个读线程和一个写线程,读写两个线程是安全的,而不是说多个读线程和多个写线程是安全的.. 在程序设计中,我们有时会遇到这样的情况,一个线程将数据写到一个buffer中,另外一个线程 ...
- [NHibernate]O/R Mapping基础
系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) 引言 对象和关系数据库 ...
- Android 四大组件之Service
---恢复内容开始--- 1,Service的生命周期