一、概念

???????????過渡：一般需要結合鼠標去使用

? ? ? ? ? ? 動畫：一運行自己動起來

二?、創建動畫

? ? ? ? 方式一：@keyframes 動畫的名字{from{}to{}}

? ? ? ? 方式二：@keyframes 動畫的名字{0%{}...100%{}}

三、?使用動畫：

? ? ? ? 必須要寫的：

? ? ? ? ? ?① animation-name====動畫的名字

? ? ? ? ? ②? animation-duration===動畫的運動時間

? ? ? ? 其他的：

? ? ? ? ? ? ③animation-delay===延遲時間

? ? ? ? ? ? ④animation-timing-function===動畫的運動曲線（和過渡完全一致）

? ? ? ? ? ? ⑤animation-iteration-count===動畫的運動次數

? ? ? ? ? ? ⑥animation-direction===動畫的運動方向

????????????????取值 ：? ? ? ?

? ? ? ? ? ? ? ? ? ? normal===正常，從起點運動到重點

? ? ? ? ? ? ? ? ? ? reverse===反轉，從重點運動到起點

? ? ? ? ? ? ? ? ? ? alternate====正反交替

? ? ? ? ? ? ? ? ? ? alternate-reverse===反正交替

? ? ? ? ? ?⑦ animation-play-state===動畫的播放狀態

? ? ? ? ? ? ? ? 取值：

????????????????????????running===運動===默認值

? ? ? ? ? ? ? ????????? paused===暫停

? ? ? ? 重要：簡寫方式： animation:需要什么值就寫什么

? ? ? ? 注意：運動時間和延遲時間有書寫順序，其他沒有（運動時間在前，延遲時間在后）

四、半圓的知識

語法：?border-radius: ；

?????????????????1個值：上下左右4個角同時變化

? ? ? ? ? ? ? ? 2個值：左上角和右下角 ?右上角和左下角

? ? ? ? ? ? ? ? 3個值：左上 ? 右上和左下 ?右下

? ? ? ? ? ? ? ? 4個值：左上 右上 ?右下 ?左下 順時針的賦值順序

五、3d變形

①位移語法：transform：translatex/y/z（數值px）

? ? 坐標軸：

? ? ? ? x軸：向右為正，向左為負

? ? ? ? y軸：向下為正，向上為負

? ? ? ? z軸：向前為正，向后為負

? ? 屬性值：

? ? ? ? ? ?1.位移translate

? ? ????????2.旋轉rotate

? ????????? 3.縮放scale

? ? 注意：要想看到3d的效果

? ? ? ? 1.必須給想要呈現3d效果的元素找一個父親，在這個大盒子上要寫

? ? ? ? ? ? ?transform-style: preserve-3d;

? ? ? ? 2.必須適當的讓3d空間(3d舞臺)旋轉一下

②旋轉語法：transform: rotateY/x/z(數值deg);

③縮放語法：?transform: scaleX/y/z(數值);

總結

以上是生活随笔為你收集整理的动画和3d变形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。