【前端系列教程之CSS3】07_CSS3 2D转换、过渡、关键帧动画

我是波哩个波

已于 2022-03-10 15:20:47 修改

阅读量546

点赞数 2

分类专栏： # CSS3从入门到精通文章标签： html 前端 html5 css3 动画

于 2021-11-30 13:09:03 首次发布

本文链接：https://blog.csdn.net/ligonglanyuan/article/details/121629967

版权

CSS3从入门到精通专栏收录该内容

9 篇文章 3 订阅

订阅专栏

一、CSS3 2D和3D转换

CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。

它是如何工作？

转换的效果是让某个元素改变形状，大小和位置。

您可以使用 2D 或 3D 转换来转换您的元素。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本.

浏览器坐标轴:

1.1 CSS3 2D 转换

新转换属性:

Property	描述
transform	适用于2D或3D转换的元素

2D 转换方法:

函数(transform样式值)	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。x和y是像素值;可以是正数值,也可以是负数值
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。x和y是数值,表示放大或缩小的倍数;
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 轴。

translate() 方法

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

div {
    transform: translate(50px,100px);

    /* IE 9 */
    -ms-transform: translate(50px,100px);

    /* Safari and Chrome */
    -webkit-transform: translate(50px,100px);
}

rotate() 方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

rotate值（30deg）元素顺时针旋转30度。

div{
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale() 方法

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

div { 
    -ms-transform:scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* 标准语法 */
}

skew() 方法

语法：

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。

skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

div{
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。

matrix() 方法(推荐多值写法,空格隔开)

matrix()方法把2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

接收 6 个参数：a、b、c、d、e、f

其计算规则为：

其中，x 和 y 表示变换前矩阵偏移元素中心点的坐标；x‘ = ax + cy + e 和 y‘ = bx + dy + f 分别表示变换后的坐标。

中心点的坐标固定为(0, 0)，这个值与 transform-origin 的值无关；也就是说，即使 transform-origin 的值从默认的 50% 50% 被指定为（假设）30px 30px ，其意为坐标 (0, 0) 从 50% 50% 的位置移动到 30px 30px 的位置； 30px 30px 这个点是新的中心点，其坐标为 (0, 0) 。

假设 matrix(1,0,0,1,30,30) ;

那么 x‘ 和 y‘ 分别等于 x + 30 和 y +30 ；

也就是说，经过矩阵转换之后，(0, 0) 变成 (30, 30) ，(1, 1) 变成 (31, 31) ，以此类推。。。直到变换元素所有的坐标都经过变化之后，在新的位置上组成了一个新的图形。

其结果与 translate(30px, 30px) 完全相同。

利用matrix()方法旋转div元素30°

div { 
	transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
}

div { 
    transform:scale(2,3); 
    rotate(30deg); 
}

深入理解矩阵:理解CSS3 transform中的Matrix(矩阵)

transform-origin

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

语法

transform-origin: x-axis y-axis z-axis;

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

案例演示（理解）：

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
    position: relative;
    height: 200px;
    width: 200px;
    margin: 50px;
    padding:10px;
    border: 1px solid black;
}

#div2
{
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    transform: rotate(45deg);
    transform-origin:20% 40%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin:20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -webkit-transform-origin:20% 40%; /* Safari and Chrome */
    -moz-transform: rotate(45deg); /* Firefox */
    -moz-transform-origin:20% 40%; /* Firefox */
    -o-transform: rotate(45deg); /* Opera */
    -o-transform-origin:20% 40%; /* Opera */
}
</style>
<script>
function changeRot(value)
{
    document.getElementById('div2').style.transform="rotate(" + value + "deg)";
    document.getElementById('div2').style.msTransform="rotate(" + value + "deg)";
    document.getElementById('div2').style.webkitTransform="rotate(" + value + "deg)";
    document.getElementById('div2').style.MozTransform="rotate(" + value + "deg)";
    document.getElementById('div2').style.OTransform="rotate(" + value + "deg)";
    document.getElementById('persp').innerHTML=value + "deg";
}

function changeOrg()
{
    var x=document.getElementById('ox').value;
    var y=document.getElementById('oy').value;
    document.getElementById('div2').style.transformOrigin=x + '% ' + y + '%';
    document.getElementById('div2').style.msTransformOrigin=x + '% ' + y + '%';
    document.getElementById('div2').style.webkitTransformOrigin=x + '% ' + y + '%';
    document.getElementById('div2').style.MozTransformOrigin=x + '% ' + y + '%';
    document.getElementById('div2').style.OTransformOrigin=x + '% ' + y + '%';
    document.getElementById('origin').innerHTML=x + "% " + y + "%";            
}
</script>
</head>

<body>

<p>Rotate the red div element, try changing its X-axis and Y-axis:</p>

<div id="div1">
<div id="div2">HELLO</div>
</div>

Rotate:
<input type="range" min="-360" max="360" value="45" onchange="changeRot(this.value)" />
transform: rotateY:(<span id="persp">45deg</span>);
<br><br>
X-axis:<input type="range" min="-100" max="200" value="20" onchange="changeOrg()" id="ox" /><br>
Y-axis:<input type="range" min="-100" max="200" value="40" onchange="changeOrg()" id="oy" />
transform-origin: <span id="origin">20% 40%</span>;

</body>
</html>

1.2 CSS3 3D 转换(了解)

CSS3 允许您使用 3D 转换来对元素进行格式化。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。

案例

多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。

定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。

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

值: 像素值，元素距离视图的距离，以像素计。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    #div0{
        width: 300px;
        margin: 30px;
        border: 2px solid red;
        perspective:1000px;
        background: red;
    }
    #div1,#div2,#div3{
        width: 200px;
        height: 150px;
        font-size: 50px;
        margin: 30px auto;
        background: green;
    }

    #div1:hover{
    /*transform: translate3d(0,0,-300px);*/
        transform:translateZ(-500px);
    }
    #div2:hover{
        transform: rotate3d(0,1,0,45deg);
        transform-origin:right;
    }

    #div3:hover{
        transform: scaleZ(2) rotateX(60deg);
        transform-origin:top;
    }

    body{
        perspective:1000px;
    }

    #div0:hover{
        transform:rotateX(45deg);
        -webkit-transform:rotateX(45deg);
        -moz-transform:rotateX(45deg);
        -o-transform:rotateX(45deg);
        -ms-transform:rotateX(45deg);
    }
  </style>
 </head>
 <body>
  <div id="div0">
      <div id="div1">3D平移</div>
      <div id="div2">3D旋转</div>
      <div id="div3">3D缩放</div>
    </div>
 </body>
