css3之animation 提交按钮简单的动画

CSS3的animation属性可以用来创建按钮的简单动画。以下是一个示例，它演示了如何使用CSS3的@keyframes规则和animation属性为提交按钮添加一个简单的动画效果：

HTML:

<button id="animateBtn">Submit</button>

CSS:

#animateBtn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition: background-color 0.5s;
  animation: pulse 1s infinite;
}
 
#animateBtn:hover {
  background-color: #3e8e41;
}
 
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 20px 20px rgba(255, 255, 255, 0);
  }
  
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

在这个例子中，按钮在鼠标悬停时背景颜色会改变，同时会有一个放大的动画效果，通过animation属性和@keyframes规则实现。动画效果是无限循环的，每次循环持续1秒钟。