css 右上角 翻开动画_css 动画（二） transition 过渡 & animation 动画

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

translate：平移；是transform的一个属性；

transform：变形；是一个静态属性，可以改变元素的形状或位置，做出 2d 或 3d 效果；

transition：过渡，转变；使 css 属性值在一段时间内平滑的变化，需要有触发条件(如 hover 等)，是 animation 的简化版；

animation：动画；可以设置多帧效果，然后把它们组合变换，按动画效果展示出来；

transition

过渡，右有四个子属性：

transition-property：过渡属性，默认为 all；

transition-duration：过渡效果花费的时间，默认值是0，以秒或毫秒计，不能为负值；

transition-timing-function：定义过渡效果的速度，默认值 ease(开始和结束慢，中间快)，可以设置 linear(匀速)、ease-in(慢速开始)、ease-out(慢速结束)、ease-in-out(和ease类似，开始和结束慢，但是中间更快)、贝塞尔曲线；

transition-delay：定义过渡延时时间；默认值为0(直接开始)，以秒或毫秒计，可为负值；

transition的四个子属性可以缩写，用空格隔开；其中 duration(过渡时间)和 delay(延时时间)两个值都是时间，当两个值都存在时，第一个是 duration(过渡时间)，第二个是 delay(延时时间)；如果只存在1个时间，那就是 duration(过渡时间)，delay(延时时间)默认为0；

transition可以同时设置多个属性的过渡效果，用逗号隔开；

transition需要有触发条件，animation 则不需要；

建议看 大神的这篇博文，讲的比较详细，里面还有关于 API 的东西；

想整个 hover 效果的，弄了好久，又是 iframe(在 jsrun.cn 网站上做出效果，然后分享，自动生成 iframe 链接)，又是 js 的，都没弄出来，好像是没有 js 权限，懒得整了。

*{padding:0;margin:0;

}.wrapper{margin:100px;height:300px;border:10px solid #f0f;background:#0ff;position:relative;cursor:pointer;

}.test{width:100px;height:100px;background:#f60;position:absolute;left:30px;top:30px;transition:width 1s ease-in-out 2s,

height 2s ease-in,

background 3s linear,

left .5s ease-out,

top 1.5s ease-in;

}.wrapper:hover .test{width:150px;height:50px;background:#ff0;left:200px;top:150px;

}