这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战
简介®
相信很多很多刚入门的小伙伴学完 基础的css和html后，希望让自己的静态页面更加漂亮一点儿，产生一点儿动画的效果，那么就需要了解一下css动画了，本文介绍css动画的两大组成部分。 * transition 🦖（过渡） * animation 🦥 （动画）
1. transition🥶
首先来看以下代码
img{
height:15px;
width:15px;
}
img:hover{
height: 450px;
width: 450px;
}
➡️代码实例⬅️
📖📖这段代码的意思是，当鼠标放在 图片上的时候，图片的长和宽会迅速变大（这个地方没有用到transiton的方法）所以属性的数值是瞬间变化的。 怎么才让他缓慢的有变化效果呢？这时候就需要 transition出场了 ，transition 的作用就在于，指定状态变化所需要的时间⏱
1. 这样 img 的height and width 就会在 1s 变换到 300px
img{
transition:1s;
}
- 可以只指定 某个在某个方向变化
img{
transition:1s height;
}
- 设置延时 （transition - delay）
transition-delay 的真正意义在于 ，他指定了动画的发生顺序，使得多个不同的transition 可以连在一起，形成复杂的效果。
img{
// 这样 设置是 height 和 width 同时开始 在2s 后 变化到300px
transition:2s height,2s width;
}
//如果 想设置在height变化 1s后 width才开始变化
img{
// width 在height 变化1s后 开始变化
transition : 2s height, 2s 1s width;
}
- transition-timing-function （变化速度）
transition 的变化速度又可以称为 timing function ，默认不是匀速的，而是逐渐放慢的，这个参数默认是 ease
img{
transition:1s ease;
}
除了ease以外，其他模式还包括
1. linear 匀速
2. ease-in 加速
3. ease—out 减速
4. cubic—bezier 自定义速度模式
自定义速度模式可以用 工具🔧网站定制来定制。
img{
transition : 1s height cubic-bezier(.83,.97,.05,1.44);
}
总结 transition各项属性
transition 的完整写法
img{
//延迟1s 后 在1s 内 高度 逐渐缓慢 的变化
transition:1s 1s height ease;
}
⬆️ 其实这是一个简写形式 ，可以单独定义各个属性
img{
transition-property:height;
transition-duration:1s;
transition-delay;
transition-timing-function:ease;
}
transition 的使用注意
- 目前各个浏览器 已经支持transition
- 不是所有的CSS属性都支持transition
- transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。 transition的局限 transiton 的优点在于简单易用 但是 有几个很大的局限
- transition 需要事件触发， 所以没法在网页加载时自动发生
- transition 是一次性的 不能重复发生，除非再次触发事件
- transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
- 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
针对这些问题提出了 animation
参考文档阮一峰
