CSS3动画相关基础

CSS3动画相关的几个属性是：transition, transform, animation；我分别理解为过渡，变换，动画。

transition

1)transition-property 指定过渡的属性值
2)transition-duration 指定这个过渡的持续时间
3)transition-delay 延迟过渡时间
4)transition-timing-function 指定过渡动画缓动类型，linear线性过度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢

trsndform:指拉伸，压缩，旋转，偏移。

如：.trans_skew { transform: skew(35deg); }
  .trans_scale { transform:scale(1, 0.5); }
  .trans_rotate { transform:rotate(45deg); }
  .trans_translate { transform:translate(10px, 20px); }

transform属性要是加上transition的过渡特性会是什么效果呢？？？ 如下：

.waves-ripple.z-active {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
}
表示这个标签的opacity属性从1-0的显示状态经过1.2s，同时放大过程经历0.6s，要保证放大过程的效果，opaccity经历的时间要大于方法经历的时间。

animation

animation-name  规定需要绑定到选择器的 keyframe 名称。
animation-duration  规定完成动画所花费的时间，以秒或毫秒计。默认0
animation-timing-function 规定动画的速度曲线。默认ease
animation-delay 规定在动画开始之前的延迟。默认0
animation-iteration-count 规定动画应该播放的次数。默认1
animation-direction 规定是否应该轮流反向播放动画。默认normal

div {
  animation: myfirst 5s;
  -moz-animation: myfirst 5s; /* Firefox */
  -webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
  -o-animation: myfirst 5s; /* Opera */
}

@keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{}
@-o-keyframes myfirst /* Opera */
{}
// 2
// @keyframes myfirst
// {
//    0%   {background: red;}
//    25%  {background: yellow;}
//    50%  {background: blue;}
//    100% {background: green;}
// }