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

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

translate&＃xff1a;平移&＃xff1b;是transform的一个属性&＃xff1b;

transform&＃xff1a;变形&＃xff1b;是一个静态属性&＃xff0c;可以改变元素的形状或位置&＃xff0c;做出 2d 或 3d 效果&＃xff1b;

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

animation&＃xff1a;动画&＃xff1b;可以设置多帧效果&＃xff0c;然后把它们组合变换&＃xff0c;按动画效果展示出来&＃xff1b;

transition

过渡&＃xff0c;右有四个子属性&＃xff1a;

transition-property&＃xff1a;过渡属性&＃xff0c;默认为 all&＃xff1b;

transition-duration&＃xff1a;过渡效果花费的时间&＃xff0c;默认值是0&＃xff0c;以秒或毫秒计&＃xff0c;不能为负值&＃xff1b;

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

transition-delay&＃xff1a;定义过渡延时时间&＃xff1b;默认值为0(直接开始)&＃xff0c;以秒或毫秒计&＃xff0c;可为负值&＃xff1b;

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

transition可以同时设置多个属性的过渡效果&＃xff0c;用逗号隔开&＃xff1b;

transition需要有触发条件&＃xff0c;animation 则不需要&＃xff1b;

建议看 大神的这篇博文&＃xff0c;讲的比较详细&＃xff0c;里面还有关于 API 的东西&＃xff1b;

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

*{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;

}