在CSS中，我们可以使用animation属性来创建动画效果。其中，animation-duration属性用于控制动画的持续时间，animation-timing-function属性用于控制动画的周期。
animation-duration属性用于设置动画的持续时间，单位为秒（s）或毫秒（ms），默认值为0s。可以将它设置为任何正数值。
.element {
animation-duration: 2s; /* 动画持续2秒钟 */
}
在上面的代码块中，我们将动画的持续时间设置为2秒钟。这意味着动画将在2秒钟内完成。
animation-timing-function属性用于设置动画的周期。它决定了动画在不同时间点的速度变化方式。
常见的取值有：
除了以上这些取值之外，还可以使用贝塞尔曲线来自定义动画周期的速度变化方式。
.element {
animation-timing-function: ease-in-out; /* 动画周期为ease-in-out */
}
在上面的代码块中，我们将动画周期的速度变化方式设置为ease-in-out。