CSS3 animation多个动画

示例

CSS animation allows you to specify multiple animations on an element. By using the animation property, you can define different animations such as keyframes, duration, timing function, delay, iteration count, direction, and fill mode. Here’s an example of defining multiple animations on an element:

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(200px); }
  100% { transform: translateX(0); }
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.element {
  animation: move 2s ease-in-out infinite alternate,
             rotate 1s linear infinite;
}

In this example, the .element will have two animations applied to it simultaneously. The first animation move will move the element back and forth horizontally while the second animation rotate will continuously rotate the element in a clockwise direction. By specifying multiple animations in the animation property separated by commas, you can create complex and visually appealing effects on your elements. Experiment with different keyframes and properties to create unique animations for your website or web application.