</html>

二、CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

它是如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。（以秒或毫秒计）
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。 linear：规定以相同速度开始至结束的过渡效果。 ease:规定慢速开始，然后变快，然后慢速结束的过渡效果。 ease-in：规定以慢速开始的过渡效果。 ease-out：规定以慢速结束的过渡效果。 ease-in-out：规定以慢速开始和结束的过渡效果。
transition-delay	规定过渡效果何时开始。默认是 0。

应用于宽度属性的过渡效果，时长为 2 秒：

div {
	transition: width 2s;
}

/*注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：规定当鼠标指针悬浮(:hover)于 <div>元素上时：*/
div:hover {
	width: 400px;
}

多项改变:

要添加多个样式的变换效果，添加的属性由逗号分隔：

<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
</style>

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div>鼠标移动到 div 元素上，查看过渡效果。</div>

在一个例子中使用所有过渡属性：

<style>
div
{
    width:100px;
    height:100px;
    background:red;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

div:hover
{
    width:200px;
}

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>

与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：

div{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

三、CSS3 动画(关键帧动画)

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

3.1 CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。 linear：动画从头到尾的速度是相同的。 ease：默认。动画以低速开始，然后加快，在结束前变慢。 ease-in：动画以低速开始。 ease-out：动画以低速结束。 ease-in-out：动画以低速开始和结束。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式(不设置)。
animation-delay	规定动画何时开始。默认是 0。定义动画开始前等待的时间，以秒或毫秒计。
animation-iteration-count	规定动画被播放的次数。默认是 1。 n：一个数字，定义应该播放多少次动画 infinite 指定动画应该播放无限次（永远）
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。 normal 默认值。动画按正常播放。 reverse 动画反向播放。 alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

3.2 CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst {
	from {background: red;}
	to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */ {
	from {background: red;}
	to {background: yellow;}
}

3.3 CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div {
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

3.4 百分比关键帧动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

改变背景色和位置：

div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

3.5 设置所有的属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>所有属性效果</title>
<style>
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>
</html>

与上面的动画相同，但是使用了简写的动画 animation 属性：

div{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

我是波哩个波

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端系列教程之CSS3】07_CSS3 2D转换、过渡、关键帧动画

CSS3从入门到精通视频直通车：CSS3从入门到精通，超多案例实践，轻松上手，通俗易懂！一、CSS3 2D和3D转换CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。它是如何工作？转换的效果是让某个元素改变形状，大小和位置。您可以使用 2D 或 3D 转换来转换您的元素。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- ...
复制链接

扫一扫