1.transition 过度效果集合
使用场景: 对所有动态修改 CSS 的操作均有效果, 主要有以下几点
dom 位置移动
opacity, 颜色改变
dom 尺寸变更, border
可配合 transform 属性使用
transition 有四个参数, 默认值为 all 0s ease 0s, 按序分别对应:
需要过度的 CSS 属性名称
完成过渡的时间
过渡的速度曲线
[ 慢 - 快 - 慢 ease / 开始慢 ease-in / 最后慢 ease-out / 全慢 ease-in-out / 匀速 linear]
触发过渡开始的延时时间
2.transform 操作元素 2D 或 3D 转换, 旋转, 缩放, 移动或倾斜.
3D 效果首先设置 perspective 属性, perspective 值越大 3D 效果越逼真, 线条具有抽象感
配合 transtion 使用
移动 translater(x,y),translateX(),translateY(),translateZ(),translate3d(x,y,z)
旋转 rotate(x,y),rotateX(),rotateY(),rotateZ(),rotate3d(x,y,z,deg)
缩放 scale(x,y), scaleX(), scaleY(), scaleZ(), scale3d(x,y,z,deg)
倾斜 skew(x,y), skewX(deg),skewY(deg) skew 没有 3D 属性
3.animaition 动画属性
animation 属性需要配合 keyframes 函数使用, 在 keyframes 内规定动画执行轨迹
animation 有以下 6 个属性:
animation-name 需要执行的 keyframe 函数名称
animation-duration 规定完成动画所花费的时间, 以秒或毫秒计
animation-timing-function 动画的速度曲线
[ 慢 - 快 - 慢 ease / 开始慢 ease-in / 最后慢 ease-out / 全慢 ease-in-out / 匀速 linear]
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数 次数, infinite
animation-direction 规定是否应该轮流反向播放动画 normal,alternate
animation 属性在 dom 样式内执行所选中的 keyframes 函数
keyframes 内可以使用 transform 属性
keyframes 内简写动画过程可以使用 from,to, 想控制更多过程可以使用百分比 0% - 100%
- @keyframes animationName {
- from{
- },
- to{
- }
- }
- // 百分比
- @keyframes animationName {
- 0%{
- }
- 10%{
- }
- ...
- 100%{
- }
- }
来源: http://www.jianshu.com/p/3a4fbb67f265