CSS动画基础-CSDN博客

CSS动画使前端开发人员可以对HTML元素进行动画处理，从而为您的网站带来有趣而酷炫的外观。在本文中，我们将深入探讨如何在CSS中使用动画。完成后，您应该对该主题有很好的理解。尝试在代码编辑器中键入代码，然后查看其工作方式。这将有助于使概念更深入。现在让我们看一下这个例子。

要使用动画，我们必须使用@keyframes。关键帧是CSS用于制作动画的内容。

@ keyframes variable_name
{
    0% {
	  opacity : 0 ;
    }
    50% {
      	 opacity : 0.5 ;
    }
   100% {
	 opacity : 1 ;
   }
}
.class_name
{
	animation-name : variable_name
	animation-duration: 3s ;
	animation-delay : 3s ;
	animation-iteration-count : 3 ;
	animation-timing-function : ease-in / ease-out / ease-in-out / linear /                                                         cubic-bezier (0, 0, 1, 1);
	animation-play-state : paused / running;
	animation-direction : normal / reverse / alternate / alternate-reverse
	animation-fill-mode: none / forwards / backwards;
}

要使@keyframes可用，可以使用animation_name属性名称在类内声明它。这将调用刚刚创建的@keyframes 。

这两个CSS属性是完全使用@keyframes所需的唯一属性。

动画持续时间： 是动画工作所需的时间。
动画延迟 ：此属性在动画开始生效之前等待指定的时间。

animation-iteration-count指定@ 关键帧发生的次数。

动画计时功能描述了@keyframes中指定的参数随时间变化的速度或速度。其子属性为：

easy-in ：动画将以正常速度开始，然后随时间加速。
缓和：动画将以正常速度运行，然后随着时间的推移而减速。
缓入：动画开始较慢，然后在中间加速，最后结束。
linear ：这将使动画具有恒定的速度，因此不会有加速或减速。
cube-bezier ：此值允许我们创建自定义动画定时功能。 它包含四个值。第一个值是x轴的起点，第二个值是y轴的起点，第三个值是x轴的端点，第四个值是y轴的端点。