共计 2197 个字符，预计需要花费 6 分钟才能阅读完成。
transition 过渡
transform 2D，3D
挪动盒子的地位：定位 盒子的外边距 2d 转换挪动
一、2D
转换（transform）是 CSS3 中具备颠覆性的特色之一，能够实现元素的位移，旋转，缩放等成果
旋转：rotate 挪动：translate
缩放：scale
1. 挪动：translate（可跟 px，%）(对行内元素是有效的比方 span)
% 是盒子本身的宽高度
语法：transform:translate(x,y); 合在一起写（上面是离开写）transform:translateX(n);
transform:translateY(n);
2. 旋转 rotateo
语法：transform:rotate(度数（deg）);
重点
1.rotate 外面跟度数，单位 deg 比方 rotate(45deg)
2. 角度为正时，顺时针，负时，为逆时针
3. 默认旋转的中心点是元素的中心点
2.1. 设置转换中心点 transform-origin
语法：transform-origin:(x,y)
重点：1. 留神前面的参数 x 和 y 用空格隔开
2.x y 默认转换的中心点是元素的中心点（50% 50%）3. 还能够给 x y 设置像素或者方位名词（top bottom left right center）3. 缩放：scale
语法：transform:scale(x,y);
留神：1. 留神其中的 x 和 y 用逗号分隔
2.transform:acale(1,1)：宽和高都放大一倍，绝对于没有放大
3.transform:acale(2,2)：宽和高都放大了 2 倍
4.transform:acale(2)：只写了一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
5.transform:acale(0.5,0.5)：放大
6.scale 缩放最大的劣势：能够设置转换中心点缩放，默认以中心点缩放的，而且不影响其余盒子
综合写法
位移要放在最后面
transform:translate(10px,10px) rotate(180deg) scale(1.2) ;
动画 animation
制作动画应用步骤
一. 先定义动画
二. 在应用（调用）动画
1. 先定义动画 - 应用 keyframes 定义动画（相似定义类选择器）@keyframes 动画名称 {0%{}
100%{}}
动画序列：1.0% 是动画的开始，100% 是动画的完结，这样的规定就是动画序列
2. 在 @keyframes 中规定某项 css 款式，就能创立由以后款式逐步改为新款式的动画成果
3. 动画是使元素从一种款式逐步变动为另一种款式的成果，您能够扭转任意多的款式任意多的次数
4. 请用百分比来规定变动产生的工夫，或用关键词 "form" 和 "to"，等同于 0% 和 100%
二. 在应用（调用）动画
div{
width:150px;
height:150px;
background-color: pink;
调用动画
animation-name: 动画名称;
持续时间
animation-auration: 持续时间;
}
div{
width:150px;
height:150px;
background-color: pink;
/* 动画名称 */
animation-name:mycartoon;
/* 持续时间 */
animation-duration: 3s;
/* 静止曲线 linear 匀速 */
animation-timing-function: ease-in-out;
/* 何时开始 (1 秒后开始)*/
animation-delay: 1s;
/* 反复次数 iteration 反复的 conut 次数 infinite 有限 */
/*animation-iteration-count: infinite;*/
/* 是否反方向播放 默认 normal 如果想要反方向就写 alternate*/
/*animation-direction:alternate; */
/* 动画完结后的状态，默认是 backwards, 回到起始状态，咱们能够让他停留在完结状态 forwards*/
animation-fill-mode: forwards;
}
div:hover{
/* 鼠标通过 div 让这个 div 进行动画，鼠标来到就持续动画 */
animation-play-state:paused;
}
animation 简写
animation: 动画名称 持续时间 静止曲线 何时开始 播放次数 是否反方向 动画起始或者借完结状态 步数
animation:mycartoon 3s linear 0s infinite alternate forwards steps() ;
1. 简写属性外面不蕴含 animation-play-state
2. 暂停动画：animation-play-state:paused; 常常和鼠标通过等其余配合应用
3. 想要动画走回来，而不是间接跳回来 animation-direction:alternate;
4. 盒子动画完结后，停在完结地位：animation-fill-mode: forwards;
速度曲线
animation-timing-function: 规定动画的速度曲线，默认是 ease
值 形容
linear 动画从头到尾的速度是雷同的，匀速
ease 默认，动画以低速开始，而后放慢，在完结前变慢
ease-in 动画以低速开始
ease-out 动画以低速完结
ease-in-out 动画以低速开始和完结
steps() 指定了工夫函数中的时隔数量（步长）正文完