CSS3动画

transform属性

基本语法:transform: none | transform-functions

注意: 转换不会改变元素实际占有位置, 即不会改变页面原有布局

transform-functions类型

2D转换

1. 平移: translate(left [, top])

   • *top值不设值, 只做水平方向平移, 支持负值, 需要带单位
   • *当单位是百分比(%)时, 百分比的参照对象时当前元素的宽高

2. 缩放: scale(水平 [, 垂直])

   *只设一个值表示水平和垂直方向缩放相同倍数, 取值范围 [0, +无穷)

3. 轴旋转: rotate(value)

   *支持单位: deg, rad, turn(一圈), grad(百分度), 转换后会改变轴方向

4. 轴倾斜: skew(x轴, y轴)

   使用比较少, 仅支持X轴和Y轴

3D转换

比2D转换多了个Z轴, 可在在2D转换类型名字后面接着轴名字单独设置每一条轴的转换, 如transform: translateX(100px) 表示沿着沿着X轴向右平移100px

• *也可以通过类型名称接3d设置一个类型的转换, 如transform: translate3d(100px, 100px, 100px), 表示沿着3条轴的正方向平移100px
• *在移动端设备, 3D转换会开启GPU加速, 从而减轻CPU的消耗, 提高性能

3D透视效果(远小近大效果)

1. transform-style: peserve-3d

   *添加在祖先元素样式上, 让子元素在3D空间呈现

2. perspective: 500px

   *眼睛, 站在哪看3D元素, 设在祖先元素上, 取值300-500px最佳

3. perspective-origin: 水平 垂直

   *透视基准线, left, right, bottom, top, center

4. backface-visibility: hidden

   *背面隐藏, 设置在转换(子)元素上, 默认visible(显示)

设置轴原点

transform-origin: x轴 y轴 [z轴]

*默认在元素中心点

注意点

transform-functions 组合使用时, 注意轴方向的改变

transition属性

过渡: 元素从一个状态到另一个状态

过渡三要素:

a) 需要执行过渡的属性

b) 过渡属性的属性值必须发生变化

c) 过渡效果的持续时长

基本语法: transition: property duration [timing-function] [delay]

transition-property

设置需要过渡效果的属性

语法:transition-property: none|all|property

属性值

1. none 表示没有属性获得过渡效果
2. al 表示所有属性获得过渡效果
3. property 用来定义需要过渡的CSS属性名称列表, 列表用逗号(,)隔开

transition-duration

设置过渡效果持续的时长

语法: transition-duration : time

*默认值为0, 表示没有过渡效果, 设置值时需要带单位(s, ms)

transition-timing-function

设置过渡效果的速度曲线

语法: transition-timing-function : val

属性值

1. ease 默认值, 先慢后快再慢
2. ease-in 先慢后快
3. ease-out 先快后慢
4. ease-in-out 先快后慢再快
5. linear 匀速
6. cubic-bezier(n, n, n, n) 自定义速度曲线

transition-delay

设置延时效果

语法: transition-delay : time

注意点

单独设置多个属性的过渡效果时, 过渡列表用逗号( , )分隔

transition: width 5s, height 10s;
/* 等同于 */
transition-property: width, height;
transition-duration: 5s, 10s;

transition: width, height, 10s;
/* 等同于 */
transition-property: width, height;
transition-duration: 10s;

其他属性用法一样

animation属性

设置元素的执行的动画, 语法: animation : name duration [timing-function] [delay] [iteration-count] [direction]

animation-name

设置关键帧动画(@keyframes)的名字

语法: animation-name : keyframename|none

@keyframes

定义关键帧动画

语法:

1. 只设置起始状态和结束状态

   @keyframes keyframename {
       form { /* 起始样式 */ }
       to { /* 结束样式 */ }
   }
   

2. 设置多个关键帧

   @keyframes keyframename {
       0% { /* 起始样式 */ }
       /* percentage { key-styles } */
       100% { /* 结束样式 */ }
   }
   

animation-duration

设置动画周期时长

语法: animation : time

默认值为0, 表示不会播放动画

animation-timing-function

设置动画的动画曲线

语法: animation-timing-function : val

取值与过渡的transition-timing-function相同

animation-delay

设置动画的延迟效果

语法: animation-delay : time

支持负值, 表示跳过开头对应时长

animation-iteration-count

设置动画播放多少次

语法: animation-iteration-count : number | infinite

默认值为1, 表示只播放一次; 设为infinite表示循环播放

animation-direction

设置动画周期播放行为表现(方向)

语法: animation-direction : val

当animation-iteration-count不为1时, 该属性才生效

属性值:

1. normal 默认值, 正常播放
2. reverse 反方向播放
3. alternate 来回播放( 奇数周期正常播放, 偶数周期反向播放 )
4. alternate-reverse 来回播放( 奇数周期反向播放, 偶数周期正常播放 )

设置元素在动画外的状态

语法: animation-fill-mode : val

属性值:

1. none 默认值, 元素在动画结束时回到没开始状态
2. forwards 元素在动画结束时保持最后关键帧的状态
3. backfords 元素在动画结束时回到第一帧的状态
4. both 轮流使用forwards和backwards规则

设置动画的播放状态

语法: animation-play-state : running(播放)|paused(暂停)

一般通过JS代码控制CSS动画的播放和暂停

支持过渡/动画的属性

1. color前景色
2. background系列， 如background-color、background-position、background-size
3. width 和 height宽和高
4. border系列, 如border-width、border-color、border-radius
5. padding系列
6. margin系列
7. 定位系列, 如left、right、top、bottom
8. text-shadow和box-shadow阴影
9. outline系列, 如outline-width、outline-color
10. font系列, 如font-size、font-weight
11. 文本系列, 如line-height、letter-spacing、word-spacing
12. transform系列, 如perspective、transform-origin
13. 其他, 如z-index、visibility、opacity、vertical-align

过渡与动画对比

1. transition 需要事件触发使元素样式属性放生改变, 而animation不需要触发任何事件即可执行( 即可以在网页加载后自动执行)
2. transition一般是一次性的, 除非多次触发事件, 而animation可通过设置animation-iteration-count达到循环播放效果
3. transition只能定义开始状态和结束状态, 而animation则可以定义多个关键帧状态