【全面系統講解CSS】學習筆記-第六章 CSS動畫

一、CSS動畫概述

1.1、補間動畫

1.1.1、transition

//	1s之後再開始動畫
transition-delay: 1s;

如果想要全部變換的話，可以直接指定

transition: all 1s;

1.1.2、transition-timing-function

1.1.3、瀏覽器的動畫調試工具

瀏覽器F12打開瀏覽器的前端調試工具。

在DevTools上按Esc鍵，調出動畫調試面板。

1.1.4、自定義動畫進度

Ceaser工具，製作動畫的進度

1.2、keyframes動畫

上圖這個run是在@keyframes這部分定義的。0%和100%也可以寫成如下圖所示的方式。

1.3、逐幀動畫

1.4、面試題