CSS3 Transition, transform 和 animation 引见

2024年4月6日 248次阅读 来源: MockingBird

CSS3 供应了transition 过渡、transform 变更和animation 动画来完成页面中的一些款式转化，这篇文章会对这几个属性做简朴的引见，然后比较一下 CSS3 动画和 JS 动画哪一个机能更好。

Transition, transform 和 animation 引见

transition

transition许可css的属性值在肯定的时候区间内腻滑地过渡，语法以下：

transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]
  1. transition-property
    用来指定实行transition结果的属性，可以为 none,all或许特定的属性。
  2. transition-duration
    动画实行的持续时候，单元为s（秒）或许 ms（毫秒）。
  3. transition-timing-function
    变更速度结果，可选值为ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier（自定义时候曲线）。
  4. transition-delay
    用来指定动画最先实行的时候，取值同transition-duration，然则可以为负数。

DEMO:http://codepen.io/CodingMonkeyzh/pen/ZGBRVe

transform

transform 分为2D 和 3D，这里临时只引见比较经常使用的2D transform，其主要包含以下几种变更：扭转rotate、歪曲skew、缩放scale和挪动translate以及矩阵变形matrix，语法以下：

transform: rotate | scale | skew | translate |matrix;
  • rotate 扭转
    rotate 的单元是deg 度，正数示意顺时针扭转，负数示意逆时针扭转。
    DEMO：http://codepen.io/CodingMonkeyzh/pen/XbNYOa
  • scale 缩放
    scale 的取值局限是0~n，小于1时示意减少，反之示意放大。比方scale(0.5, 2)示意程度方向减少1倍，垂直方向放大1倍， 别的，也能够经由过程scaleX或许scaleY对一个方向举行设置。
    DEMO：http://codepen.io/CodingMonkeyzh/pen/doOKrg
  • skew 歪曲
    skew 的单元跟rotate一样都是deg 度。比方 skew(30deg, 10deg)示意程度方向倾斜30度，垂直方向倾斜10度。
    DEMO：http://codepen.io/CodingMonkeyzh/pen/KpNeYg
  • translate 偏移
    偏移一样包含程度偏移和垂直偏移。translate(x,y)程度方向和垂直方向同时挪动（也就是X轴和Y轴同时挪动）；translateX(x)仅程度方向挪动（X轴挪动）；translateY(Y)仅垂直方向挪动（Y轴挪动）。
    DEMO：http://codepen.io/CodingMonkeyzh/pen/waoXbB

animation

CSS3 中的 animation 是经由过程一个叫Keyframes 关键帧的玩意来掌握的，他的定名是由”@keyframes”开首，背面紧接着是这个“动画的称号”加上一对花括号“{}”，括号中就是一些差别时候段款式划定规矩，有点像我们css的款式写法一样。关于一个”@keyframes”中的款式划定规矩是由多个百分比组成的，如“0%”到”100%”之间，语法以下：

@keyframes IDENT {
  from {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  to {
    Properties: Properties value;
  }
}

或许悉数写成百分比的情势： 
@keyframes IDENT {
  0% {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  100% {
    Properties: Properties value;
  }
}

animation和transition一样有本身相对应的属性，那末在animation主要有以下几种：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面临个中的一些属性举行诠释：

  • animation-name 关键帧名
    用来定义一个动画的称号，也就是由前面的keyframes建立的动画名，默认值为none，当值为none时，将没有任何动画结果。假如我们要同时附几个animation给一个元素，只需用逗号,离隔即可。
  • animation-iteration-count 动画轮回次数
    默以为1，假如要举行无穷轮回，只需设为infinite即可。
  • animation-direction 动画播放的方向
    其只要两个值，默认值为normal，假如设置为normal时，动画的每次轮回都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
  • animation-play-state 播放状况
    其主要有两个值，running和paused，个中running为默认值。能够经由过程paused将正在播放的动画停下了，也能够经由过程running将停息的动画从新播放。这个属性不经常使用。

DEMO 1: http://codepen.io/CodingMonkeyzh/pen/mJOKZY

DEMO 2: http://codepen.io/CodingMonkeyzh/pen/EjNpaE

    原文作者：MockingBird
    原文地址: https://segmentfault.com/a/1190000002799636
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