CSS3-动画

动画效果

CSS3出现之前 前端一般采用Flash动画或JavaScript来制作动画帧动画:通过一帧一帧的动画按照固定顺序和速度播放 如电影胶片

当CSS3出现之后,我们就开始用过渡属性来进行动画的制作了,name过渡属性有多好用呢,让我们拭目以待吧~

先来了解下过渡属性:

属性名:transition

作用:在不使用Flash动画或JavaScript的情况下,使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看效果,我们使用:hover切换状态。

语法格式 transition: 过渡属性 过渡时间 运动曲线 延迟时间;

属性:

transition 简写属性,用于在一个属性中设置四个过渡属性transition-property 规定应用过渡的CSS属性的名称transition-duration 定义过渡效果花费的时间。默认是0transition-timing-function 规定过渡效果的时间曲线。默认是"ease"transition-delay 规定过渡效果何时开始。默认是0

transition-property 过渡属性

none 表示没有属性过渡all 表示所有变化的属性都过渡属性名 使用具体的属性名,多个属性名中间逗号分隔

transition-duration 与 transition-delay

过渡时间:以s秒为单位延时时间:以s秒为单位。0s也必须加单位

transition-timing-function 时间曲线

linear 规定以相同的速度开始至结束的过渡效果ease 规定慢速开始,然后变快,然后慢速结束的过渡效果ease-in 规定以慢速开始的过渡效果ease-out 规定以慢速结束的过渡效果cubic- bezier 在 cubic-beizier 函数中定义自己的值。x1、x2取是0至1之间的数值,y1、y2取值任意,四个数值表示拉扯的点的两个坐标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过度属性</title> <style> * { padding: 0; margin: 0; } .box { margin: 100px auto; width: 100px; height: 100px; background-color: pink; /* 过渡属性: 属性 过渡时间 时间曲线 延迟时间 */ /* transition: all 1s ease; */ transition: all 1s cubic-bezier(0.14, 0.08, 0, 0.99) 0.1s; } .box:hover { width: 300px; height: 300px; } </style> </head> <body> <div class="box"></div> </body> </html>

Internet Explorer 10 、 Firefox 、Chrome 以及 Opera 支持transition 属性

Safari 需要前缀 -webkit-

注意:Internet Explorer 9 以及更早的版本 不支持transition 属性

2D转换-位移

属性名:transform

作用:对元素进行移动、缩放、转动、拉长或拉伸 配合过渡和即将学习的动画知识,可以取代大量,之前只能靠Flash才可以实现的效果

属性值:多种转换方法的属性值,可以实现不同的转换效果

位移 translate()

transform的属性值为translate()时 可以实现位移效果

书写语法

