CSS3 动画--- CSS3 animation

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

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

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r

@keyframes 动画名称 {

  from{ 开始位置 }  0%

  to{  结束  }  100%

}

animation-iteration-count:infinite;  无限循环播放    默认是1次

animation-direction： alternate   动画应该轮流反向播放    默认是 normal

animation-play-state:paused;   暂停动画"

小汽车案例

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);

  }

}