CSS3动画和JS动画有什么区别
1、js实现的是帧动画
2、css实现的是补间动画
帧动画：使用定时器，每隔一段时间，更改当前的元素
补间动画：过渡（加过渡只要状态发生改变产生动画）动画(多个节点来控制动画)性能会更好
CSS3 转换：
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
您可以使用 2D 或 3D 转换来转换您的元素。
一、transform：
2D 转换方法：子属性：translate()、rotate()、scale()、skew()
1.translate(x,y);偏移
a)： translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。
b)： translateX(x)仅水平方向移动（X轴移动）。
c)： translateY(y)仅垂直方向移动（Y轴移动）。
2.rotate(ndeg):旋转n为数字
3.scale(x,y) 缩放 让元素根据中心原点对对象进行缩放 x,y表示倍数
a)： scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。
注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
b)： scaleX(x)元素仅水平方向缩放（X轴缩放）。
c)： scaleY(y)元素仅垂直方向缩放（Y轴缩放）。
4.skew(xdeg,ydeg) 倾斜变形
a)：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）。
第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
b)： skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）。
c)： skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。
transition特性
1、需要具体数值，不能用block,none等
2、transition需用事件触发【比如加个hover伪类】，不能在网页加载时自动发生
3、一次性，不能重复发生，除非一再触发
4、只有两个状态：开始和结束状态
5、一条transition规则只能定义一个属性
二、原点 transform-origin(x,y) x，y可以用百分比来表示 表示原点的横向距离和纵向距离
在没有重置transform-origin改变元素原点位置的情况下，
CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
我们可以通过transform-origin来对元素进行原点位置改变
例： transform-origin: 0 0; 以左上角为原点
50% 0; 以上中为原点
100% 以右中为原点
二、transtion:过渡动画：
transition属性是一个复合属性，主要包括以下几个子属性：
transition-property：指定过渡或动态模拟的CSS属性。
所有的css属性用all
transition-duration：指定完成过渡所需的时间。
单位是s秒或者ms毫秒
transition-timing-function：指定过渡函数。
ease:由快到慢
linear:匀速
ease-in:加速
ease-out:减速
ease-in-out:先加速再减速
transition-delay：指定开始出现的延迟时间。
单位是s秒或者ms毫秒。
transtion:要改变的属性或all 时间;
例如：transtion:width 2s;
transtion:all 3s
例子：
<body>
<div class="box"></div>
</body>
<style>
.box {
height: 100px;
width: 100px;
background-color: lightpink;
transition: width 1s 0.5s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
如果把transition: width 1s 0.5s ease-in-out;放在hover上会发生什么
.box:hover {
width: 200px;
transition: width 1s 0.5s ease-in-out;
}
其实写在hover上也是可以的，但是当我移出元素后，元素宽度立马恢复，
而没有过渡！原因很简单，你transistion只写在hover上，也就是说只有
鼠标移上去的时候，该伪类才生效
三、@keyframes介绍：
keyframes被称为关键帧，。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果
在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
第一步：在css样式中，先定义动画样式
@keyframes 动画名{
from{ css样式}
to{ css样式 }
}
或者使用百分号
@keyframes 动画名 {
0%{
left: 0;
top: 0;
}
30%{
left: 800px;
top:0;
border-radius: 50%;
}
60%{
left: 800px;
top:400px;
background-color: red;
border-radius: 50%;
transform: scale(.5);
}
90%{
left: 0;
top:400px;
background-color: green;
border-radius: 50%;
}
100%{
left: 0;
top: 0;
}
}
第二步：使用animation应用动画
animation:动画名
四、animation：
组合写法（简写）：animation: myfirst 5s linear 2s infinite alternate both;
animation常用属性：
1、调用动画 animation-name: 主要是用来调用 @keyframes 定义好的动画名
2、设置动画播放时间 animation-duration: 单位：s
3、置动画时间外属性 animation-fill-mode:
none: 默认值，表示动画将按预期进行和结束，在动画完其最后一帧时，动画会反转到初始帧处
forwards: 表示动画结束后继续应用最后的关键帧的位置
backwards: 会在向元素应用动画样式时迅速应用动画的初始帧
both: 元素动画同时具有forwords和backwards效果
4、设置动画播放方式 animation-timing-function: ease(由快到慢）/ linear(匀速) / ease-in(加速) / ease-out(减速) ease-in-out(先加速再减速)
5、设置动画播放之前等待的时间 animation-delay: 单位：s
6、设置动画播放次数 animation-iteration-count: 通常设置为整数, 默认值为1; 取值为infinite，动画将会无限次的播放
7、设置动画播放方向 animation-direction: normal是默认值,动画的每次循环都是向前播放;另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放
8、设置动画的播放状态 animation-play-state: paused将正在播放的动画停下来; running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放
animation能解决以下问题
1、transition需用事件触发【比如加个hover伪类】，不能在网页加载时自动发生
2、一次性，不能重复发生，除非一再触发
3、只有两个状态：开始和结束状态
4、一条transition规则只能定义一个属性
五、animation和关键帧配合使用【@keyframes】
还是来看一个例子：
<body>
<div class="box"></div>
</body>
.box {
height: 200px;
width: 200px;
animation: 3s type forwards alternate infinite;
animation-play-state: running;
}
.box:hover {
animation-play-state: paused;
}
@keyframes type {
from {
background: yellowgreen
}
50% {
background: yellow
}
to {
background: aquamarine
}
}
当鼠标移入的时候暂停变换颜色，移出的时候继续变换颜色。
六、3D转换
设置在父元素的属性
transform-style:preserve-3d; // 把元素转换为3D
preserve-origin: 50% 50%; // 类比眼睛所在的方位
preserve: 400; // 单位px 井深
1939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
