transition(过渡)
css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。即创建补间动画
语法 transition: property duration timing-function delay;
- transition-property 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 规定速度效果的速度曲线。
- transition-delay 定义过渡效果何时开始。
transform(变形)
CSS3中的transform(变形)属性用于内联元素和块级元素,可以旋转、扭曲、缩放、移动元素,它的属性值有以下五个:
旋转 rotate
扭曲 skew
缩放 scale
移动 translate
矩阵变形 matrix
语法 transform:rotate(7deg)
- none 定义不进行转换。
- matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
- translate(x,y) 定义 2D 转换。
- translate3d(x,y,z) 定义 3D 转换。
- translateX(x) 定义转换,只是用 X 轴的值。
- translateY(y) 定义转换,只是用 Y 轴的值。
- translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
- scale(x[,y]?) 定义 2D 缩放转换。
- scale3d(x,y,z) 定义 3D 缩放转换。
- scaleX(x) 通过设置 X 轴的值来定义缩放转换。
- scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
- scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
- rotate(angle) 定义 2D 旋转,在参数中规定角度。
- rotate3d(x,y,z,angle) 定义 3D 旋转。
- rotateX(angle) 定义沿着 X 轴的 3D 旋转。
- rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
- rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
- skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
- skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
- skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
- perspective(n) 为 3D 转换元素定义透视视图。
animation(动画)
简写属性形式 .box { animation: dropdown 8s linear 10s infinite reverse forwards; }
- [animation-name] = dropdown //动画的名称
- [animation-duration] = 8s //持续时间
- [animation-timing-function] = linear //动画的播放速度曲线
- [animation-delay] = 10s //延迟时间
- [animation-iteration-count] = infinite //播放次数
- [animation-direction] = reverse //播放顺序
- [animation-fill-mode] = forwards//播放前或停止后设置相应样式
动画名称 (animation-name)
定义关键帧(keyframes) - 定义动画在不同阶段的状态。
@keyframes dropdown {
0%{margin-top:0px;}
10%{margin-top:0px;}
50%{margin-top:100px;}
60%{margin-top:100px;}
90%{margin-top:200px;}
100%{margin-top:200px;}
}
动画周期时长 (animation-duration)
指定一个动画周期的时长,默认值为0s,表示无动画
时间函数(animation-timing-function)
属性定义了动画的播放速度曲线。
animation-timing-function
= ease
| ease-in
| ease-out
|ease-in-out
| linear
| cubic-bezier(number,number,number,number)
动画延迟 (animation-delay)
定义了动画是从何时开始播放,该值以秒(s)或毫秒(ms)为单位
animation-delay
= 3s
动画迭代次数 (animation-iteration-count)
定义动画播放的次数,默认值是一次
animation-iteration-count
= infinite
| number
动画是否反向播放 (animation-direction)
定义动画是否反方向播放
animation-direction = normal | reverse | alternate | alternate-reverse
播放前或停止后设置相应样式 (animation-fill-mode)
动画执行之前和之后如何给动画的目标应用样式
animation-fill-mode = none | forwards | backwards | both