html中定义动画名字和规则,CSS3-animation属性和@keyframes规则

在HTML中定义动画名字可以通过CSS的@keyframes规则来实现，具体步骤如下：

1. 在CSS样式表中使用@keyframes规则定义动画效果。

例如，定义一个从左到右移动的动画：

@keyframes move-left-to-right {
  from {left: 0;}
  to {left: 100px;}
}

2. 在CSS样式表中使用animation-name属性引用定义好的动画名字。

例如，将上面定义好的动画应用到一个元素上：

.box {
  animation-name: move-left-to-right;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

这样，元素就会根据定义好的动画规则产生动画效果。

CSS3-animation属性可以同时定义多个动画属性，包括动画的持续时间、延迟时间、动画方式、重复次数等。例如：

.box {
  animation: move-left-to-right 2s ease-in-out 0s infinite alternate;
}

这样就可以直接定义元素的动画效果，而不需要再使用@keyframes规则了。