使用 CSS 3 transition 实现动画效果

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/hosser/blog/667006

文章标签：

#javascript #ViewUI

本文介绍了如何使用CSS3的transition属性来实现简单的动画效果。通过一个实例展示了如何为元素的高度变化添加平滑过渡，并设置了过渡的持续时间、速度曲线及延迟时间。

为什么80%的码农都做不了架构师？>>>

使用 CSS 3 transition 实现动画效果 技术

maybe yes 发表于2015-05-12 23:52

原文链接 : http://blog.lmlphp.com/archives/116/Use_new_feature_transition_of_CSS_3_to_achieve_animation_effects 来自 : LMLPHP后院

使用 CSS3 的新特性 transition 可以很方便的实现像 JQuery 的 animate 方法一样的动画效果，但是有点遗憾的是，transition 只支持一个属性，重复定义后面的属性会覆盖前面的属性。

transition 有四个参数，分别是 transition-property（规定设置过渡效果的 CSS 属性的名称），transition-duration（规定完成过渡效果需要多少秒或毫秒），transition-timing-function（规定速度效果的速度曲线），transition-delay（开始过滤效果的延迟时间）

请看下面的例子，下面的例子中，红色的区域鼠标悬停后的动画效果是完全 CSS 实现的，鼠标悬停延迟一秒才开始运动，请使用鼠标悬停查看完整的粉红区域内的完整内容。

^_^，原来坚持一个把你当做空气的人，真的好难！这世上没有什么是做不到的，关键是坚持。就比如我，明知道喜欢的男生视我为空气，但我还是坚持每天给他发短信说早安、午安和晚安，就这么坚持了一个月，我终于把原本每个月都用不完的短信套餐用完了呢。

实现上面效果的重点 CSS3 代码如下：

<style>
div#transition_animate_div
{
    height: 50px;
    overflow: hidden;
    background: pink;
    line-height: 50px;
    transition: height 2s ease-in-out 1s;
    -moz-transition: height 2s ease-in-out 1s; /* Firefox 4 */
    -webkit-transition: height 2s ease-in-out 1s; /* Safari and Chrome */
    -o-transition: height 2s ease-in-out 1s; /* Opera */
}

div#transition_animate_div:hover
{
    height: 200px;
}
</style>

阅(264)评(0)查看评论

转载于:https://my.oschina.net/hosser/blog/667006