transition

混合效果 代码如下： <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"> 盒状收缩效果 代码如下： <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)"> 盒状放射效果 代码如下： <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)"> 圆形收缩效果 代码如下：<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)"> 圆形放射效果 代码如下： <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)"> 向上擦除效果 代码如下：<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)"> 向下擦除效果 代码如下： <meta http-equiv="Page-Enter" content=

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画： 是从一个状态 渐渐的过渡到另外一个状态 可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。 我们现在经常和 :hover 一起 搭配使用。 语法格式: transition: 要过渡的属性 花费时间 运动曲线 何时开始; 属性 描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3 transition-delay 规定过渡效果何时开始。默认是 0。 3 属性 ​ 属性就是你想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。 花费时间 transition-duration 花费时间 单位是 秒（必须写单位） s ms 比如 0.5s 这个s单位必须写 ms 毫秒 运动曲线

在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式 第二，声明过渡元素最终状态样式，比如悬浮状态 第三，在默认样式中通过添加过渡函数，添加一些不同的样式 CSS3的过渡transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的css属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间 transition-property: none | all | [ident]... transition-duration: time transition-timing-function: ease（速度逐渐变慢） | linear（恒速） | ease-in（加速状态，渐显效果） | ease-out（减速状态，渐隐效果） | ease-in-out（先加速再减速，渐显渐隐效果） transition-delay: time 例子： -webkit-transition:all .5s ease-in .2s; transition:all .5s ease-in .2s; keyframes介绍 keyframes被称为关键帧