CSS3中實現(xiàn)動畫的方式有以下幾種:
1. transition
transition是CSS3中一個非常方便的動畫實現(xiàn)方式。可以通過添加一些簡單的CSS規(guī)則,實現(xiàn)元素在不同狀態(tài)之間的過渡動畫效果。
例如: box { width: 200px; height: 200px; background-color: pink; transition: all 1s; } box:hover { width: 300px; height: 300px; }
在上面的例子中,當(dāng)鼠標(biāo)移動到box元素上時,元素會從原本的200px x 200px的尺寸變成300px x 300px的尺寸,并在1秒鐘內(nèi)平滑過渡。
2. animation
animation是CSS3中最強大的動畫實現(xiàn)方式。通過定義關(guān)鍵幀,使元素從一個狀態(tài)動畫到另一個狀態(tài)。
例如: box { animation: mymove 1s ease infinite; } @keyframes mymove { 0% {left:0px;} 50% {left:200px;} 100% {left:0px;} }
在上面的例子中,元素會從初始狀態(tài)開始,每隔1秒鐘,沿著left屬性的值從0px變?yōu)?00px,再變回0px。最終形成一個往返的動畫效果。
3. transform
transform是CSS3中用來實現(xiàn)變換效果的屬性。通過對元素的旋轉(zhuǎn)、移動、縮放等變換,實現(xiàn)動畫效果。
例如: box { transform: rotate(45deg); }
在上面的例子中,元素將沿著中心點順時針旋轉(zhuǎn)45度。
以上三種方式是CSS3中常用的動畫實現(xiàn)方式。通過它們,可以實現(xiàn)各種炫酷的動畫效果。