CSS 动画

transform

transform 四种常用功能：

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

需要配合transition过渡实现动画效果，inline元素不支持transfrom，要先变成block。

1. 位移：translate

常用写法：translateX、translateY、translate(X,Y)，里面可写数字px或者百分数

translate(-50%,-50%)可实现绝对定位元素的居中效果

top:50%;
left:50%;
translate:(-50%,-50%);

2. 缩放：scale

scaleX(缩放比例）等

3. 旋转：rotate

rotateX(45deg)等

4. 倾斜：skew 用得很少

组合使用：

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

transition

并不是所有的属性都可以过渡

如何让动画停留在最后一帧，可直接在后面加上一个forwardss。

animation

添加一个关键帧：

代码如下

infinite 无限

#heart {
        animation: heart 1s infinite;
      }

      @keyframes heart {
        0% {
          transform: scale(1);
        }
        100% {
          transform: scale(1.2);
        }
      }

补充知识点：