transform:translate(x,y) x,y分别为水平和垂直方向位移的距离,可以为px值或百分比,区分正负transform:translate(x) 只有一个数值,表示水平方向的位移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>转换位移</title> <style> * { margin: 0; padding: 0; } .box { width: 234px; height: 248px; border: 1px solid #000; margin: 100px auto; } .box img { transform: translate(100px,50px); transform: translate(-100px,-50px); transform: translate(50px); } .box2 { position: relative; width: 500px; height: 100px; margin: 10px; border: 1px solid; } p { /* 定位居中方式 */ position: absolute; width: 100px; height: 100px; left: 50%; /* margin-left: -50px; */ transform: translate(-50%); background-color: skyblue; } </style> </head> <body> <div class="box"> <img src="images/meng.jpg" alt=""> </div> <div class="box2"> <p></p> </div> </body> </html>
图片利用translate()实现了位移图片利用更万金油的方式实现了居中

上面我们看到,图片的位移是显而易见的,但这不是我们这个案例的重点,我们发现了一种新的居中方式,以前我们用父相子绝方式水平定位50%再配合子元素设置水平的负数外边距(自身宽度的一半)来做到居中,但是元素宽度不同每次都要重新调数据。现在我们可以通过transform:translate(-50%); 代替负外边距的步骤,代码的泛用性更广了~

2D转换-缩放

缩放 scale()

transform 的属性值为 scale()时 可以实现元素的缩放效果

书写语法:

transform:scale(x,y) x,y分别为改变元素的宽度和高度的倍数transform:scale(n) 只有一个值,表示宽度和高度同时缩放n倍transform:scaleX(n) 改变元素的宽度transform:scaleY(n) 改变元素的高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>转换-缩放</title> <style> .box1{ width: 200px; height: 200px; margin: 200px auto; background-color: pink; transition: all .5s; } .box1:hover{ /* transform:scale(1.5); */ /* transform:scale(1.5, 2); */ /* transform:scaleX(2); */ transform:scaleY(2); } </style> </head> <body> <div class="box1"></div> </body> </html>

2D转换-旋转

transform属性值设置为rotate()时,实现元素的旋转

书写语法:

transform:rotate(数字deg)

其中,deg为度数单位 正数表示顺时针旋转 负数表示逆时针旋转 2D的旋转只有一个属性值

注意:元素旋转后,坐标轴也跟着发生转变

因此,多个属性值同时设置给transform时,书写顺序不同导致的转换效果有差异

2D转换-倾斜

倾斜skew()

transform 属性值设置为skew()时 实现元素的倾斜

书写语法

transform:skew(数字deg,数字deg)

两个属性值分别表示水平和垂直方向的倾斜角度 属性值可以为正可以为负 第二个数值不写默认为0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倾斜 skew(</title> <style> .box { width: 200px; height: 200px; border: 1px solid; margin: 200px auto; } .box1 { width: 200px; height: 200px; background-color: pink; transition: all 1s; } .box:hover .box1 { transform:skew(89deg, 89deg); } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html>

嘿嘿,上图的倾斜角度有点刁钻,反正水平倾斜就是左右边倾斜,垂直倾斜就是上下边倾斜,倾斜角度接近90deg就会逐渐变成一条直线,出现水平或者垂直无限大的情况,所以如果水平和垂直都接近90deg,就会让面积扩展成无限大(在水平垂直都过45deg时,图形会翻转,然后逐渐随着倾斜角度的提升而变大)

2D转换-基准点

transform-origin属性

作用:设置调整元素的水平和垂直方向圆点的位置

调整元素的基准点

属性值:包含两个,中间使用空格分隔

x 定义X轴的原点在何处 可能的值:left、center、right、像素值、百分比

y 定义Y轴的原点在何处 可能的值:top、center、bottom、像素值、百分比

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基准点</title> <style> .box1 { width: 200px; height: 200px; margin: 200px auto; background-color: pink; transform-origin: left top; transition: all 1s; } .box1:hover{ transform:rotate(45deg); } </style> </head> <body> <div class="box1"></div> </body> </html>

上图我们把旋转的基准点换成了左上角,所以盒子就以左上角为圆心旋转了

我们再来做个一个卡包特效

下面是代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>卡包特效</title> <style> * { margin: 0; padding: 0; } .box { position: relative; width: 225px; height: 150px; margin: 300px auto; background-color: goldenrod; } p { width: 225px; height: 150px; position: absolute; left: 0; top: 0; transition:all 1s ease-in-out; transform-origin:right top; } p img { width: 225px; height: 150px; } .box:hover :nth-child(1) { transform: rotate(0deg); } .box:hover :nth-child(2) { transform: rotate(60deg); } .box:hover :nth-child(3) { transform: rotate(120deg); } .box:hover :nth-child(4) { transform: rotate(180deg); } .box:hover :nth-child(5) { transform: rotate(240deg); } .box:hover :nth-child(6) { transform: rotate(300deg); } </style> </head> <body> <div class="box"> <p><img src="images/1.jpg" alt=""></p> <p><img src="images/2.jpg" alt=""></p> <p><img src="images/3.jpg" alt=""></p> <p><img src="images/4.jpg" alt=""></p> <p><img src="images/5.jpg" alt=""></p> <p><img src="images/6.jpg" alt=""></p> </div> </body> </html>

接下来我们的2D时代就结束了,开始进入3D时代~

3D转换

transform 属性不止能实现2D转换 也可以制作3D立体转换效果

比普通的x、y轴组成的平面效果多了一条z轴

那么如何在平面上看出3D的感觉呢,下面这个属性是必不可少的!

透视

电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的

透视可以将一个2D平面 在转换的过程当中 呈现3D效果

透视特点:近大远小

注意:并非任何情况下需要透视效果,根据开发需要进行设置 如果需要展示z轴的变化,则设置透视效果

属性名:perspective

作用:设置在z轴的视线焦点的观察位置,从而实现3D查看效果

属性值:像素值,数值越大 观察点距离z轴原点越远 图形效果越完整且接近原始尺寸

注意:透视属性需要设置给3D变化元素的父级

3D旋转

3D旋转比2D旋转更复杂 需要分别对三个方向的旋转角度值:

rotateX(angle) 定义沿着X轴的3D旋转rotateY(angle) 定义沿着Y轴的3D旋转rotateZ(angle) 定义沿着Z轴的3D旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D旋转</title> <style> * { margin: 0; padding: 0; } .box{ width: 450px; height: 300px; border: 1px solid black; margin: 150px auto; /* 透视(加在父元素上 ) */ perspective: 1000px; } .box img { transition: all .5s; } .box:hover img{ /* 沿着X轴旋转 */ /* transform: rotateX(30deg); */ /* 沿着Y轴旋转 */ transform: rotateY(30deg); /* 沿着Z轴旋转 */ /* transform: rotateZ(30deg); */ } </style> </head> <body> <div class="box"> <img src="images/1.jpg" alt=""> </div> </body> </html>
沿着Y轴的旋转

3D位移

类似的 位移也可以分为是哪个方向移动

属性值:

translateX(x) 设置X轴的位移值translateY(y) 设置Y轴的位移值translateZ(z) 定义3D位移,设置Z轴的位移值属性值为像素值或百分比 正负表示位移方向 正值向对应轴正方向移动 负值向对应轴的负方向移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D位移</title> <style> * { margin: 0; padding: 0; } .box{ width: 450px; height: 300px; border: 1px solid black; margin: 150px auto; /* 透视(加在父元素上 ) */ perspective: 1000px; } .box img { transition: all 1s; } .box:hover img{ /* transform: translateX(100px); */ /* transform: translateY(100px); */ /* transform: translateZ(100px); */ /* transform: translateZ(200px) rotate(360deg); */ /* transform: rotate(360deg) translateX(200px); */ /* transform: translateX(200px) rotate(360deg) ; */ transform: translateX(225px) rotateY(90deg) ; } </style> </head> <body> <div class="box"> <img src="images/1.jpg" alt=""> </div> </body> </html>
X轴和Y轴方向上的位移效果

3D正方体

transform-style属性 用于设置被嵌套的子元素在父元素的3D空间中显示,子元素会保留自己的3D转换坐标轴,这样才会让正方体的每一个面都在3D空间内转换,做成3D效果

属性值:

flat:所有子元素在2D平面内呈现

preserve-3D:保留3D空间

3D元素构建是指某个图形是由对个元素构成的 可以给这些元素的父元素设置

transform-style:perserve-3d 来使其变成一个真正的3D图形

一般来说,该属性设置给3D变换图形的父元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D正方体</title> <style> .box { width: 200px; height: 200px; /* border: 1px solid #000; */ margin: 150px auto; } .stage { position: relative; transform-style: preserve-3d; perspective: 5000px; width: 200px; height: 200px; /* border: 1px solid #000; */ transition: all 4s; } .stage div { position: absolute; width: 200px; height: 200px; font: bold 80px/200px "arial"; text-align: center; } .stage div:nth-child(1){ background-color: rgba(255,0,0,.5); transform: translateZ(100px); } .stage div:nth-child(2){ background-color: rgba(0,255,0,.5); transform: rotateX(90deg) translateZ(100px); } .stage div:nth-child(3){ background-color: rgba(0,0,255,.5); transform: rotateY(90deg) translateZ(100px); } .stage div:nth-child(4){ background-color: rgba(255,255,0,.5); transform: rotateX(90deg) translateZ(-100px); } .stage div:nth-child(5){ background-color: rgba(255,0,255,.5); transform: rotateY(90deg) translateZ(-100px); } .stage div:nth-child(6){ background-color: rgba(0,255,255,.5); transform:translateZ(-100px); } .stage:hover { transform: rotateX(360deg) rotateY(360deg); } </style> </head> <body> <div class="box"> <div class="stage"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> </body> </html>

CSS3 动画

动画

CSS3中提供了自己的动画制作方法,这可以在许多网页中取代动画片、Flash动画以及JavaScript

CSS3动画制作分为两步:创建动画、绑定动画

创建动画

@keyframes规则

@keyframes规则用于创建动画

在@keyframes中规定某项CSS样式,就能创建由从一种样式逐渐变化为另外一种样式的效果

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

需要使用百分比来规定变化发生的时间,或用关键字"form"和"to",等同于0%和100%

0%是动画开始 100%是动画完成

书写方法

@keyframes 动画名称 {

动画过程,可以添加任意百分比处的动画细节

}

绑定动画

animation属性

需要将@keyframes 中创建的动画捆绑到某个选择器 否则不会产生动画效果

animation属性用于对动画效果进行捆绑

animation: 动画名称 过渡时间 速度曲线 动画次数 延迟时间;

animation-name 规定@keyframes 动画名称

animation-duration 规定动画完成一个周期所花费的秒或毫秒 默认是0

animation-timing-function 规定动画速度曲线 默认是"ease"

annimation-delay 规定动画何时开始 默认是0

animation-iteration-count; 规定动画被播放的次数 默认是1 infinity表示无限次播放

其中必须设置动画名称和过渡时间 其他属性值可以根据需求设置

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3动画</title> <style> * { margin: 0; padding: 0; } .box { width: 100px; height: 100px; border-radius: 50%; margin: 20px auto; background-color: pink; animation: move2 1s infinite; } @keyframes move1 { /* 从头开始,最好保持跟默认样式和状态一致 */ from { transform:translate(0) } to { transform:translate(150px); } } /* 百分比定义动画细节 */ @keyframes move2 { /* 从头开始,最好保持跟默认样式和状态一致 */ 0% { transform:translateY(0) } 50% { transform:translateY(150px); } 100% { transform:translateY(0) } } </style> </head> <body> <div class="box"></div> </body> </html>

目录: