◆ 过渡:
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加过渡动画。虽然低版本浏览器不支持(ie9以下版本),但是不会影响页面布局。我们现在经常和 :hover 一起 搭配使用。
◆ 过渡动画:
从一个状态渐渐的过渡到另外一个状态。
◆ 语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
◆ 属性:
属性就是你想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以。
属性 | 描述 |
---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 |
transition-property | 规定应用过渡的 CSS 属性的名称。 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 |
transition-delay | 规定过渡效果何时开始。默认是 0。 |
◆ 运动曲线:
- ease:逐渐慢下来
- linear:线性
- ease-in:加速
- ease-out:减速
- ease-in-out:先加速后减速
◆ 示例:
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
}
div:hover { /* 鼠标经过盒子,我们的宽度变为400 */
width: 600px;
height: 300px
}
transition: all 0.6s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */