CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。 ——MDN

transform属性

允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

最常用：

  • 位移 translateX \ translateY
  • 缩放 scale
  • 旋转 rotate
  • 倾斜 skew
  • 等……

注意：inline 元素不支持transform，需要变成block。

:::success 小技巧：ranslate(-50%,-50%)可以绝对定位元素居中。 :::

translate 位移

  1. .element {
  2.     transform: translateX(20px);
  3.   transform: translateY(40px}
  4. }
  5. .element2 {
  6.   /*简写*/
  7.     transform: translate(20px 40px);
  8. }

scale 缩放

设定比1大的值使该元素变大，反之比1小的值使该元素变小。

  1. .element {
  2.     transform: scaleX(2);
  3.   transform: scaleY(0.5}
  4. }
  5. .element2 {
  6.   /*简写*/
  7.     transform: scale(2, 0.5);
  8. }

rotate 旋转

允许单独设置**transform**的旋转属性。

  1. .element {
  2.     transform: rotate(1 1 1 83deg); /*设置向量旋转*/
  3. }
  4. .element {
  5.     transform: rotateX(65deg);
  6. }
  7. .element {
  8.     transform: rotateY(22deg);
  9. }
  10. .element {
  11.     transform: rotateZ(83deg);
  12. }

skew 倾斜

  1. .element {
  2.     transform: skewX(10deg);
  3. }

transition属性

**transition** CSS 属性是以下的一个简写属性。

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

不是所有的属性都可以过度，如：

  • display: none —-过渡—-> display: block
  • visibility:hidden —-过渡—-> visibility:visble

语法

  1. .example {
  2.     ransition : [属性名] [时长] [过度方式] [延迟];
  3. }
  4. /*也可以一次性进行两个属性过度*/
  5. .example2 {
  6.     ransition : [属性名] [时长] [过度方式] [延迟],[属性名2] [时长2] [过度方式2] [延迟2] 
  7. }

transition-property

指定应用过渡属性的名称。

值：

  • none 没有过度动画
  • all 所有可被动画的属性都表现出过渡动画
  • 属性名

transition-duration

属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为0s，表示不出现过度动画。

值：

  • 单位秒 s、毫秒ms
  • 不接受负值

transition-timing-function

用来描述这个中间值是怎样计算的。表示动画过度，补充中间帧。

值 描述
linear 匀速
ease 先慢 - 中间快 - 后慢
ease-in 加速
ease-out 减速
cubic-bezier(n,n,n,n)函数 自定义速度，该属性可以用工具网站

关于过度函数表示

transition-delay

规定了在过渡效果开始作用之前需要等待的时间，即延迟。

值：

  • 单位秒 s、毫秒ms

animation属性

animation 有以下属性

  • animation-name: none /动画名/
  • animation-duration: 0s / 0ms /时长/
  • animation-timing-function: ease (与transition取值相同) /过渡方式/
  • animation-delay: 0s /延迟/
  • animation-iteration-count: 1 /次数/
  • animation-direction: normal /方向/
  • animation-fill-mode: none /填充模式/
  • animation-play-state: running /是否暂停/

语法

animation

  1. animation :[动画名] [时长] [过渡方式] [延迟] [次数] [方向] [填充模式] [是否暂停]

注意：顺序一定要正确！

keyframes 

  1. @keyframes 动画名 {
  2.   from {
  3.       transform: translateX(0%)
  4.   }
  5.   43% {
  6.       ......!important
  7.   }/*出现!important 被忽略*/
  8.   to {
  9.       transform: translateY(100%)
  10.   }
  11. }
  12. /*或*/
  13. @keyframes 动画名 {
  14.   0% {
  15.       transform: translateX(0%)
  16.   }
  17.   37%{
  18.       .........
  19.   }
  20.   100% {
  21.       transform: translateY(100%)
  22.   }
  23. }

如果关键帧中出现 !important 将会被忽略

详细可看MDN文档： @keyframes - animation