动画
CSS 动画是一种用于在网页中创建过渡效果和动态效果的技术。通过 CSS 动画，可以实现元素的平滑过渡、旋转、缩放、淡入淡出等效果，增强用户体验，并提高网站的吸引力。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<style>
/* CSS3 动画属性 */
/* animation: move(动画名称) 3s(花费时间) ease(运动曲线) 0s(何时开始) 1(播放次数) 是否反方向 */
/* 详见：https://www.runoob.com/css3/css3-animations.html */
div{
width:100px;
height:100px;
background:red;
animation: move 3s ease 0s; /* 指定动画的信息（引用使用关键帧声明的动画名称） */
}
/* 关键帧动画：用 @keyframes 声明 ，move 是动画名称 */
/* 两种动画状态 */
@keyframes move{
/* 从什么样式 */
from{
background:red;
}
/* 变成什么样式 */
to{
background:yellow;
}
}
img{
width:100px;
height:100px;
animation: heart 3s ease 0s; /* 指定动画的信息（引用使用关键帧声明的动画名称） */
}
/* 三种动画状态（用作让一张心脏图片放大后再缩小，模拟心跳） */
@keyframes heart{
/* 范围是 0%~100% */
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
</body>
</html>
