过渡
过渡： 属于动画的一种。 【补间动画】
帧动画
补间动画
:hvoer
☞ 属性介绍：transition
1.transition-property: 设置属性以动画效果执行。 all | 具体的属性
2.transition-duration: 设置动画执行时间 例如： 2s 3s。。。。
3.transition-delay: 设置动画延时执行的时间
4.transition-timing-function： 设置动画速度类型 ease | linear | ease-in | ease-out | ease-in-out
☞ 总结：
1. 在动画效果中，开始状态中的属性一定要与结束状态中的属性一一对应。
2. transition 的合写方式：
例如： transition: all 2s linear 5s;
或者分步执行动画效果：
transition: width 1s linear,
height 1s linear 1s,
background-color 1s linear 2s;
transition 可以放到开始状态中也可以放到结束状态中。
渐变
渐变使用的属性就是 background-image。
线性渐变
.line {
height: 100px;
/*线性渐变语法*/
background-image: linear-gradient(
/*渐变的方向 ： to + 方位名称（left| right| top| bottom）*/
to right,
/*设置渐变的开始颜色*/
red,
/*设置渐变的结束颜色*/
blue
);
}
如果想从左上角或者其他方向 可以使用角度(deg角度单位)
如果不想要渐变的混合色 给颜色加百分比
.right {
background-image: linear-gradient(red, red 33.33%,blue 33.33%,blue 66.66%, pink 66.66%, pink);
}
径向渐变
background-image: radial-gradient(
/*100px代表半径
center 代表圆心点位置*/
100px at center,
red,
blue
);
重复径向渐变
background: repeating-radial-gradient(red, yellow 10%, green 15%);
2D转换
1. 位移【让元素移动位置】 transform: translate(值);
2. 缩放【放大缩小】 transform:scale(值)
3. 旋转 【转圈】 transform: rotate(角度的单位值)
倾斜 transform:skew(角度的单位值[deg])
☞ 位移
1. transfrom: translateX(值); 正数代表向右移动，负数代表向左移动
2. transform:translateY(值); 正数代表向下移动，负数代表向上移动
3. transform:transalteZ(值)； 正数代表朝向我们自己移动，负数代表背向移动
☞ 旋转
1. transform: rotateX(值deg)；
2. transform: rotateY(值deg);
3. transform: rotateZ(值deg);
左手法则
☞ 缩放
1. transform: scaleX(2)
2. transform: scaleY(2)
注意:参数是倍数
☞ 转换为立体效果：
transform-style: preserve-3d;
动画
☞ 与过度的区别：
1. 过度动画行为需要有用户的操作过程（鼠标悬停，点击按钮动作【js】。。。。）
2. 今天的动画animation不需要用户的操作
☞ 语法：
@keyframes 自定义动画名称 { from { } to { } }
2. 通过动画名称调用动画集
animation-name： 动画集名称。
3. 属性介绍：
/* 1. 通过动画集名称调用动画 */
animation-name: box_move;
/* 2.设置动画执行时间 */
animation-duration: 1s;
/* 3. 动画默认执行次数是1次, infinite: 无限次 */
animation-iteration-count: infinite;
/* 4. 设置动画的速度类型: ease ; */
animation-timing-function: linear;
/* 5. 设置延时执行时间 */
animation-delay: 2s;
/* 6. 设置动画逆播【动画怎么正着播放，倒着播放的时候也是一样的效果】 normal*/
animation-direction: alternate;
/* 7. 设置动画执行完后的一个状态: 让动画停在结束时候的状态 */
animation-fill-mode: forwards;
/* 8。 动画播放状态设置： running | paused暂停 */
animation-play-state: paused;
4. animation复合写法：
例如： animation: box_move 1s linear 2s alternate forwards;
animation: name duration timing-function delay iteration-count direction fill-mode;
//动画的名字 执行时间 动画速度 延时执行时间 执行次数 动画逆播 执行完后的状态
注意：
1. 一个元素可以同时调用多个动画集，使用逗号隔开。
例如：
.box { animation: box_move 1s, one 1s linear 1s, three 2s ease 5s alternate; // 2. 可以将一个完整的动画分割成若干个阶段执行 @keyframes one { 0% {} 10% {} 20% {} ... 100%{} }
<style> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite alternate; -webkit-animation: mymove 5s infinite alternate; /*Safari and Chrome*/ } @keyframes mymove { from { left: 0px; } to { left: 200px; } } @-webkit-keyframes mymove { from { left: 0px; } to { left: 200px; } } </style> </head> <body> <p><strong>注释：</strong>IE9 以及更早的版本不支持 animation 属性。</p> <div></div>
注意：
百分比是相对整个动画执行时间而设置的。