CSS3过渡属性

最新推荐文章于 2024-03-18 21:52:36 发布

JJ_Smilewang

最新推荐文章于 2024-03-18 21:52:36 发布

阅读量3.4k

点赞数 4

分类专栏： html5和CSS3提高文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124126270

版权

html5和CSS3提高专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了CSS3的过渡属性如何让网页元素平滑过渡，无需依赖Flash或JS。重点讲解了transition属性的四个部分：过渡属性、持续时间、运动曲线和延迟，以及如何通过实例演示其在:hover效果下的应用。

摘要由CSDN通过智能技术生成

过渡（transition)也是CSS3中具有颠覆性的特征之一，有了这个属性，我们可以在不使用 Flash 动画或 js（JavaScript）的情况下，当元素从一种样式变换为另一种样式时，为元素添加效果。

过渡动画：是从一个状态 渐渐的过渡到另外一个状态。可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

1.语法

transition: transition-property transition-duration transition-timing-function transition-delay; 

转换为文字表达，即为：
transition: 要过渡的属性 花费时间 运动曲线 何时开始;

2. 属性介绍

1.transition-property（过渡属性）：即表示想要变化的 css 属性，宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以，我们实际开发中，也基本都是直接使用all的。

2. transition-duration（过渡所需的时间）：单位是秒（必须写单位）比如 1s

3. transition-timing-function（过渡运动曲线）：默认是 ease （慢速开始，然后变快，然后慢速结束的过渡效果），还有 linear（匀速）、ease-in（以慢速开始的过渡效果）、 ease-out （以慢速结束的过渡效果）、 ease-in-out （以慢速开始和结束的过渡效果）

4.transition-delay(何时开始 ) ：设置延迟触发时间，单位是秒（必须写单位），默认是 0s （可以省略。

3. 代码体验

<style>
    div {
        margin: 100px;
        width: 200px;
        height: 200px;
        background-color: pink;
        transition: all 2s linear 1s;   /* 增加过渡效果后，可以让盒子变化效果慢慢展示出来*/
    }
    div:hover {
        background-color: red;
        transform: translate(100px, 100px) rotate(60deg) scale(2);   /* 给盒子设置变化属性*/
    }
}
<body>
    <div></div>
</body>
在没有增加过渡效果时，鼠标移入div盒子后，会瞬间变成下图的效果：

但是在增加了代码：transition: all 2s linear 1s;后，鼠标移入div盒子，会在1s后，缓缓的边放大边旋转，并且颜色慢慢从粉色变为红色，一共用时2s，最后得到上图的效果。整个过程非常的柔和自然，不突兀。