浏览器名称 | 内核 | 私有前缀 |
Chrome Safari | webkit | -webkit- |
Firefox | gecko | -moz- |
Opera | presto | -o- |
IE | trient | -ms- |
过渡效果
属性 | 描述 |
transition | 简写属性,用于在一个属性中设置四个过渡属性 |
transition-property | 规定应用过渡的 CSS 属性的名称 |
transition-duration | 定义过渡效果花费的时间。默认是 0 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease" |
transition-delay | 规定过渡效果何时开始。默认是 0 |
transtion-timing-function 时间曲线的值
值 | 描述 |
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值【立方贝塞尔曲线函数】 |
CSS3-2D效果
平移 transform:translate(X,Y) 单位px
旋转 transform:rotate(45deg); 正值为顺时针旋转,负值为逆时针旋转
默认旋转中心在x轴和y轴打的交叉点
改变旋转中心点 transform-origin:center top/50% 0;
缩放 transform:scale();
n>1 放大 n<1 缩小 n=0 消失隐藏
n=-1 出现镜像上下颠倒,但不放大也不缩小
n=-2 会在镜像的基础上放大
倾斜 transform:skew(deg,deg);
注意:当有多个ttransform值时,需要合并一起写,否则会被覆盖(多个属性值之间用空格隔开)
eg: transform:translate(x,y) rotate(deg) scale(n) skew(deg,deg);
transtion-timing-function:ease; 默认值
linear 匀速
ease-in 慢-快
ease-out 快-慢
ease-in-out 慢-快-慢
cublic-bezier 贝塞尔曲线
动画
创建动画@keyframes
调用动画animation
动画完整创建写法@keyframes 动画名称{}
参数值 | 效果 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease" |
animation-delay | 规定动画何时开始。默认是 0 |
animation-iteration-count | 规定动画被播放的次数(number类型)。默认是 1,(infinite: 无限次) |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal" ,‘alternate' |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running",'paused' |
animation-fill-mode | 规定对象动画时间之外的状态.forwards,backwards默认值 |