css3--动画

转换—transform

---

• transform-origin：
• transform-style：flat | preserve-3d
• perspective：指定3D的视距
• perspective-origin：
• backface-visibility：hidden

---

• translate()：translate(x,y) translate3d(x,y,z) translateX(x) translateY(y) translateZ(z)
• rotate()：顺时针旋转给定的角度，rotate(angle) rotate3d(x,y,z,angle) rotateX(angle) rotateY(angle) rotateZ(angle)
• scale()：放大与缩小，scale(*x*,*y*) scale3d(*x*,*y*,*z*) scaleX(*x*) scaleY(*y*) scaleZ(*z*)
• skew()：倾斜，skew(x-angle,y-angle) skewX(angle) skewY(angle)
• matrix():
• perspective(n)：为 3D 转换元素定义透视视图

过渡—transition

• transition-property：指定需要过渡的CSS属性
• transition-duration：过渡需要的时间
• transition-timing-function：过渡函数，linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps
• transition-delay：延迟开始过渡的时间

动画—animation

• animation-name：指定@keyframes的名字
• animation-duration：动画持续时间
• animation-timing-function：动画播放方式
• animation-delay：延迟开始动画的时间
• animation-iteration-count：动画循环播放的次数,infinite
• animation-direction：动画播放的方向，可设normal，alternate，alternate-reverse
• animation-play-state：动画的状态，可设running，paused。默认值running表示正在播放动画，paused表示暂停动画。通常在JS端使用该属性
• animation-fill-mode：动画的时间外属性，可设none，forwards，backwards，both。
• @keyframes：

@keyframes mymove {
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;} 
}