HTML动画及过渡效果

HTML动画及过渡效果

1.动画

1) 动画定义

1. @keyframes 动画名称{

   from {

   }

   to{

   }

   }

=》

2. @keyframes 动画名称{

   10% {

   }

   20%{

   }

   …

   100%{

   }

   }

   2) 动画应用

• animation-name:动画名称;

• animation-duration: 动画持续时间

  5s;

• animation-delay: 动画的延迟

  1s

• animation-direction 动画运动方向

  reverse

  alternate

• animation-fill-mode: 动画结束后保留哪个样式

  forwards 保留最后一帧的样式

  backwards 保留第一帧的样式

• animation-iteration-count: 动画执行的次数

  4

  infinite

• animation-timing-function: 动画执行的时间曲线

  linear

  steps

• animation-play-state: ; 动画播放状态

  running