CSS动画

九筒妈妈
142 阅读2分钟

Pre：浏览器渲染原理

大体上分为六个步骤：

  • 浏览器拿到HTML，构建HTML树
  • 根据CSS构建CSS树
  • 将两棵树合并，成渲染树(用户最终会看到的)
  • 布局layout
  • 绘制paint
  • 合成compose

动画的两种方式

1.transition过渡

作用

  • 给出开始和结尾，浏览器自动补充中间帧，形成动画。

语法

  • transition: 属性名 时长 过渡方式 延迟（transition: left 200ms linear）
  • 可以用逗号分隔两个不同属性（transition: left 200ms, top 400ms）
  • 可以用all代表所有属性（transition: all 200ms）

注意：并不是所有属性都能过渡

display:block;
display:none;

一般改成visibility:hidden→visible

实践：跳动的心

  • html代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="heart">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

-CSS代码

*{box-sizing: border-box;}
#heart{
  display: inline-block;
  margin: 100px;
  position: relative;
  transition: all 1s;/*动画*/
  
}
#heart:hover{
  transform: scale(1.2);
  
}

#heart>.left{
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  transform: rotate(45deg) translateX(31px);
  bottom: 50px;
  left: -50px;
  border-radius: 50% 0 0 50%;
}
#heart>.right{
  background: red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  transform: rotate(45deg) translateY(31px);
  bottom: 50px;
  right: -50px;
  border-radius: 50% 50% 0 0;
}
#heart>.bottom{
  background: red;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
}

2.animation动画

使用方式

  • @keyframes声名关键帧
  • animation添加动画
  • 使用forwards使动画停在最后一帧

animation的常用属性

  • 时长：表示动画的总时间。单位可以是s,ms
  • 过渡方式：默认是先快后慢。linear表示线性，匀速变化。
  • 次数：表示动画的次数，infinite表示无限次。
  • 方向：reverse:反方向（100%-0%）；alternate:原方向，再原路返回。
  • 动画名：如xxx。 这些属性可以在一行里缩写。

示例

  • @keyframes
@keyframes xxx {
  0% {
    transform: none;
  }
  66.66%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) translateY(100px);
  }
}

关键帧里使用百分数表示动画里触发关键帧的时间点。0%表示开始，100%表示结束，中间可以任意添加关键帧。xxx是关键帧的名字，在animation中定义。

  • animation
animation:xxx 1s;

实践：跳动的心

  • html代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="heart">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

-CSS代码

*{box-sizing: border-box;}
#heart{
  display: inline-block;
  margin: 100px;
  position: relative;
  animation: .5s heart infinite alternate-reverse;/*动画*/
  
}
@keyframes heart {
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.2);
  }
}/*声名关键帧*/

#heart>.left{
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  transform: rotate(45deg) translateX(31px);
  bottom: 50px;
  left: -50px;
  border-radius: 50% 0 0 50%;
}
#heart>.right{
  background: red;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  transform: rotate(45deg) translateY(31px);
  bottom: 50px;
  right: -50px;
  border-radius: 50% 50% 0 0;
}
#heart>.bottom{
  background: red;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
}

补充讲解：transform

四个常用功能

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

示例

transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: scale(2) translate(12px);/*组合使用*/
avatar
文章
阅读
粉丝