乐闻世界logo
搜索文章和话题
CSS 动画效果知识点汇总

CSS 动画效果知识点汇总

乐闻的头像
乐闻

2022年06月18日 12:04· 阅读 1335

动画属性

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 ;

复合属性将表格中的四个属性合并成一个,从而简化代码。

触发方式

  1. hover
  2. active
  3. focus
  4. @media 触发
  5. 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% {} }
标签: