Html基本的动画效果（平移，旋转）
在HTML中我们可以⾃⼰制作⼀些有趣的动态动画放⼊页⾯，也可以给⽤户体验增加⼀点趣味，所以合理的利⽤css动画效果。
动画                                                1.位置：位移 translate（x，y）；
2.⼤⼩：缩放 scale（xx px）；
1、转化：改变元素的            3.状态：旋转 rotate（xx deg）；
4.形态：skew（xx deg）；
2、转化属性：css转化属性 transform : none 不转换/ transform-function；转化函数如 transform:translate位移(170px);
3、转换原点： transform-origin：如 transform-origin: 50% 50%；
取值：
数值：以元素左上⽅的点为(0,0)，再去计算其他点
百分⽐:
0% , 0% : 左上⽅的点
50% ， 50% ：元素的中⼼点
关键字:
left
right
top
bottom
center
left top : 表⽰左上⽅
transform-origin赋值：
⼀个值：x轴的移动
两个值：x轴和y轴
三个值：x轴，y轴，z轴
1. 过度
2. 动画
3. css样式
2、2D转换 -位移translate
位移：位置移动
从当前元素的位置处，移动到指定坐标轴位置处
函数：
translate(x,y)
translate(value);
去负值
x ：正向右移动
负向左移动
y : 正向下移动
负向上移动
单⽅向位移：
translateX(x)
translateY(y)
如：匀速360logo的平移样式与各种速度样式的对⽐图
ease：默认模式“慢快慢”；
linear：匀速
ease-in：由慢到快“加速”
ease-out：由快到慢“减速”
ease-in-out：（开始）很慢-快-变慢-很慢（结束）
background-position 属性能够定位到你需要的图标    x横轴正数向左边负数向右； y轴正数为下负数为上px为单位animation  ：定义的动画名持续时间运动⽅式延迟时间次数；
3、2D转换 - 缩放
缩放：改变元素⼤⼩
函数：scale(value)
scale(x,y)
取值：
默认值 1
缩⼩：0 - 1 之间的⼩数
放⼤：⼤于1
scaleX(x) : 横向缩放
scaleY(y) : 纵向缩放
下图为⾳乐播放的正在播放图标⼀个（注意后⾯的延迟⽐前⾯的时间长，前⾯的时间播放长但是延时短）
4、2D转换 - 旋转
围绕着指定点，按照指定的⾓度发⽣的旋转
函数：rotate(deg)
取值：deg 为⾓度 0-360
默认为顺时针旋转
deg取值为负的话，则将逆时针旋转
5、2D转换 - 倾斜
函数：skew()
取值：为⾓度
skewX(x)
skewY(y)
下图是⼀个加载图标：
6、3D转换
属性:
perspective : 设置假定⼈眼到投影平⾯的距离
只影响3D元素，不影响2D元素
设置位置：加在⽗元素上，设置好后，其⼦元素就可以完成3D的转换。
1、3d位移
改变元素在z轴上的位置
属性：transform:用html和css制作百度页面
函数：translateZ(z);
translate3d(x,y,z);
2、3d旋转
属性：transform
函数：
rotateY(deg);
rotateZ(deg)
rotate3d(x,y,z,deg);
x,y,z : 取值为 1，0，-1
rotate3d(-1,0,1,45deg);
****************************************************
1、过渡
1、什么是过渡
元素从⼀个【状态】到另外⼀个【状态】的【平滑变换】【过程】
2、过渡属性
transition
3、过渡4要素(⼦属性)
1、过渡属性
元素的哪个【状态】发⽣变化时要使⽤过渡的效果
当指定的属性发⽣改变时，就会触发过渡效果
语法：
transition-property:none | all | property
transition-property:background;
transition-property:all;
2、过渡时间
整个过渡效果在多长时间内完成，以秒(s)或毫秒(ms)为单位
语法：
transition-duration: s|ms;
transition-duration:1s;
注意：
过渡时间默认为 0 ，如果为0时，则没有过渡的效果产⽣。
如果想看到过渡效果，则必须设置该属性。
3、过渡函数
指定时间内(transition-duration)过渡的速度效果。
语法：
transition-timing-function
取值：
ease : 默认值，慢速开始，速度变快，慢速结束
linear：匀速开始到结束
ease-in：慢速开始，加速效果(由慢到快)
ease-out：慢速结束，减速效果(由快到慢)
ease-in-out：以慢速开始和结束，先加速再减速
4、过渡延迟
当过渡操作被激发后，等待多长时间后才开始执⾏效果
语法：transition-delay
以秒或毫秒作为单位
5、统⼀设置过渡效果
属性：
transition:
⽤于设置四个过渡⼦属性
transition:transition-property transition-duration transition-timing-function transition-delay; transition:prop dura timing delay;
4、触发过渡
过渡效果由⽤户的⾏为进⾏触发(点击、⿏标悬停)
4、多个过渡效果
transition-property:prop1,prop2;
transition-duration:t1,t2;
transition-timing-function:fun1,fun2;
transition-delay:delay1,delay2;
2、动画
1、什么是动画
将元素的多个状态放在⼀起进⾏运⾏(多个状态间的转换)
过渡：实现简单的动态效果
动画：实现复杂的动态效果
注意：浏览器兼容性
Chrome 和 Safari : -webkit-
Firefox : -moz-
Opera : -o-
实现动画的步骤:
1、声明动画
@keyframes
声明整个动画过程中的不同状态都是什么
2、调⽤动画
通过 animation 属性调⽤已声明动画
2、关键帧
语法：@keyframes 规则声明动画
<style>
@keyframes 动画名称{
/*定义关键帧即不同时间点上的动画状态*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。