動畫

創建動畫

1. @keyframes run {/* 從 */from{}/* 到 */to{transform: translateX(800px);}}2. @keyframes run2 {0%{}100%{transform: translateY(400px);}

使用動畫

animation-name: run;

動畫的運動時間

animation-duration: 3s;

動畫延遲時間

animation-delay: 1s;

動畫的運動曲線（和過渡完全一致）

animation -timing-function: steps(5);

動畫的運動次數 infinite無限次運動

animation-iteration-count: infinite;

動畫的運動方向

animation-direction: alternate-reverse;normal===正常，從起點運動到重點reverse===反轉，從重點運動到起點alternate====正反交替alternate-reverse===反正交替

動畫的播放狀態

animation-play-state: paused;running===運動paused===暫停一般要結合鼠標一起使用

簡寫方式：

animation:需要什么值就寫什么 注意：運動時間和延遲時間有書寫順序，其他沒有（運動時間在前，延遲時間在后）

畫圓，半圓，扇形

要想畫一個好看的半圓:一般建議寬度和高度做好2倍關系加圓角的時候圓角的值直接寫寬高其中最大值的一半即可。1個值：上下左右4個角同時變化2個值：左上角和右下角 右上角和左下角3個值：左上 右上和左下 右下4個值：左上 右上 右下 左下 順時針的賦值順序

3d變形transform

坐標軸：

x軸：向右為正，向左為負y軸：向下為正，向上為負z軸：向前為正，向后為負

要想看到3d的效果

1.必須給想要呈現3d效果的元素找一個父親，在這個大盒子上要寫，transform-style: preserve-3d;2.必須適當的讓3d空間(3d舞臺)旋轉一下

值

1.位移translatetransform: translateZ(0px);2.旋轉rotaterotateZ===圍繞z軸做旋轉，其實圍繞中心點旋轉。3.縮放scale

總結

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

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