css3---动画animation，一线互联网架构师前端框架体系架构

CSS3 动画（Animation）是一种创建动画效果的机制，可以用来改变元素的样式，在一定的时间内平滑地过渡到新的样式。

基本语法：

@keyframes animationName {
  from {
    property1: value1;
    property2: value2;
    ...
  }
  to {
    property1: value1;
    property2: value2;
    ...
  }
}
 
element {
  animation-name: animationName;
  animation-duration: seconds;
  animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
  animation-delay: seconds;
  animation-iteration-count: n|infinite;
  animation-direction: normal|alternate;
  animation-fill-mode: none|forwards|backwards|both;
  animation-play-state: running|paused;
}

示例代码：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
.animated {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

HTML 使用：

<div class="animated">This is a fading in text.</div>

以上代码定义了一个名为 fadeIn 的动画，它会在 2 秒内将元素从完全透明过渡到完全不透明。然后，我们将这个动画应用到了拥有 animated 类的元素上。