CSS3 Transition, transform 和 animation 介绍

wums 发布于2019-08-22 11:50 / 2523人阅读

摘要：和介绍允许的属性值在一定的时间区间内平滑地过渡，语法如下用来指定执行效果的属性，可以为或者特定的属性。缩放的取值范围是，小于时表示缩小，反之表示放大。

CSS3 提供了transition 过渡、transform 变换和animation 动画来实现页面中的一些样式转化，这篇文章会对这几个属性做简单的介绍，然后比较一下 CSS3 动画和 JS 动画哪个性能更好。

Transition, transform 和 animation 介绍 transition

transition允许css的属性值在一定的时间区间内平滑地过渡，语法如下：

transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]

transition-property
用来指定执行transition效果的属性，可以为 none,all或者特定的属性。

transition-duration
动画执行的持续时间，单位为s（秒）或者 ms（毫秒）。

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

云服务器 GPU云服务器 -transition Transition Transformed Transformer

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92324.html

CSS3新特性的概述

摘要：的新特性大致分为以下六类选择器边框与圆角背景与渐变过渡变换动画下面分别说一说以上六类都有哪些内容选择器基本选择器基本选择器又分为子选择器相邻兄弟选择器通用兄弟选择器群组选择器属性选择器为带有属性的元素设置样式为属性的元素设置样式选择属性值包 CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 ...

Zachary 2019-08-29 13:17 评论0 收藏0
css3中的变形（transform）、过渡（transition）、动画（animation）属性

摘要：中制作动画的几个属性中的变形过渡动画。默认值为，为时，表示变化是瞬时的，看不到过渡效果。实现动画效果主要由两部分组成通过类似动画中的帧来声明一个动画在属性中调用关键帧声明的动画。 css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。一、 CSS3变形（transform）语法： transform ： no...

waruqi 2019-08-30 10:51 评论0 收藏0
css3动画属性详解之transform、transition、animation

摘要：动画属性详解关于制作动画的几个属性变形转换和动画。一属性旋转中心为原点扭曲倾斜缩放移动矩阵变形。各个属性的用法旋转其中表示度。承载动画的另一个属性。定义动画的名称。一个或多个合法的样式属性。 css3动画属性详解：关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)。一、transform 属性：旋转rotate（中...

Riddler 2019-08-30 12:46 评论0 收藏0
CSS3转换过渡动画

摘要：转换能够对元素进行移动缩放转动拉长或拉伸。和和的参数可以为。过渡该属性和配合使用，实现鼠标移入动画效果。实例动画该属性和配合使用。规则用于创建动画。在中规定某项样式，就能创建由当前样式逐渐改为新样式的动画效果。 CSS3中有三个属性：transform、transition、animation，一直容易搞混，今天特意拎出来理一理。 transform 转换 transform 能够对元...

MonoLog 2019-08-29 12:14 评论0 收藏0