CSS 动画效果知识点汇总
动画属性
CSS 动画效果包括 3 个属性:transform , transition, animation
- Transfrom: 变形
- Transition: 过渡
- Animation: 动画
一、变形 transform
transform 属性使一个 dom 进行各种位置转化
方法 | 备注 |
---|---|
translate | 平移 |
scale | 缩放 |
skew | 倾斜 |
rotate | 旋转 |
translate 平移
- translate(x ,y )
- translate3d(x ,y ,z )
- translateX(x )
- translateY(y )
- translateZ(z )
scale 缩放
scale(x [,y ]?)
scale3d(x ,y ,z )
scaleX(x )
scaleY(y )
scaleZ(z )
skew 倾斜
skew(x-angle ,y-angle )
skewX(angle )
skewY(angle )
rotate 旋转
rotate(angle )
rotate3d(x ,y ,z ,angle )
rotateX(angle )
rotateY(angle )
rotateZ(angle )
transform-origin 变形圆心
transform-origin(x-axis y-axis z-axis)
left
top
center
right
bottom
length
%
transform-style 三维空间中呈现
transform-style: flat|preserve-3d;
二、过渡 transition
transition 使 样式效果 显示变化的过程。
属性 | 备注 |
---|---|
Transition-property | 过渡生效的元素属性 |
Transition-duration | 过渡持续时间 |
Transition-timing-function | 过渡速度变化方式 |
Transition-delay | 过渡延迟时间 |
复合属性使用
transition: property duration timing-function delay ;
复合属性将表格中的四个属性合并成一个,从而简化代码。
触发方式
- hover
- active
- focus
- @media 触发
- click
我的理解:transition 本质是用于过渡,所以肯定需要修改一些属性才能看到动态变化的效果。怎么去修改属性,就是用上面的这些方法,或者更多方式。
transition 限制:
- transition 需要事件触发,所以没法在网页加载时自动发生。
- transition 是一次性的,不能重复发生,除非一再触发。
- transition 只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
三、动画 animation
animation 不仅仅可以控制属性的过渡,而且可以连续控制动画效果,甚至可以暂停、重启动画效果。
属性 | 备注 |
---|---|
animation-name | 动画名称 |
animation-duration | 动画持续时间 |
animation-timing-function | 动画速度方法 |
animation-delay | 动画延迟时间 |
animation-iteration-count | 动画播放次数 |
animation-direction | 动画播放方向 |
复合属性
animation: name duration timing-function delay iteration-count direction
- name 动画名称
- 动画持续时间
- 动画速度方法
- 动画延迟时间
- 动画播放次数> * 动画播放方向
暂停重启动画
Animation-play-state: running | paused
@keyframes 定义动画
javascript@keyframes name { 0% {} 50% {}//可选 100% {} }