CSS3动画实现

1. Animation

Animation是自定义动画的实现效果

实现代码

<div class="animated">
  CSS3Ani
</div>

.animated {
  position: relative;
  width: 100px;
  height: 100px;
  background: pink;
  padding: 10px;

  /* animation_key */
  animation-name: aniexample; //自定义动画的名字
  animation-iteration-count: infinite; //动画播放次数
  animation-duration: 5s; //动画播放时间
  animation-direction: alternate; //重复播放的方向
}

@keyframes aniexample {
  0% {
    left: 0;
    top: 0px;
  }
  25% {
    left: 0;
    top: 200px;
  }
  75% {
    left: 200px;
    top: 200px;
  }
  100% {
    left: 200px;
    top: 0;
  }
}

实现效果： codepen.io/willawei31/…

2. Transition

Transition是过渡动画的实现效果

<div class="transition">
  transition
</div>

.transition {
  position: relative;
  width: 100px;
  height: 100px;
  background: pink;
  padding: 10px;
  transition: width 2s; // 对宽度做变化
}

.transition:hover {
  width: 300px;
}

codepen.io/willawei31/…