css3-animation

前端实现动画效果时可以采用css动画或者js element.animate 也就是Web Animations API 来做(对于动画执行完成事件处理等易于操作)，这里记录下个人使用css3做动画的一些记录点

• 定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name 动画名称 @keyframes

      @keyframes animationName {
        0% {
          transform: translateY(-1200px) scale(0.2, 2);
          transform-origin: 50% 0%;
          filter: blur(40px);
          background-color: skyblue;
          opacity: 0;
        }
        100% {
          transform: translateY(0) scale(1, 1);
          transform-origin: 50% 50%;
          filter: blur(0px);
          opacity: 1;
        }
      }

• animation-duration 完成动画所花费的时间，以秒或毫秒计 0表示没有动画效果
• animation-timing-function 动画的速度曲线 速度曲线定义动画从一套 CSS 样式变为另一套所用的时间
  • linear       相同速度 
  • ease        低速-加快-低速 （默认）测试感觉前后的低速并不相同
  • ease-in    动画以低速开始
  • ease-out  动画以低速结束
  • ease-in-out 动画以低速开始和结束(和ease比相当于前期慢，然后越来越快)
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
• animation-delay    动画开始之前的延迟
• animation-iteration-count 动画执行次数 infinite 表示一直循环
• animation-direction
  • normal 默认播放
  • reverse 反方向播放
  • alternate 轮流反方向播放

• animation-fill-mode  控制动画结束状态

语法

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

上述可简写 

animation: name duration timing-function delay iteration-count direction fill-mode;

• animation-play-state: 控制动画 

  • paused 暂停

  • running 播放

转载于:https://my.oschina.net/mdu/blog/3083761