CSS3动画（2D，3D，自定义动画）
文章目录
- css3过渡动画
- 1 css3动画之2D
- 1.1 transition过渡动画基础
- 1.1.1 实现缓入缓出或快入快出效果
- 1.1.2 实现一秒内变换宽度
- 1.1.3 实现一秒后变换宽度
- 1.1.4 实现宽高一秒后同时变换
- 1.1.5 简便书写方式（all）
- 1.1.6 案例：盒子转换
- 1.2 过渡动画应用
- 1.3 transform（变形基础）
- 1.3 1) 变形过渡动画案例1
- 1.3 2) 变形过渡动画案例2（幸运转盘）
- 2 css3动画之3D
- 2.1 transform-origin（旋转中心控制点）
- 2.2 1) perspective 视距/透视/Z轴（设置从何处查看一个元素的角度）
- 2.2 2) perspective-origin（定义 3D 元素所基于的 X 轴和 Y 轴）
- 2.3 backface-visibility （定义当元素不面向屏幕时是否可见）
- 2.3 ) 案例：正反面切换
- 2.4 transform-style（使被转换的子元素保留其 3D 转换）
- 3 css3自定义动画
- 3.1 animation（动画）核心属性
- 3.2 @keyframes规则（配合animation）
- 3.1) 案例：太阳
- 3.2 clip（剪裁绝对定位元素/？或已废除不用）
css3过渡动画
CSS3收纳了网页的动画领域。
过渡动画的核心属性：transition
trans- through 过
transition 过的过程 -> 过渡
transform 形状上的过来过去->变型
transfer fer的意思是turn ->转移
transparent 父级的颜色透过来了->透明
可以配合伪类选择器:hover实现动画效果
兼容写法：
-webkit-transition:all 1s ease 0s;
-ms-transition:all 1s ease 0s;
-moz-transition:all 1s ease 0s;
-o-transition:all 1s ease 0s;
transition:all 1s ease 0s;
兼容(ie678)写法：
添加PIE.js插件
1 css3动画之2D
凡是属性值有可以转化成数字形式的属性，都可以发生过渡动画。例如：颜色、padding、width、background-position等。
在chrome下，甚至背景图都可以发生过渡动画。
1.1 transition过渡动画基础
transition:发生变化的属性名 动画时长 缓冲曲线 等待时间
transition-property 发生变化的属性名
transition-duration 动画时长
transition-timing-function 缓冲曲线
transition-delay 等待时间
/*整体样式*/<style>img{display:block;width: 100px;height: 100px;margin:20px;float: left;}</style><body><img src="data:images/艾伦.jpg"></body>
1.1.1 实现缓入缓出或快入快出效果
cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。
贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。
img{/*transition要在默认样式中加*/transition:width 1s cubic-bezier(0, 0.98, 0.91, 0.18) 0s;}img:hover{width:400px;}
效果图：
1.1.2 实现一秒内变换宽度
img{transition:height 1s ease 0s;}img:hover{width:400px;}
效果图：
1.1.3 实现一秒后变换宽度
img{transition:width 1s ease 1s;}img:hover{width:400px;}
效果图：
1.1.4 实现宽高一秒后同时变换
img{transition:width 1s ease 0s, height 1s ease 0s;}img:hover{width:300px;height:300px;}
效果图：
1.1.5 简便书写方式（all）
多个发生变化的属性，有一个简便的书写方式，就是用all表示所有发生变化的属性都产生过渡动画
transition:all 动画时长 缓冲曲线 等待时间
img{transition:all 1s ease 0s;/*多个发生变化的属性，有一个简便的书写方式，就是用all表示所有发生变化的属性都产生过渡动画*/}img:hover{width:300px;height:300px;}
效果图：
1.1.6 案例：盒子转换
源码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过渡动画基础</title><style>*{margin:0;padding:0}div{width:100px;height:100px;border:1px solid blue;background-color:green;padding:0;color:black;font-size:16px;text-align:center;/*兼容写法*/-webkit-transition:all 1s ease 0s;-ms-transition:all 1s ease 0s;-moz-transition:all 1s ease 0s;-o-transition:all 1s ease 0s;transition:all 1s ease 0s;}div:hover{width:300px;height:300px;border:20px solid green;background-color:blue;padding:50px;color:white;font-size:50px;border-radius:50%;}</style>
</head>
<body><div>过渡动画</div>
</body>
</html>
效果展示：
1.2 过渡动画应用
可以通过对背景图片的替换，实现更好的效果
<!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>html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}div{width:355px;height:355px;margin:100px auto;border:1px solid black;background-image:url(../images/dong.jpg);transition: all 1s ease 0s;}div:hover{background-image: url(../images/ailun.png);}</style>
</head>
<body><div></div>
</body>
</html>
效果图：
1.3 transform（变形基础）
transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
下面每个值都有 (x,y) 3d(x,y,z) X Y Z五种语法。
none 定义不进行转换。
rotate:定义 2D 旋转，在参数中规定角度。
skew:定义沿着 X 和 Y 轴的 2D 倾斜转换。
scale:定义 2D 缩放转换。
translate:定义 2D 平移转换。
旋转45度
transform: rotate(45deg);
斜切
transform: skew(10deg,10deg);
水平和竖直方向缩小一半
transform: scale(.5);
向左移动30px 向下移动30px
transform: translate(30px,30px);
先旋转45度 向x轴负方向移动30px
transform: rotate(45deg) translate(-30px,0);
先水平方向斜切10度 向x轴负方向移动30px
transform: skew(10deg,10deg) translate(-30px,0);
效果展示：
1.3 1) 变形过渡动画案例1
效果展示：
源码：
注意：这里我没有写浏览器兼容写法，测试用的是谷歌89版
<!doctype html>
<html><head><meta charset="utf-8"><title>CSS3动画平滑过渡效果</title><style>body { background:#000; width: 100%; font-family: 'Viga'; margin: 0; padding: 0;}div.container { width:1800px; margin: 10% auto;}h3 {color: #fff;text-align: center;text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);}ul {list-style: none;}li {float: left;margin: 30px;}.img {width: 300px;height: 300px;border: 10px solid #fff;border-radius: 15px;overflow: hidden;}.img:hover {cursor: pointer;}.morph {transition: all 1s ease;}.morph:hover {border: 10px solid #fff;border-radius: 50%;box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), inset 0 0 40px rgba(255, 255, 255, 1);}.zoom img {width: 300px;height: 300px;transition: all 2s ease;}.zoom img:hover {width: 400px;height: 400px;}.zoom:hover {box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), inset 0 0 40px rgba(255, 255, 255, 1);}.tilt {transition: all 0.3s ease;}.tilt:hover {transform: rotate(10deg);box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), inset 0 0 40px rgba(255, 255, 255, 1);}.color {transition: all 1s ease;}.color:hover {filter: grayscale(100%);box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), inset 0 0 40px rgba(255, 255, 255, 1);}</style>
</head><body><div class="container"><ul><li><h3>ONE</h3><!--变圆--><div class="morph img"><img src="data:images/21.jpg" /></div></li><li><h3>TWO</h3><!--放大--><div class="zoom img"><img src="data:images/22.jpg" /></div></li><li><h3>THREE</h3><!--倾斜--><div class="tilt img"><img src="data:images/23.jpg" /></div></li><li><h3>FOUR</h3><!--变灰--><div class="color img"><img src="data:images/24.jpg" /></div></li></ul></div></body></html>
1.3 2) 变形过渡动画案例2（幸运转盘）
可以实现随机转到什么位置出现相应提示。
效果展示：
源码：
<!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>html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}div#turntable-wrapper{width:650px;height:600px;background-image: url(../images/38/turntable-bg.jpg);position: relative;margin:10px auto}div#turntable-wrapper .turntable{position:absolute;left:116px;top:59px;transition: all 3s ease 0s;transform: rotate(0deg);}div#turntable-wrapper #pointer{position: absolute;left:255px;top:155px;cursor: pointer;/*鼠标移动上去出现手指*/}</style><script>window.onload=function(){var pointer = document.getElementById("pointer")var turntable= document.getElementById("turntable")var click_count = 0 var timer;pointer.onclick=function(){console.log(11111111111111111111)click_count++//抽中奖品提示var gifts = ["未中奖","免单4999元","免单50元","免单10元","免单5元","免费分期服务费","提高白条额度"]//度数var degrees = [0,56,108,160,208,260,308]//从下标0-6之间随机抽取一个数 0.2var gifts_index = Math.floor(Math.random()*7)var degrees_index= gifts_index //要转到的度数console.log(3*360*click_count+degrees[degrees_index])turntable.style.transform = "rotate("+(3*360*click_count+degrees[degrees_index])+"deg)";//3秒后弹出中奖信息clearTimeout(timer)timer=setTimeout(function(){alert(gifts[gifts_index])},3000)} }</script></head>
<body><div id="turntable-wrapper"><img src="../images/38/turntable.png" class="turntable" id="turntable" alt=""><img src="../images/38/pointer.png" id="pointer" alt=""></div>
</body>
</html>
2 css3动画之3D
2.1 transform-origin（旋转中心控制点）
transform-origin:设置旋转元素的中心点位置
2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
效果展示：
源码：css部分
div{width:400px;height:400px;margin:100px auto;border: 1px solid red;}div img{/* 1 默认 *//* transform-origin: 50% 50%; *//* 2 让绕着左下角旋转 *//* transform-origin: left bottom; *//* transform-origin: 0 250px; *//* transform-origin:0 100%; *//* 3 随意定义旋转中心点 */transform-origin: 200px 200px;transition: all 1s ease 0s; }div:hover img{transform:rotate(360deg);}
2.2 1) perspective 视距/透视/Z轴（设置从何处查看一个元素的角度）
perspective：设置从何处查看一个元素的角度（Z轴从上往下看）
perspective属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
以下皆设置有：perspective:500px;
默认旋转轴向
transform: rotate(45deg);
沿着Z轴进行旋转
transform:rotateZ(45deg) ;
沿着X进行旋转
transform:rotateX(45deg) ;
沿着Y轴进行旋转
transform: rotateY(45deg);
依次效果图如下：
2.2 2) perspective-origin（定义 3D 元素所基于的 X 轴和 Y 轴）
perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。（从左右看）
perspective-origin: px | % 表示人的眼睛看的是哪一点。(默认值是center center。)
当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。
注释：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。
2.3 backface-visibility （定义当元素不面向屏幕时是否可见）
backface-visibility 属性定义当元素不面向屏幕时是否可见。
backface-visibility: hidden/visible; /* 0-90deg 可见 90deg-180 不可见 */
visible 背面是可见的。
hidden 背面是不可见的。
2.3 ) 案例：正反面切换
源码：
<style>div{width:300px;height:400px;margin:100px auto;border:3px solid orange;position: relative;perspective: 500px;}div img{position:absolute;left:0;top:0;transition: all 1s ease 0s;}/* 旋转180deg 设置背面不可见 */div img:nth-of-type(1){transform: rotateY(180deg);backface-visibility: hidden;}div img:nth-of-type(2){backface-visibility: hidden;}/* 从0deg - 180deg */div:hover img:nth-of-type(2){transform: rotateY(180deg);}/* 从180deg - 360deg */div:hover img:nth-of-type(1){transform: rotateY(360deg);}</style>
///
<body><div><!-- 第一张图放背面 旋转180deg 设置背面不可见 --><img src="../images/42/backface.jpg" alt=""><!-- 第二张图放正面 --><img src="../images/42/foreface.jpg" alt=""></div>
</body>
效果展示：
2.4 transform-style（使被转换的子元素保留其 3D 转换）
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
transform-style: flat|preserve-3d;
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。
注释：该属性必须与 transform 属性一同使用。
3 css3自定义动画
3.1 animation（动画）核心属性
animation 属性是一个简写属性，用于设置八个动画属性：
animation-name 规定需要绑定到选择器的 keyframe（关键帧） 名称。（自己命名的）
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。默认值为 0，意味着没有动画效果。
animation-timing-function 规定动画的速度曲线。
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay 规定在动画开始之前的延迟，以秒或毫秒计。默认值为0。
animation-iteration-count 规定动画应该播放的次数。
n 一个数字，定义应该播放多少次动画。
infinite 指定动画应该播放无限次（永远）。
animation-direction 规定是否应该轮流反向播放动画。
normal 默认值。动画按正常播放。 测试 »
reverse 动画反向播放。 测试 »
alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 测试 »
alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。
这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
animation-play-state 指定动画是否正在运行或已暂停。
paused 指定暂停动画 测试 »
running 指定正在运行的动画
后三个属性共有的值。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
写法:
|
animation: name duration timing-function delay iteration-count direction fill-mode play-state; animation:自定义动画名称 动画时长 缓冲曲线 等待时间 是否停留在终点(forwards) 播放次数（infinite表示无数次播放） 是否交替运动（alternate） 是否暂停(paused); |
默认：animation:none 0 ease 0 1 normal
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
使用案例：
从左到有移动(一次)
animation:gogo 2s ease 0s;
从左到右移动(一次) 停到终点
animation:gogo 2s ease 0s forwards;
从左到右移动(一次) 延迟2s再开始 停到终点
animation:gogo 2s ease 2s forwards;
从左到右移动(三次) 马上开始 停到终点
animation:gogo 2s ease 0s forwards 3;
从左到右移动(n次) 马上开始
animation:gogo 2s ease 0s infinite;
从左到右移动(n次) 交替运动
animation:gogo 2s ease 0s infinite alternate;
从左到右移动(n次) 交替运动 暂停
animation:gogo 2s ease 0s infinite alternate paused;
/* @keyframes gogo{from{left:10px;}to{left:1000px;}} */@keyframes gogo{0%{/* 起始位置 */left:100px;}40%{ /* 度过40%的时间 */left:250px}100%{ /* 结束位置 */left:500px}}
3.2 @keyframes规则（配合animation）
使用@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。
注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。
为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
写法：
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需的。定义animation的名称。keyframes-selector 必需的。动画持续时间的百分比。
合法值：0-100%
from (和0%相同)
to (和100%相同)
注意： 您可以用一个动画keyframes-selectors。css-styles 必需的。一个或多个合法的CSS样式属性
3.1) 案例：太阳
源码：
<!doctype html>
<html><head><meta charset="utf-8"><title>发光的太阳</title><style type="text/css">span {font-size: 26px;color: #FFF;text-align: center;display: block;width: 280px;height: 280px;line-height: 280px;margin: 200px;background-image: linear-gradient(to bottom, rgb(247, 212, 53), rgb(224, 173, 30) 60%, rgb(161, 21, 21));border-radius: 150px;animation: faguang 1s linear 0s infinite alternate;}@keyframes faguang {from {box-shadow: 0px 0px 10px 10px purple;}to {box-shadow: 0px 0px 150px 72px red;}}</style>
</head><body><span>发光的太阳</span>
</body></html>
3.2 clip（剪裁绝对定位元素/？或已废除不用）
MDN提示：
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
建议使用 clip-path 。
clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？“clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
说明：
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
用法：
clip:rect(上,右,下,左);
img{position:absolute;clip:rect(0px,60px,200px,0px);}
CSS3动画（2D，3D，自定义动画）相关推荐
- 前端 css3动画2D|3D
css3动画&2D|3D 一.css3的transform属性 2d坐标轴(图示) x轴:水平,向右为正,向左为负 y轴:垂直,向下为正,向上为负 2d转换的方法 1.2D变形:平移.旋转.缩 ...
- 纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
- CSS3 2 2D 3D转换
CSS3 2 2D 3D转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 转换是使元素改变形状.尺寸和位置的一种效果,使用 2D或 3D 转换来转换元素. 1浏览器支持 I ...
- jQuery动画（jQuery预制动画，jQuery自定义动画，jQuery停止动画和延迟动画）
目录 jQuery预制动画 显示隐藏动画 上拉下拉动画(高度动画) 淡入淡出动画(透明度动画) jQuery自定义动画 jQuery停止动画和延迟动画等 jQuery预制动画 jquery的预制动画 ...
- php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程 这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构 该3D星空特效只使用一个 元素 ...
- [HTML/CSS]动画效果以及自定义动画效果
一,实现div或者文字的当鼠标浮于其上时的动画效果: 1,transition加在div中,实现动画效果的过渡效果,transition: all 3s;其中all表示所有样式都参与过渡,3s表示实现 ...
- 哪个计算机软件可以编辑动画文字,3d文字动画制作软件 3d动画字制作教程
在网络上时常看到各种加了技术特效的3d动态文字,要多炫有多炫,超漂亮,应该是牛人才能做出来的吧,许多喜欢设计的普通用户只有望洋兴叹的份了.其实不然,你也可以不需要掌握专业技巧,就能快速制作出专业品质的 ...
- jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出
jquery动画效果 今天给大家介绍一下jQuery当中的几种动画效果. . animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡 ...
- CSS3动画(2D/3D转换、过渡、动画和多列)
[index.html] <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- Unity 程序动画 2D,3D程序蜘蛛脚,人物程序性动画
强大的程序腿效果 程序脚完全使用算法完成,没有复杂的物理运算 3D蜘蛛脚算法 public class SpiderProceduralAnimation : MonoBehaviour{public ...
最新文章
- java程序猿必读的学习书籍，良心推荐!
- 深度排序模型在淘宝直播的演进与应用
- DNS之一：编译安装
- c# 访问hbase_C#教程之通过Thrift实现C#与Hbase交流
- 大数据生态及其技术栈
- 利用Vagrant and VirtualBox搭建core os环境
- 服务器安装红帽系统进入不图形界面,CentOS 安装图形化界面方法
- Python中的元类及元类实现的单例模式
- javascript 图表_我如何使用JavaScript数据透视表和图表库分析开发人员趋势
- asio c++20 协程在windows下和linux下设定
- 专访华为杨海松：立足合作伙伴价值，构建健康HarmonyOS生态
- 什么是Dropthings
- 矩阵分解之奇异值分解
- 就地升级Lync Server 到Skype for Business Server
- unity3D用鼠标和射线控制物体移动（二）
- 吹气球 Burst Balloons
- QT中的explicit关键字的意思
- 如何在OUTLOOK签名中自动加入日期
- Meta今年不再招人！小扎还说跳槽越多越好
- CIO烦恼之七：企业文化僵化，系统思想难以贯彻