CSS3的動畫怎么寫

CSS3的動畫功能非常強(qiáng)大，可以用來創(chuàng)建各種復(fù)雜的動畫效果，下面是一些基本的CSS3動畫寫法：

1、關(guān)鍵幀動畫：使用@keyframes規(guī)則來定義動畫的關(guān)鍵幀，然后在元素中使用animation屬性來調(diào)用這個動畫。

@keyframes myanimation {
  0% {background-color: red;}
  50% {background-color: blue;}
  100% {background-color: green;}
}
div {
  animation: myanimation 5s infinite;
}

2、過渡動畫：使用transition屬性來定義元素狀態(tài)改變時(shí)的過渡效果。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 2s;
}
div:hover {
  background-color: blue;
}

3、變形動畫：使用transform屬性來定義元素的變形動畫。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
  transition: transform 2s;
}
div:hover {
  transform: rotate(180deg);
}

這些只是CSS3動畫的一些基本寫法，實(shí)際上CSS3的動畫功能非常強(qiáng)大，可以實(shí)現(xiàn)各種復(fù)雜的動畫效果，要熟練掌握CSS3的動畫功能，需要不斷地學(xué)習(xí)和實(shí)踐。