transform MDN

transform

四个常用功能

  • 位移translate
  • 缩放scale
  • 旋转rotate
  • 倾斜skew

transform经验

  • 一般都需配合transition过渡
  • inline元素不支持transform，需先变成block

位移translate

常用写法

  • translateX(<length-percentage>)
  • translateY(<length-percentage>)
  • translate(<length-percentage>,<length-percentage>?)
  • translateZ(<length>)并且父容器是perspective
  • translate3d(x,y,z)

demo

translate经验

  • 看懂 MDN 语法格式，自学无碍
  • translate(-50%,-50%)可做绝对定位元素的居中

缩放scale

常用写法

  • scaleX(<number>)
  • scaleY(<number>)
  • scale(<number>,<number>?)

demo

scale经验

不常用，易出现模糊

旋转rotate

常用写法

  • rotate([ <angle> | <zero> ])
  • rotateZ([ <angle> | <zero> ])
  • rotateX([ <angle> | <zero> ])
  • rotateY([ <angle> | <zero> ])
  • rotate3d()较复杂

demo

rotate经验

  • 常用于 360 旋转制作 loading
  • 用到时再搜索rotate MDN看文档

倾斜skew

常用写法

  • skewX([ <angle> | <zero> ])
  • skewY([ <angle> | <zero> ])
  • skew([ <angle> | <zero> ],[ <angle> | <zero> ])

demo

skew经验

  • 用得少
  • 用到时再在搜索skew MDN看文档

transform多重效果

组合使用

  • transform:scale(0.5) translate(-100%,-100%);
  • transform:none;取消所有

CSS 动画实现：跳动的心

CSS 需要想象力，而不是逻辑

CSS 给出的属性都很简单，但组合得很复杂

transition MDN

transition过渡

作用

补充中间帧

语法

  • transition: 属性名 时长 过渡方式 延迟

eg. transition: left 200ms linear

  • 可以用逗号分隔两个不同属性

eg. transition: left 200ms linear, top 400ms

  • 可以用all代表所有属性

eg. transition: all 200ms

  • 过渡方式有linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

具体含义靠数学知识

注意

并不是所有属性都能加上「过渡」

  • display:none=>block没法加过渡
  • 一般改成visibility:hidden=>visible
  • display和visibility 的区别
  • background和opacity可以加过渡

过渡必须要有起始

一般只有一次动画，或者两次

比如 hover和非hover状态的过渡

「除了起始，还存在中间点」的情况处理方法

两种办法

使用两次transform

  • .a====>transform====>b
  • .b====>transform====>c

如何知道有中间点？

用setTimeout或者监听transitionend事件（JS）

demo

使用animation

  • 声明关键帧
  • 添加动画

demo

如何让动画停在最后一帧？

  • 搜索css animation stop at end
  • 加个forward

demo

参考文章

CSS 动画.pdf

CSS 动画简介

相关文章

  • 无
  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名
  • 河 掘 思 知 简