1.CSS过渡
css从一种样式转化为另一种样式时规定的一种变化变化规则，包括添加效果的css属性，过渡所需要的时间，过渡效果的时间曲线，以及多久之后进行过渡等等，在css我们用transition来进行书写。
下面是我们常用的属性极其
| 属性名 | 属性描述 | 属性值 |
|---|---|---|
| transition-property | 需要添加效果的css属性 | all, none ,height |
| transition-duration | 过渡完成所需要的时间 | 1s, 1000ms |
| transition-time-function | 规定过渡效果的时间曲线。默认是 "ease" | linear, ease |
| transition-delay | 延迟多久之后进行过渡 | 1s, 1000ms |
.item {
width: 100px;
height: 100px;
background-color: pink;
margin: 0 auto;
margin-top: 100px;
// 表示所有属性都添加，过程为1s，匀速变化，触发3s执行
transition: all 1s linear 3s;
}
.item:hover {
background-color: blue;
height: 300px;
width: 500px;
}
2.CSS动画
css动画与css过渡有相同之处，css动画可以理解为，你自己设置一个样式变化，同时控制他变化的过程， css动画用关键字animation来控制,可以自己定义动画类型使用@keyframe关键字
下面介绍animation的几种常见属性
| 属性名 | 属性描述 | 属性值 |
|---|---|---|
| animation-name | 添加的动画的名称 | 自定义动画的名称 |
| animation-duration | 动画完成所需要的时间 | 1s, 1000ms |
| animation-time-function | 规定动画效果的时间曲线。默认是 "ease" | linear, ease |
| animation-iteration-count | 该动画执行的次数 | infinite |
| animation-direction | css动画的方向，默认为正向 | reverse,alternate |
| animation-fill-mode | 常用于在动画完成之后的操作，默认为none | none, forwards |
| animation-play-data | 规定动画是否正在运行或暂停。默认是 "running" | runing, paused |
| animation | 几种属性的简写形式 |
<style>
.container {
height: 1000px;
position: relative;
}
.item {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
/* animation-fill-mode: forwards ; 表示动画完成后停留在原处，默认为回到起始位置*/
/* animation-direction: alternate; 表示动画在奇数次时进行正向，默认为正向，reverse为反向*/
/* animation-play-state: paused; 用来控制当前动画的状态*/
animation: rotate 1s linear 3 forwards alternate running;
}
// 定义动画的类型
@keyframes rotate {
0% {
top: 0;
left: 0;
}
50% {
top: 0;
left: 300px;
}
100% {
left: 300px;
top: 300px;
}
}
3.请简要分析两者的区别
- 触发方式不同：CSS过渡需要一个触发动作,比如 hover 或者点击等状态改变时才会触发;而CSS动画可以直接通过调用 animation-play-state 来控制动画的播放和暂停,不需要事件触发。
- 控制能力不同: 过渡效果只能控制开始与结束,对中间状态无法控制;动画可以通过@keyframes来精确控制各个状态的样式。
- 性能不同：过渡性能和动画性能相比更好，他只改变初始和结束时的状态而不必去关心中间值
- 兼容性不同:虽然现代浏览器对两者普遍支持良好,但过渡相比动画在低版本浏览器的兼容性会略好一些。
- 复杂性不同:过渡相对更简单,适合简单的交互效果;动画可以实现更复杂的 动效 ,但学习成本也较高。
4.渐进增强和优雅降级
- 渐进增强：英文全称为progressive enhancement，指的是在开发页面时对低版本浏览进行构建页面，满足他的基本功能，然后再对高版本浏览器进行进行效果，交互等改进和追加功能以更好的完成用户体验
- 优雅降级：初始开发时使用较为先进的技术开构建完整的页面及其功能，然后对低版本浏览器进行兼容操作
例如新浪微博网站这样亿级用户的网站，前端的更新绝不可能追求某个特效而不考虑低版本用户是否可用。一定是确保低版本到高版本的可访问性再渐进增强。
如果开发的是一款面向青少年的软件或网站，你明确这个群体的人总是喜欢尝试新鲜事物，喜欢炫酷的特效,喜欢把软件更新至最新版本，这种情况再考虑优雅降级。
