CSS3中使用animation(动画)、transition(过渡)、transform(2D转换)属性介绍。

本文主要针对css3的动画属性进行说明,相比于传统的使用jssetTimeOut();方法,css3动画会更加的流畅。无论是在手机或者是在pc上使用,而且更加灵活的多控制,用过afterEffect的朋友都知道,在我们常规的动画控制中,一般都通过控制一个元件的属性来形成一种动画效果,常用的有位置(X、Y),大小(W、H),透明度,旋转,路径动画,2D,3D等,并通过图层嵌套的形式实现复杂的动画效果,我们知道在专业的影视后期软件中有非线性编辑的功能,简单的说也就是当一个元素从位置A运动到位置B的时候,运动并非匀速,是有一定的变速效果,而这种运动的速率我们可以通过一种贝塞尔曲线进行控制,其实在我们的css3中也有cubic-bezier属性进行控制,从而达到更好的效果,图层嵌套动画的属性在HTML中就更加好实现了,只需要嵌套HTML标签,定位位置属性即可。


Transition(过渡)

我们先说transition属性,相对来说它还是比较好理解的也是比较容易学习的一种,一共有四个属性:

  1. transition 简写属性,用于在一个属性中设置四个过渡属性。
  2. transition-property 规定应用过渡的 CSS 属性的名称。
  3. transition-duration 定义过渡效果花费的时间。默认是 0
  4. transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"
  5. transition-delay 规定过渡效果何时开始。默认是 0
  • transition-property属性进行单独的设置,比如我们可以设置为colorbackground等属性,对单一的css属性进行控制,同时我们也可以对我们的某个元素的所有属性进行控制,我们只需要写成all即可。
  • transition-duration属性用来控制动画时间,单位为s(秒),记得一定要带单位。

  • transition-timing-function属性就是用来控制动画的时间曲线,可以理解为动画速率,其值包括有lineareaseease-inease-outease-in-outcubic-bezier几种:

  1. linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
  2. ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
  3. ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
  4. ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
  5. ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
  6. cubic-bezier(n,n,n,n)自定义
  • transition-delay用来控制动画开始的时间,由于transition属性定义的动画在元素加载到css的时候就会开始执行,所以通常在实现交互效果的时候我们会用js来通过不同的状态加载或删除不同的css,或者是css元素自身的一些状态如hover等,单位依然是S(秒)。
  • 我们也可以将transition的写法简单的写成如下,例:
  1. div{
  2. transition: width 1s linear 2s;
  3. /* Firefox 4 */
  4. -moz-transition:width 1s linear 2s;
  5. /* Safari and Chrome */
  6. -webkit-transition:width 1s linear 2s;
  7. /* Opera */
  8. -o-transition:width 1s linear 2s;
  9. }

Animation(动画)

animation动画我们只需要对需要的元素定义animation即可,格式如下:

  1. div{
  2. animation: myfirst 5s;
  3. }
  4. @keyframes myfirst{
  5. from {
  6. background: red;
  7. }
  8. to {
  9. background: yellow;
  10. }
  11. }

其中animation的所有属性说明如下:

  1. @keyframes 规定动画。
  2. animation 所有动画属性的简写属性,除了 animation-play-state 属性。
  3. animation-name 规定 @keyframes 动画的名称。
  4. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
  5. animation-timing-function 规定动画的速度曲线。默认是 "ease"
  6. animation-delay 规定动画何时开始。默认是 0
  7. animation-iteration-count 规定动画被播放的次数。默认是 1
  8. animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"
  9. animation-play-state 规定动画是否正在运行或暂停。默认是 "running"
  10. animation-fill-mode 规定对象动画时间之外的状态。
  • animation-name定义动画名称,我们可以自定义一个名称。

  • animation-duration动画的时间,单位是秒或者毫秒,通常习惯写成0.2s

  • animation-timing-function属性和上文中transition-timing-function相同。

  • animation-delay可以理解为动画的延时播放时间,单位为s,和上文中的transition-delay属性用法相同。

  • animation-iteration-count动画播放次数,我们可以通过数字定义播放的次数,负值无效,您可以指定非整数值来播放动画循环的一部分(例如,0.5将播放动画循环的一半),也可以通过infinite属性开控制动画永远循环。

  • animation-direction属性分别有normalreversealternatealternate-reverse几种属性,每种属性分别为:

  1. normal
  2. 动画应该向前播放每个周期。 换句话说,每次动画循环时,动画将重置为开始状态并重新开始。 这是默认的动画方向设置。
  3. reverse
  4. 动画每个周期向后播放。 每次动画循环时,动画重置为结束状态并重新开始。
  5. alternate
  6. 动画应该反向每个周期。 当反向播放时,动画步骤向后执行。 此外,定时功能也被反转; 例如,当反向播放时,将放入动画替换为放出动画。 确定它是偶数还是奇数迭代的计数从一个开始。
  7. alternate-reverse
  8. 动画在第一次播放时向后播放,然后在下一个播放时向前播放,然后继续交替播放。 确定它是偶数还是奇数迭代的计数从一个开始。
  • animation-play-state属性有running(动画正在播放)、paused(动画目前已暂停),通常我们会在js中获取该属性的状态,并使用。

  • animation-fill-mode属性有noneforwardsbackwardsboth等几种值:

    • none:

      动画执行前后不改变任何样式。

    • forwards:

      目标保持动画最后一帧的样式,最后一帧是哪个取决于animation-directionanimation-iteration-count:

    • backwards

      动画采用相应第一帧的样式,保持 animation-delay

    • both

      动画将会执行forwardsbackwards执行的动作。

通常情况下,我们只会用到一些简单的动画效果。

Transform(2D转换)

transform属性可对元素进行移动、缩放、转动、拉长或拉伸。这样我们就可以借助animation将丰富的动画效果完成。(内容参考W3C)

  • translate() 方法

通过translate() 方法,元素从其当前位置移动,根据给定的left(x 坐标) 和top(y 坐标) 位置参数:

  • rotate()方法

通过rotate()方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

  • scale()方法

通过scale()方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:

  • skew() 方法

通过skew()方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

  • matrix()方法

matrix()方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

  1. matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
  2. translate(x,y) 定义 2D 转换,沿着 X Y 轴移动元素。
  3. translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
  4. translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
  5. scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
  6. scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
  7. scaleY(n) 定义 2D 缩放转换,改变元素的高度。
  8. rotate(angle) 定义 2D 旋转,在参数中规定角度。
  9. skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X Y 轴。
  10. skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
  11. skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

评论: