在CSS3中，动画方向和填充模式是两个不同的概念，但它们都用于控制动画的行为。
一、动画方向（animationdirection）：
动画方向属性定义了动画是否应该轮流反向播放。这个属性有以下几个可能的值：
normal：默认值，动画正常播放。
reverse：动画从结束状态开始，反向播放到开始状态。
alternate：动画在奇数次播放时正常播放，偶数次播放时反向播放。
alternatereverse：与alternate相反，动画在奇数次播放时反向播放，偶数次播放时正常播放。
二、填充模式（animationfillmode）：
填充模式属性定义了在动画播放之前和之后元素的样式。这个属性也有几个可能的值：
none：默认值，动画播放前后，元素的样式不变。
forwards：当动画结束时，保持动画的结束样式。
backwards：在动画开始之前，应用动画的开始样式。
both：结合forwards和backwards的效果，在动画开始前和结束后都应用相应的样式。
三、示例代码：
下面是一个简单的例子，演示如何使用CSS3设置动画方向和填充模式：
```css
/*
定义动画
*/
@keyframes
myAnimation
{
from
{
/*
动画开始时的样式
*/
left:
0px;
backgroundcolor:
green;
}
to
{
/*
动画结束时的样式
*/
left:
200px;
backgroundcolor:
blue;
}
}
/*
应用动画
*/
div
{
width:
150px;
height:
200px;
position:
relative;
background:
red;
animationname:
myAnimation;
animationduration:
2s;
animationdirection:
alternate;
/*
设置动画方向为交替播放
*/
animationfillmode:
both;
/*
设置填充模式为前后都应用样式
*/
}
```
在这个例子中，`animationdirection`被设置为`alternate`，意味着动画会在每次播放时交替地正向和反向播放。同时，`animationfillmode`被设置为`both`，意味着在动画开始之前和结束后，元素都会应用动画的起始和结束样式。
请注意，为了使动画工作，你需要将动画的名称（`animationname`）、持续时间（`animationduration`）以及填充模式（`animationfillmode`）和方向（`animationdirection`）正确地应用到想要动画的元素上。
