1、transform: 適用于2D或3D轉換的元素

? ? ?transform-origin：元素的位置點

css3轉換（2D轉換和3D轉換）：可以對元素進行移動、縮放、轉動、拉長或拉伸。

2D轉換：translate()、rotate()、scale()、skew()、matirx()

? ? ? ? ? ? ? ? 位置變化 、 ? ?旋轉、 ? ?放大、 ? ?扭曲、 ? 矩陣

例子：

transform-origin:center 40px;變化的原點；

transition:transform .7s ease;

img:first-child{transform:roate(5deg)};

img:last-child{transform:roate(-5deg);}

:hover img:first-child{transform:roate(25deg)};

:hover img:last-child{transform:roate(-25deg);}

2、 transition ?過渡 添加某種效果從一種樣式轉到另一個樣式

飄入飄出效果：變化前 img{ transform:translate(-100px,-100px);

? ? ? ? ? ? ? ? ? ? ? ? ? ?opacity:0;

? ? ? ? ? ? ? ? ? ? ? ? ? ?transition:opacity 1s ease-in-out .5s;}

? ? ? ?變化后 ?:hover img{ ?transform:translate(0px,0px);

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? opacity:1;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? transition:opacity 1s ease-in-out .1s;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}

3、animation ?可設置時間 速度 開始 播放次數 需要@keyframes來定義可

例子：animation:fadeout 1s infinite ease-in-out;

@keyframes fadeout{

? ? ? ? ? ? ? ? ? ? ? ?from{transform:scale(0,0);}

? ? ? ? ? ? ? ? ? ? ? ?to{transform:scale(1,0);opacity:0}

? ? ? ? ? ? ? ? ?}

或者

@keyframes fadeout{

? ? ? ? ? ? ? ? ? ? ? 0%{transform:scale(0,0);}

? ? ? ? ? ? ? ? ? ? ? 25%{transform:scale(1,0);opacity:0}

? ? ? ? ? ? ? ? ? ? ? 100%{transform:scale(0,0);}

? ? ? ? ? ? ? ? ?}

?

轉載于:https://www.cnblogs.com/colorful-paopao1/p/8583677.html

總結

以上是生活随笔為你收集整理的再次梳理css3动画部分知识的全部內容，希望文章能夠幫你解決所遇到的問題。

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