CSS3 transition 动画过度属性

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:blue;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

时间: 09-01

CSS3 transition 动画过度属性的相关文章

CSS3 transition动画、transform变换、animation动画

一.CSS3 transition动画 transition可以实现动态效果,实际上是一定时间之内,一组css属性变换到另一组属性的动画展示过程. 属性参数: 1.transition-property 设置过渡的属性,比如:width height background-color2.transition-duration 设置过渡的时间,比如:1s 500ms3.transition-timing-function 设置过渡的运动方式 linear 匀速 ease 开始和结束慢速 ease-

css3 Transition动画执行时有可能会出现闪烁的bug

css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit-transform-style: preserve-3d; 需要应用在动画元素上. 第二种方法在低端android上会出现性能问题.所以推荐第一种方法

关于css3 transition transform animation属性

1,transition属性 个人非常习惯用transition过度属性,简单易用.大家称他为animation简化版本. 例如: .contain{ width: 392px; position: relative; bottom: -20px; opacity: 0;} .contain.on{ bottom: 0; opacity: 1; transition:all 500ms ease-out 2s; -webkit-animation:all 500ms ease-out 2s; -

css3 transition 动画基础

一.transition语法: transition:[<transition-property>||<transition-duration>|| <transition-timing-function>||<transition-delay>|| <transition-property>||<transition-duration>|| <transition-timing-function>||<transi

css3 animation动画对应属性解释

animation Value:     [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] [, [<animatio

css3 transition动画

CSS3: 一.transition: <property> <duration> <animation type> <delay> eg: .div{width:10px;} .div:hover{transition:width:100px 2s  ease-in-out 1s;}//1s后div原来width:10px变为100px,所花时间为2s,速度为先加速再减速. <property> 当元素其中一个属性改变时执行transition

5.4 CSS3 transition动画

1.transition-property 设置过渡的属性,比如:width height background-color2.transition-duration 设置过渡的时间,比如:1s 500ms3.transition-timing-function 设置过渡的运动方式 linear 匀速 ease 开始和结束慢速 ease-in 开始是慢速 ease-out 结束时慢速 ease-in-out 开始和结束时慢速 cubic-bezier(n,n,n,n) 比如:cubic-bezi

Transition动画过度效果

transition-property:                       规定设置过渡效果的 CSS 属性的名称.通常设置成all transition-duration:                       规定完成过渡效果需要多少秒或毫秒. transition-timing-function:        规定速度效果的速度曲线. Linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)). Ease 规定慢速开始,然后变快,

CSS3中动画属性transform、transition和animation

Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能外,还提供了对动画的支持,可以用来实现旋转.缩放.平移.扭曲和过渡效果等等,这些功能再一次证明了CSS3功能的强大和无限潜能. CSS3实现元素变形的基础来源于新增的transform属性,该属性可用于实现元素的旋转.缩放.平移.扭曲等效果.目前webkit内核支持-webkit-transform