初识动画animation

标签：

工作半年了，基本没怎么用到动画，现在对已学到的动画做一个总结（真的非常非常基础啊啊啊），准备之后再慢慢研究一下动画（有好的教程可以推荐给我咩~~）。

animation

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;

简写：animation: name duration timing-function delay iteration-count direction;

animation-name                    规定需要绑定到选择器的 keyframe 名称。

animation-duration                规定完成动画所花费的时间，以秒或毫秒计。

animation-duration:2s;
-webkit-animation-duration:2s; /* Safari 和 Chrome */

animation-timing-function      规定动画的速度曲线。

animation-timing-function:2s;
-webkit-animation-timing-function:2s; /* Safari 和 Chrome */

值：

　　linear 动画从头到尾的速度是相同的。 
　　ease 默认。动画以低速开始，然后加快，在结束前变慢。 测试
　　ease-in 动画以低速开始。 测试
　　ease-out 动画以低速结束。 测试
　　ease-in-out 动画以低速开始和结束。 测试
　　cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay                    规定在动画开始之前的延迟。

animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */

animation-iteration-count       规定动画应该播放的次数。

animation-iteration-count:3;
-webkit-animation-iteration-count:3; /* Safari 和 Chrome */

值：

　　n 定义动画播放次数的数值。
　　infinite 规定动画应该无限次播放。

animation-direction               规定是否应该轮流反向播放动画。

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */

值：

　　normal 默认值。动画应该正常播放。 
　　alternate 动画应该轮流反向播放。

@keyframes 

@keyframes name{}

@-webkit-keyframes name{}

值：

　　0-100%
　　from（与 0% 相同）
　　to（与 100% 相同）

@keyframes doubleBounce {
　　0%, 100% {
　　　　-webkit-transform: scale(0);
　　　　transform: scale(0);
　　}
　　50% {
　　　　-webkit-transform: scale(1);
　　transform: scale(1);
　　}
}

transform

-webkit-transform: scale(0);
transform: scale(0);

值：

　　none 　　　　　　定义不进行转换。 
　　matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 
　　matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
　　translate(x,y) 　　定义 2D 转换。 
　　translate3d(x,y,z) 定义 3D 转换。
　　translateX(x) 　　定义转换，只是用 X 轴的值。 
　　translateY(y) 　　定义转换，只是用 Y 轴的值。 
　　translateZ(z) 　　定义 3D 转换，只是用 Z 轴的值。
　　scale(x,y) 　　　　定义 2D 缩放转换。 测试
　　scale3d(x,y,z) 　　定义 3D 缩放转换。
　　scaleX(x) 　　　　通过设置 X 轴的值来定义缩放转换。 
　　scaleY(y) 　　　　通过设置 Y 轴的值来定义缩放转换。 
　　scaleZ(z) 　　　　通过设置 Z 轴的值来定义 3D 缩放转换。
　　rotate(angle) 　　定义 2D 旋转，在参数中规定角度。 
　　rotate3d(x,y,z,angle) 定义 3D 旋转。
　　rotateX(angle) 　　定义沿着 X 轴的 3D 旋转。 
　　rotateY(angle) 　　定义沿着 Y 轴的 3D 旋转。 
　　rotateZ(angle)　　 定义沿着 Z 轴的 3D 旋转。 
　　skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 
　　skewX(angle)　　 定义沿着 X 轴的 2D 倾斜转换。 
　　skewY(angle) 　　定义沿着 Y 轴的 2D 倾斜转换。 
　　perspective(n) 　　为 3D 转换元素定义透视视图。 

eg：

 div{
 -webkit-animation: scaleCeshi 2s infinite ease-in-out;
          animation: scaleCeshi 2s infinite ease-in-out;
}

div span{
  -webkit-animation-delay: -1.0s;
          animation-delay: -1.0s;
}

@-webkit-keyframes scaleCeshi {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scaleCeshi {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

初识动画animation

标签：

原文地址：http://www.cnblogs.com/zzhbx/p/5493246.html