鱼仔布丁

18 CSS3 变换，动画

5/31/2021 html

# 盒子的变形

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform - CSS（层叠样式表） | MDN (opens new window)

# CSS3 2D变形

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

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

  1. translate(x,y)方法

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

  1. scale() 方法

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

  1. skew() 方法

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

  1. matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。 matrix() 方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。

  1. transform-origin 属性

允许你改变被转换元素的位置。

语法： transform-origin: x-axis y-axis z-axis;

属性值：

  • x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%。
  • y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%。
  • z-axis ：定义视图被置于 Z 轴的何处。可能的值：length。

# CSS3 3D变形

  1. perspective属性 特殊效果，用得少

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

语法： perspective: number|none;

属性值：

  • number ：元素距离视图的距离，以像素计。
  • none ：默认值。与 0 相同。不设置透视。
  1. trasform-style属性 特殊效果，用得少

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

注释：该属性必须与 transform 属性一同使用。

语法： transform-style: flat|preserve-3d;

属性值：

  • flat ：子元素将不保留其 3D 位置。
  • preserve-3d ：子元素将保留其 3D 位置。
  1. rotateX方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}

rotateY rotateZ 类似

# CSS3过渡 transition

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

transition - CSS（层叠样式表） | MDN (opens new window)

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

语法： transition: property duration timing-function delay;

  • transition-property 规定设置过渡效果的 CSS 属性的名称。
  • transition-duration 规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function 规定速度效果的速度曲线。
  • transition-delay 定义过渡效果何时开始。

transition-property 可以使用的属性有：

  • 颜色
    color background-color border-color outline-color
  • 位置
    background-position left right top bottom
  • 长度
    max-height min-height max-width min-width height width border-width margin padding outline-width outline-offset font-size line-height text-indent vertical-align border-spacing letter-spacing word-spacing
  • 数字
    opacity visibility z-index font-weight zoom
  • 组合
    text-shadow transform box-shadow clip
  • 其它
    gradient

timing-function: 缓动函数

  • linear:匀速
  • ease:变速（先慢后快，最后再慢）
  • ease-in:变速（由慢到快）
  • ease-out:变速（由快到慢）
  • ease-in-out:变速（慢速开始，慢速结束）
  • cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1之间
div
{
    width:100px;
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari 和 Chrome */
    -o-transition: width 2s; /* Opera */
}

# CSS3 动画

# @keyframes

@keyframes - CSS（层叠样式表） | MDN (opens new window)

通过 @keyframes 规则，能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法： @keyframes animationname {keyframes-selector {css-styles;}}

  • animationname 必需。定义动画的名称。
  • keyframes-selector 必需。动画时长的百分比。合法的值：0-100%from（与 0% 相同）to（与 100% 相同）
  • css-styles 必需。一个或多个合法的 CSS 样式属性。
@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;}
}

# animation

animation - CSS（层叠样式表） | MDN (opens new window)

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

语法： animation: name duration timing-function delay iteration-count direction;

  • animation-name 规定需要绑定到选择器的 keyframe 名称。。
  • animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
  • animation-timing-function 规定动画的速度曲线。
  • animation-delay 规定在动画开始之前的延迟。
  • animation-iteration-count 规定动画应该播放的次数。
  • animation-direction 规定是否应该轮流反向播放动画。
div
{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

设置关键帧

如果只有两个关键帧

@keyframes 动画名 {
          0%:{样式表}
          100%:{样式表}
      }

或：

@keyframes 动画名 {
    from:{样式表}
    to:{样式表}
}

如果是多个关键帧

@keyframes 动画名 {
    0%:{样式表}
    25%:{样式表}
    60%:{样式表}
    ...
    100%:{样式表}
}

animation-iteration-count：动画循环播放的次数

  • number：按设定次数循环播放（默认次数为1次）
  • infinite：一直循环播放

animation-direction：动画播放完后是否反向播放

  • normal:不反向（默认值）
  • alternate:反向

# animation-play-state 属性

animation-play-state 属性规定动画正在运行还是暂停。

注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

语法： animation-play-state: paused|running;

属性值：

  • paused 规定动画已暂停。
  • running 规定动画正在播放。
div
{
    animation-play-state:paused;
    -webkit-animation-play-state:paused; /* Safari 和 Chrome */
}
更新时间: Monday, May 31, 2021 21:57

19 布局