如何使用CSS3的transition实现动画效果？
2015-10-27 14:06
1301 查看
在css3中，我们常常通过定义不同的属性来实现不同的效果，但很多时候，我们并不希望属性立即生效，而是希望这个变化持续一段时间。那么问题来了，这个持续时间怎么实现？这个时候css3的过渡就可以派上用场了。
何为css3的过渡呢？顾名思义，CSS 过渡（ transition ）是用来控制 CSS 属性的变化速率，让属性定义后的效果按一个曲线速率变化，类似css3中的动画效果，但是实现起来要简便得多。过渡是作用在某个CSS属性上，而动画是作用在某个动画规则上。
我们通过一个例子，来看看过渡的使用吧，代码如下：
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: blue;
transition: width 2s;
-moz-transition: width 2s; /* Firefox */
-webkit-transition: width 2s; /* Safari andChrome */
-o-transition: width 2s; /* Opera */
}
div:hover {
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
有兴趣的朋友，可以将上述代码放在你的代码中，看看具体效果。但需要提醒大家的就是，要实现过渡，必须规定以下两点：
1、指定你想实现的效果对应的css属性；
2、指定效果时长
过渡属性
在 transition的使用中，我们需要简写属性或其对应的具体属性来决定哪些属性发生动画效果 (明确地列出这些属性 transition-property )，何时开始 (设置 transition-delay ), 持续多久 (设置transition-duration ) 以及如何动画 (定义transition-timing-function 函数，比如匀速地或先快后慢)，下面分别来看看。
transition-property
transition-property属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。
transition-property:none; /* 没有过渡效果 */
transition-property:width; /* 宽度变化将获得过渡效果 */
transition-property:all; /* 所有属性变化将获得过渡效果 */
transition-property:width, height; /* 宽度和高度变化将获得过渡效果 */
transition-duration
transition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
transition-duration:2s;/* 等价于2000ms */
transition-timing-function
transition-timing-function属性规定过渡效果的速度曲线。
这部分类似 CSS3 动画中的 animation-timing-function属性 ，不多赘述。
transition-timing-function:linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);
transition-delay
transition-delay属性规定过渡效果何时开始（以秒或毫秒计，允许负值）。
transition-delay:2s;
transition
上述具体属性的简写属性。
transition:property duration timing-function delay;
示例：
div {
width: 100px;
transition: width 1s linear 2s;
/* Firefox */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
div:hover {
width: 500px;
}
结束语
在css3中，我们通过属性实现不同的效果，但为增强客户体验度，就需要借助过渡让变化过程持续一段时间，实现简单的动画效果。互联网时代，css3的过渡，是web前端开发人员必须掌握的一个技能，你学会了么？
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 