animation-fill-mode 之 forwards ， transition-timing-function的取值 和 transform属性

animation-fill-mode 有四个值可选，并且允许由逗号分隔多个值。

• none 不改变默认行为。

• forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

• backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

• both 向前和向后填充模式都被应用。

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

语法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

css动画简写

div{
　　animation: myName 1s linear infinite forwards 1s step(1);
　　-webkit-animation: myName 1s linear infinite forwards 1s step(1);
　　}
@keyframes myName {
 0%{
　　transform: rotate(-90deg) scale(.3) translateY(10px);
　　transform-origin: left top;
　　}
 100%{
　　transform: rotate(0deg) scale(.3) translateY(0px);
　　transform-origin: left top;
　　}
　　}

语法

transform: none|transform-functions;