过渡 · web前端

[TOC] # 过渡(CSS3) 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。语法格式: ~~~ transition: 要过渡的属性花费时间运动曲线何时开始; ~~~ | 属性 | 描述 | CSS | | -------------------------- | ----------------------- | ---- | | transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 | | transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 | | transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 | | transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 | | transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 | transition-duration 花费时间,单位秒s, 这个单位必须要写运动曲线示意图： ![](https://img.kancloud.cn/a7/aa/a7aa2b826c8f3fb404d02e80445ebca1_1682x604.png) ~~~css img { width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%; transition:transform 0.5s ease-in 0s; } img:hover { transform:rotate(180deg); } ~~~ ~~~ <style> * { margin: 0px; padding: 0px; } div { width: 200px; height: 100px; margin: 100px auto; background-color: pink; /* transition: 要过渡的属性花费时间运动曲线何时开始; */ /* transition: width 0.6s ease 0s, height 0.3s ease-in 1s; */ /* transtion 过渡的意思这句话写到div里面而不是 hover里面 */ /*transition: all 0.6s; 所有属性都变化用all 就可以了后面俩个属性可以省略 */ /*默认的是ease 先快在慢*/ transition: width 1s, height 2s; } div:hover { /* 鼠标经过盒子，我们的宽度变为400 */ width: 600px; height: 600px; } </style> <body> <div> </div> </body> ~~~