[] Front-end animation (CSS3) animation

Animations (CSS3) animation

CSS3 animation feature is one subversive, can be accurately controlled, or a group of a movie, a plurality of common nodes is achieved by providing a complicated animation.

Syntax:

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

Several values, in addition to the name, the animation time delay, there are strict requirements of other random order

@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

animation-iteration-count:infinite;  无限循环播放
animation-play-state:paused;   暂停动画"

Case

body {
  background: white;
}
img {
  width: 200px;
}
.animation {
  animation-name: goback;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes goback {
  0%{}
  49%{
    transform: translateX(1000px);
  }
  55%{
    transform: translateX(1000px) rotateY(180deg);
  }
  95%{
    transform: translateX(0) rotateY(180deg);
  }
  100%{
    transform: translateX(0) rotateY(0deg);
  }
}