一、动画
1.定义动画
@keyframes +自定义动画名字
0%-100% 就是动画的开始到结束 帧数 ——from to
@keyframes mybox {
0% {
width: 600px;
}
20% {
width: 50px;
}
30% {
width: 300px;
}
100% {
width: 1000px;
}
}
或者
@keyframes mybox {
from {
width: 600px;
}
20% {
width: 50px;
}
30% {
width: 300px;
}
to {
width: 1000px;
}
}
2.调用动画
animation: name duration timing-function iteration-count;
1.整合
animation: mybox 30s;
2.分解属性
/* animation-name:动画的名称 */
animation-name: mybox;
/* animation-duration 动画所需要时间 */
animation-duration: 8s;
/* 动画运动速率和我们的过渡的运动速率取值是一样的 */
/* ease 缓慢开始，陡然加速，再逐渐减速至结束
ease—in 缓慢开始，再逐渐加速至结束，最终突然停止
ease—out 缓慢开始，再逐渐减速至结束
ease—i-out 缓慢开始，然后加速，再减速至结束*/
animation-timing-function: ease-in-out;
/* 动画延迟 */
animation-delay: 5s;
/* 规定的动画播放次数 infinite为无限次播放*/
animation-iteration-count: 2;
/* 当想保留动画完成后最后一帧的状态 */
/* animation-fill-mode: forwards; */
/* backwards在动画显示之前的状态，就跟我们的延迟播放的效果一样*/
/* animation-fill-mode: backwards; */
animation-fill-mode: both;
二、动画属性
1.transition
常见：
ease 缓慢开始，陡然加速，再逐渐减速至结束(默认）
ease—in 缓慢开始，再逐渐加速至结束，最终突然停止
ease—out 缓慢开始，再逐渐减速至结束
ease—i-out 缓慢开始，然后加速，再减速至结束
linear 匀速
.ease:hover {}表示实现鼠标交互效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* ease 缓慢开始，陡然加速，再逐渐减速至结束 ease—in 缓慢开始，再逐渐加速至结束，最终突然停止 ease—out 缓慢开始，再逐渐减速至结束 ease—i-out 缓慢开始，然后加速，再减速至结束 linear 匀速*/ .ease { width: 200px; height: 20px; margin-bottom: 20px; background-color: aqua; /* transition: width 2s ease; */ /* 所有属性都过渡 */ transition: all 2s linear; position: absolute; left: 0; } .ease-in { width: 200px; height: 20px; margin-bottom: 20px; background-color: red; transition: width 2s ease-in; } .ease-out { width: 200px; height: 20px; margin-bottom: 20px; background-color: orange; transition: width 2s ease-out; } .ease-in-out { width: 200px; height: 20px; margin-bottom: 20px; background-color: pink; transition: width 2s ease-in-out; } .ease:hover { /* width: 600px; */ left: 200px; } .ease-in:hover { width: 600px; } .ease-out:hover { width: 600px; } .ease-in-out:hover { width: 600px; } </style></head><body> <div class="ease"></div> <div class="ease-in"></div> <div class="ease-out"></div> <div class="ease-in-out"></div></html>2.transform
1.移动——translate
.box {
width: 80px;
height: 80px;
background-color: pink;
/* 黑一个过渡，方便观察 */
transition: 3s;
/* translate 移动 */
/* translateX 沿着X移动 */
/* transform: translateX(300px); */
/* translateY 沿着Y移动 */
}
.box:hover {
/* translate 两个值斜对角移动 */
/* 只有一个值的时候是以X轴 */
transform: translate(300px,300px);
/* translateX 沿着X移动 */
/* transform: translateX(300px); */
/* translateY 沿着Y移动 */
}
2.旋转——rotate
.box {
width: 80px;
height: 80px;
background-color: pink;
/* 黑一个过渡，方便观察 */
transition: 3s;
/* 将盒子移动到浏览器中间 */
margin: 50px auto;
/* translate 移动 */
/* translateX 沿着X移动 */
/* transform: translateX(300px); */
/* translateY 沿着Y移动 */
}
/* 旋转 */
.box:hover {
/* 当写代码时要角度的时候角度单位是deg */
/* transform: rotate(45deg); */
/* 正值 顺时针，负值 逆时针 */
transform: rotate(-45deg);
/* transform: rotateX(45deg); */
}
3.旋转中心——transform-origin
.box {
width: 150px;
height: 150px;
background-color: skyblue;
/* 将盒子移动到浏览器中间 */
margin: 300px auto;
transform: rotate(45deg);
/* 旋转中心我们可以理解为变化原点 规定写在盒子属性中，而非交互效果中*/
/* transform-origin: -100% -100%; */
/* 或者 */
transform-origin: top left;
}
4.缩放——scale
.box:hover {
/* 缩放会依据盒子的宽高来进行缩放 */
/* 1，1 原来的宽高 */
/* 当你写一个值的时候同时放大你的宽高 */
/* 当值为负数，则会反向缩放 */
/* transform: scale(2,2); */
/* transform: scale(-2); */
/* 缩小是0-1 */
transform: scale(-0.5);
}
5.倾斜——skew
/* 倾斜 */
transform: skew(30deg);
transform: skew(30deg,10deg);
6.3d模式呈现
transform-style: preserve-3d;
注意给到父元素
<!DOCTYPE html><!-- 升级版旋转 --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { /* perspective 视距 */ /* 设置人和物体的距离——视距，规定要给到父元素 */ perspective: 3000px; /* transform-style: preserve-3d; */ } .box { width: 300px; height: 300px; background-color: skyblue; /* 将盒子移动到浏览器中间 */ margin: 100px auto; transition: 3s; /* 3d的呈现 规定给到父元素 */ transform-style: preserve-3d; } .son { width: 300px; height: 300px; background-color: red; /* 将盒子移动到浏览器中间 */ margin: 100px auto; transition: 3s; } .box:hover { transform: rotateY(45deg); } .son:hover { transform: rotateX(45deg); } </style></head><body> <div class="box"> <div class="son"></div> </div></body></html>三、整合案例
示例1：
<!-- 属性重叠对动画的影响 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { /* 100vw和100vh确保body元素的尺寸与浏览器窗口的尺寸完全一致，没有超出也没有不足。 */ width: 100vw; height: 100vh; background-color:black; display:flex; justify-content: center; align-items: center; } main { width: 400px; height: 400px; border: solid 1px white; } div { width: 100px; height: 100px; background-color: orangered; animation-name: hd,hd1,hd2; animation-duration: 4s,3s,4s; } @keyframes hd { 25% { transform: translateX(300px); } 50% { transform: translate(300px,300px); } 75% { transform: translateY(300px); } } @keyframes hd1 { 25% { background-color: orangered; } 50% { background-color: blue; } 75% { background-color: blueviolet; } } @keyframes hd2 { from,to { background-color: gray; } 25% { border-radius: 50%; } 50% { border-radius: 0%; } 75% { border-radius: 50%; } } </style></head><body> <main> <div></div> </main></body></html>示例2
<!-- 多动画控制移动端引导背景页 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { /* 100vw和100vh确保body元素的尺寸与浏览器窗口的尺寸完全一致，没有超出也没有不足。 */ background-color: #2c3e50; } main { width: 100vw; height: 100vh; background-color:#34495e; transform: scale(0); animation-name: hd,hd1,hd2; animation-duration: 2s,4s,1s; animation-fill-mode: forwards; display: flex; justify-content: center; align-items: center; } main::after { content: 'houdunren.com'; font-size: 2em; color: white; opacity: 0; animation-name: opacity; animation-duration: 2s; animation-delay: 4s; animation-fill-mode: forwards; } @keyframes opacity { to { opacity: .8; } } @keyframes hd { 25% { transform: scale(0.5); } 50% { transform: scale(1) rotate(360deg); } 75% { transform: scale(0.5); } to { transform: scale(0); } } @keyframes hd1 { 25% { background-color: orangered; } 50% { background-color: blue; } 75% { background-color: blueviolet; } to { background-color: greenyellow; } } @keyframes hd2 { 25% { border-radius: 50%; } 50% { border-radius: 0%; } 75% { border-radius: 50%; } /* to { border-radius: 0%; } */ } section { width: 100vw; height: 100vh; background-color:red; } </style></head><body> <main></main></body></html>