# @keyframes定义动画帧

@keyframes move {
  100% {
    border-radius: 50%;
    transform: translateX(100px);
  }
}

# animate属性使用动画

.animate {
  width: 100px;
  height: 100px;
  background: pink;
  animation: move 1s linear .5s infinite alternate forwards;
  animation-play-state: running; /* running | paused, default running */
  display: inline-block;
}

# animate相关属性

• animate-name: 动画名字, 由@keyframes定义
• animate-duration: 完成一次动画时长
• animate-timing-function: 速度曲线, ease | linear | ease-in | ease-out | ease-in-out
• animate-delay: 动画延迟多少开始
• animate-iteration-count: 播放次数, default 1
• animate-direction: 是否在下一周期逆向地播放, normal | alternate
• animate-fill-mode: 动画完成后的状态, none | forwards | backwards | both
• animation-play-state: running | paused

上述属性, 除了animation-play-state, 其他都可以简写进animate属性

觉得animate-fill-mode比较难理解

# 栗子

实现宽高100px的div, 1000毫秒内变成一个圆形, 并向右边移动50px的效果

<div class="div move"></div>
<style>
  .div {
    width: 100px;
    height: 100px;
    background: red;
  }
  .move {
    animation: move 1s forwards;
  }
  @keyframes move {
    from {
      width: 100px;
      height: 100px;
      background: red;
    }
    to {
      border-radius: 50%;
      transform: translateX(50px);
    }
  }
</style>

toggle animation

# animation和transition的区别

1. transition需要触发条件, 不能自动执行, animation可以自动执行
2. transition触发一次就执行一次, 多次执行需要多次触发, animation则可以设置animation-iteration-count
3. transition只能设置from和to的状态, animation可以设置关键帧

toggle transition

animation: