简述CSS3实现动画的方式 ？
参考回答
在CSS3中，实现动画的方式主要有两种：
@keyframes规则：用于定义动画的关键帧，通过设置不同时间点的样式来创建动画效果。transition属性：用于控制元素从一个状态平滑过渡到另一个状态，适合处理简单的动画。
详细讲解与拓展
1. 使用 @keyframes 实现动画
@keyframes 规则是CSS3中实现动画的核心。它允许你定义在动画的不同时间点（关键帧）元素的样式变化，从而实现复杂的动画效果。
基本语法：
@keyframes animation-name {
from {
/* 动画起始时的样式 */
}
to {
/* 动画结束时的样式 */
}
}
或者，可以使用多个中间关键帧来定义更精细的动画效果：
@keyframes animation-name {
0% {
/* 动画开始时的样式 */
}
50% {
/* 动画中间时的样式 */
}
100% {
/* 动画结束时的样式 */
}
}
应用动画：
div {
animation-name: animation-name;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
animation-name：指定动画的名称，通常引用已定义的@keyframes动画。animation-duration：指定动画的持续时间。animation-timing-function：定义动画的速度曲线。animation-iteration-count：设置动画的重复次数。
示例：
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
这个例子中，<div>会在水平方向上来回移动，创建一个滑动效果。
2. 使用 transition 实现动画
transition 适用于元素在状态变化时平滑过渡，比如在鼠标悬停时改变颜色、大小等。它与 @keyframes 不同，transition通常用于控制元素从一个状态到另一个状态的过渡，适用于简单的动画。
基本语法：
element {
transition: property duration timing-function delay;
}
property：指定需要过渡的CSS属性（如width,background-color等），或者使用all来表示所有可过渡的属性。duration：过渡的持续时间。timing-function：指定速度曲线。delay：指定过渡效果开始前的延迟时间。
示例：
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s ease-in-out;
}
div:hover {
width: 200px;
}
当鼠标悬停在 <div> 上时，元素的宽度会在2秒内平滑过渡到200px。
总结
@keyframes：适用于更复杂的动画效果，通过定义多个关键帧来控制动画在不同时间点的样式变化。适合需要多个步骤或复杂过渡的动画。transition：适用于简单的状态变化动画，如鼠标悬停时的平滑过渡，通常只涉及一个元素状态的变化。
两者可以根据不同的需求来选择，@keyframes 适用于更为动态的动画，而 transition 则适合较为简洁的动画效果。